Threejs指南

简体中文

English

简体中文

English

Appearance

Three.js编辑器源码解析：功能与架构概览 ​

本文是《Three.js 编辑器源码解析》系列的第一篇，带你从宏观角度认识 Three.js 官方编辑器（以下简称 Editor）的功能边界与源码架构。这一篇不讲细节实现，主要介绍Editor 到底由哪些模块组成、以及它们如何协作。

如果你正在思考如何实现一个3D场景编辑器，那么这个系列的文章一定会对你有所帮助。Three.js官方的Editor虽然功能比较简单，但是一个编辑器基本的功能它都实现了，并且有良好的架构，作为编辑器类项目的学习是最适合不过了。在展开源码研究前，我们先大体上了解了一下Editor有哪些功能。

可以通过官方地址体验，也可以通过从github仓库下载最新代码进行独立部署。

官方Editor地址：https://threejs.org/editor

github仓库：https://github.com/mrdoob/three.js

一、功能概览 ​

Editor的编辑器功能和主流的3D软件类似，需要较专业的3D知识才能更好的驾驭。

1、界面布局 ​

image-20251025164458152

2、功能列表 ​

2.1 场景编辑 ​

添加、、删除各种对象，如几何体、灯光、摄像机，所有操作都可撤销/重做（Undo / Redo）。

2.2 物体编辑 ​

对所选择的物体修改各种属性，如修改灯光的位置，强度，修改立方体的几何体属性、材质参数等。

2.3 动画控制 ​

对于导入的模型，如果带有动画属性，属性面板中就会显示模型的动画名称，点击播放按钮模型会执行动画 image-20251025171208482

2.4 导入导出 ​

选择要导出的模型，通过文件中的导出按钮，可以导出多种格式的模型：

image-20251025172308237

除了这里的导出，Editor还支持直接导出json文件，选中需要导出的物体，在属性面板中点击“导出JSON”按钮，既可以将选择的物体以json格式导出为文件，后续编辑时直接拖入编辑即可加载。

image-20251025171854552

前端代码也可以直接加载该json文件：

js
import * as THREE from "three";

const scene = new THREE.Scene();
const loader = new THREE.ObjectLoader();

// 加载导出的 json 文件
loader.load("scene.json", (loadedScene) => {
  // loadedScene 就是完整的 Scene 实例
  console.log(loadedScene);

  // 如果 editor 导出的是整个 Scene，可以直接替换
  scene.add(loadedScene);

  // 或者直接使用 loadedScene 替代你的 scene
  // scene = loadedScene;
});

推荐的工作流是在Editor中搭建完整个场景，导出json，前端加载，完成场景的渲染。

2.5 脚本编辑 ​

给模型添加逻辑代码，例如响应鼠标点击事件、自动旋转等逻辑。以下给模型创建一个旋转动画：

选中模型，点击面板中的脚本，新建，输入脚本名称，编辑：

image-20251025174330045

js
function update( event ) {
	this.rotation.y += event.delta * 0.005; 
}

设置完成后点击代码部分右上角的x关闭代码，面板切换到项目，在APP一栏找到启动按钮点击，可以看到模型旋转效果：

二、源码结构 ​

Editor源码位于Three.js仓库的editor目录下，代码文件按照扁平化的方式创建：

1. 主入口文件 ​

  • index.html - 应用程序的主HTML文件，定义了基本的页面结构和UI布局

  • manifest.json - PWA清单文件，支持离线使用

  • sw.js - Service Worker文件，处理缓存和离线功能

2. 核心编辑器模块 (js/ 目录) ​

2.1 主控制器 ​

  • Editor.js - 核心编辑器类，是整个应用程序的主控制器

  • Config.js - 配置管理，存储应用程序设置和常量

  • Storage.js - 本地存储indexedDB的封装，处理项目保存和加载

2.2 用户界面组件 ​

菜单栏系统 (Menubar.*.js)

  • Menubar.js - 菜单栏主控制器

  • Menubar.File.js - 文件操作菜单（新建、打开、保存等）

  • Menubar.Edit.js - 编辑操作菜单（撤销、重做、复制等）

  • Menubar.Add.js - 添加对象菜单（几何体、光源、相机等）

  • Menubar.View.js - 视图控制菜单

  • Menubar.Help.js - 帮助菜单

  • Menubar.Status.js - 状态栏显示

工具栏

  • Toolbar.js - 主工具栏控制器

侧边栏系统 (Sidebar.*.js)

  • Sidebar.js - 侧边栏主控制器

  • Sidebar.Scene.js - 场景树视图

  • Sidebar.Properties.js - 属性面板

  • Sidebar.Object.js - 对象属性编辑

  • Sidebar.Geometry.js - 几何体属性编辑

  • Sidebar.Material.js - 材质属性编辑

  • Sidebar.Project.js - 项目管理

  • Sidebar.Settings.js - 设置面板

  • Sidebar.Script.js - 脚本编辑器

2.3 视口系统 (Viewport.*.js) ​

  • Viewport.js - 3D视口主控制器

  • Viewport.Controls.js - 相机控制

  • Viewport.Info.js - 视口信息显示

  • Viewport.ViewHelper.js - 视图辅助工具

  • Viewport.XR.js - VR/AR支持

  • Viewport.Pathtracer.js - 路径追踪渲染

2.4 命令系统 (commands/ 目录) ​

  • Commands.js - 命令系统入口文件

  • Command.js - 基础命令类

  • AddObjectCommand.js - 添加对象命令

  • RemoveObjectCommand.js - 删除对象命令

  • MoveObjectCommand.js - 移动对象命令

  • SetPositionCommand.js - 设置位置命令

  • SetRotationCommand.js - 设置旋转命令

  • SetScaleCommand.js - 设置缩放命令

  • SetMaterialCommand.js - 设置材质命令

  • SetGeometryCommand.js - 设置几何体命令

  • 以及其他各种属性设置命令

2.5 历史管理 ​

  • History.js - 撤销/重做历史管理

2.6 工具类 ​

  • Selector.js - 对象选择器

  • Loader.js - 文件加载器

  • Player.js - 场景播放器

  • Script.js - 脚本管理

  • Resizer.js - 窗口大小调整

  • EditorControls.js - 编辑器控制

  • LoaderUtils.js - 加载工具函数

  • Strings.js - 国际化字符串

3. 第三方库 (libs/ 目录) ​

  • app.js - 应用程序入口

  • ui.js - UI组件库

  • ui.three.js - Three.js UI组件

  • codemirror/ - 代码编辑器

  • ternjs/ - JavaScript代码智能提示

  • acorn/ - JavaScript解析器

  • esprima.js - JavaScript语法分析

  • jsonlint.js - JSON验证

  • signals.min.js - 事件系统

4. 样式和资源 ​

  • css/main.css - 主样式文件

  • images/ - 图标和图片资源

  • examples/ - 示例项目文件

以上是Editor的功能和源码的大体介绍，在后续的文章中我们将深入细节探索Editor的精巧实现。