首页/资讯中心/详情

three.js 编辑器的源码结构解析

three.js 编辑器的源码结构解析
📅 发布时间：2026/7/30 15:01:55

three.js 编辑器的源码结构解析

本文围绕three.js 编辑器（一款基于 Three.js 的 AI 驱动可视化低代码编辑器）展开。
- 🌐 在线预览： https://z2586300277.github.io/threejs-editor/
- 📦 GitHub 开源仓库： https://github.com/z2586300277/three-editor
- 📚 文档地址： https://z2586300277.github.io/three-editor/docs/dist

three.js 编辑器把 Three.js 的渲染能力、Vue3 的响应式界面以及 AI 的场景编排能力整合成一个低代码工作台。它的源码并非传统意义上的单文件巨型脚本，而是按照「外壳—内核—扩展」三层清晰拆分，便于后续维护、定制与二次开发。理解这套结构，是团队落地数字孪生、可视化组态或 3D 配置类项目的前提。

一、工程分层：Vue 外壳 + 编辑器内核

项目入口是一个标准的 Vue3 + Vite 工程，但真正的 3D 能力由three-edit-cores提供。src/editor/lib.js仅做统一导出，这种「薄壳厚核」的设计让 UI 层可以随业务需求替换，而渲染、交互、动画、导出等核心逻辑始终复用同一套运行时。对于希望把编辑器能力嵌入自有后台系统的团队来说，这意味着只需重写外壳，而不必重新发明 3D 引擎。

二、目录职责

src/editor/是编辑器主包，内部职责非常清晰：
  • index.vue：顶层编排组件，包含场景切换、本地导入、线上导入、模板导出、GLB 导出、工具栏模式切换、快捷键指南、面板折叠控制等。
  • editor.vue：负责挂载画布容器并初始化ThreeEditor实例，是 Vue 与 three-edit-cores 的边界。
  • left.vue/right.vue：左右属性面板与资源树，分别承载组件库、对象树、属性编辑和场景设置。
  • ai/：AI 模块，包含配置、核心动作注册、大模型运行时与聊天面板。
  • compoents/：可视化组件库，每一个.js文件对应一种可拖拽的场景元素。
  • template.json：默认场景模板；indexDb.js负责本地资源缓存；lib.js统一导出核心能力。

三、数据与状态流转

场景以 JSON 形式持久化。ThreeEditor.saveSceneEdit()输出可序列化的场景描述，加载时通过resetEditorStorage还原。Vue 的dataCores.sceneName驱动场景切换，localStorage保存场景列表与配置，IndexedDB缓存用户上传的小体积模型，实现「打开即用」的体验。AI 层则以window.sceneAI为桥梁，把编辑器动作暴露给大模型，实现自然语言驱动场景创建。

四、组件与 AI 插件化

组件不是硬编码到内核，而是以外部模块注册。开发者按统一契约实现name/label/initParameters/create/createPanel即可被编辑器识别。AI 层则把 60 余项编辑器动作注册为工具，让 LLM 能够调用添加灯光、加载模型、调整材质等操作。这种插件化思路让编辑器的边界可以无限扩展。

五、典型扩展路径

基于当前源码结构，常见的扩展路径有三种：

  • 新增业务组件：在compoents/下新增 JS 文件，无需改动内核。
  • 替换 UI 外壳：保留editor.vue的画布逻辑，重写index.vue与面板以匹配企业设计规范。
  • 接入私有 AI：修改ai/config.js与ai/runtime.js的模型地址和系统提示词，接入企业内部大模型。

  • 六、给团队的建议

    对于首次接触 three.js 编辑器的团队，建议从阅读editor.vue的初始化流程和index.vue的事件分发入手，再逐步深入到ai/core.js的动作注册与compoents/的组件契约。把源码结构搞清楚后，二次开发、性能调优与问题定位都会变得事半功倍。

    代码一瞥

    // src/editor/lib.js
    export * from 'three-edit-cores'
    // src/editor/editor.vue
    import { ThreeEditor } from './lib'
    threeEditor = new ThreeEditor(editor.value, { fps: null, pixelRatio: window.devicePixelRatio * pixelRatioMulti, webglRenderParams: { antialias: true, alpha: true, logarithmicDepthBuffer }, sceneParams: changeDBModelUrl(sceneParams) })

    结语

    清晰的源码分层让 three.js 编辑器既适合作为开箱即用的可视化工具，也适合被拆分为核心 SDK 嵌入其他业务系统。掌握「Vue 外壳 + three-edit-cores 内核 + 组件扩展 + AI 编排」四层结构，是后续二次开发、性能调优与质量保障的共同基础。