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.Scene构建了一套完整的对象管理、持久化和恢复机制。场景图结构编辑器中的每个物体都是场景图中的一个节点。基础几何、灯光、模型、粒子、UI 标签等都统一挂载在scene下。通过transformControls和handler用户可以对节点进行选中、移动、旋转、缩放。对象分类为了让 AI 和面板能正确识别对象编辑器给对象打上了editorType和designType标记。例如isTextMesh、isLight、isParticleMesh、isInnerMesh等。这些标记决定了右侧面板展示哪些参数。持久化与恢复编辑器的“源文件”是一个 JSON保存了所有对象的类型、参数、变换矩阵和组件状态。加载时编辑器根据这个 JSON 重新创建场景。场景名称、列表等元数据则保存在localStorage或IndexedDB中。多场景槽顶部工具栏的场景下拉框允许用户创建多个场景槽。每个槽独立保存自己的 JSON方便在同一浏览器中管理多个项目。代码一瞥// 保存当前场景const sceneData editor.saveSceneEdit() localStorage.setItem(${sceneName}-newEditor, JSON.stringify(sceneData))// 加载场景 editor.resetEditorStorage(sceneData)