three.js 编辑器的模型管理体系

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/dist3D 编辑器的心脏是模型管理。three.js 编辑器围绕模型构建了从导入、展示、编辑、统计到导出的完整闭环让外部资产能够无缝融入可视化场景并与组件、灯光、动画系统协同工作。多源模型导入three.js 编辑器支持三种模型来源。第一种是左侧“模型”面板中的在线模型库用户点击即可通过modelCores.loadModel加载。第二种是“线上导入”按钮允许用户输入任意 GLB/GLTF/OBJ/FBX URL。第三种是本地文件上传支持.glb和.fbx格式文件会被写入 IndexedDB模型地址自动替换为本地 Blob URL即使刷新页面也不会丢失。加载过程中编辑器会显示下载进度百分比加载完成后自动计算模型包围盒并用 GSAP 把相机平滑飞到最佳观察视角。getObjectViews负责根据模型尺寸推荐相机位置与目标点确保用户第一时间看到完整模型。场景树与对象管理右侧“场景树”面板展示了当前场景中的所有对象包括模型、灯光、组件和内置几何体。每个节点都可以重命名、显隐切换、选中或删除。scene.add与scene.remove被编辑器包装过每次增删都会同步更新场景树与右下角的统计面板。统计面板实时显示对象数、顶点数、三角面数帮助用户把控场景复杂度。对于导入的模型编辑器会自动排除TransformControls、Helper、GridHelper 等不可导出对象。模型在场景树中以对象 ID 为键双击名称即可进入编辑状态方便场景结构整理。模型与组件的协同导入的模型不仅是静态摆件还可以与编辑器的组件系统深度结合。用户可以把“路径运动”组件挂到模型上做巡航把“分解还原”组件应用到模型上做拆解演示或者通过 AI 助手调用playCoreModelAnimation控制模型内置动画。模型与组件共享同一套选中、变换、保存与释放机制避免了传统 Three.js 项目里“模型一套逻辑、特效一套逻辑”的割裂。场景导出与分享three.js 编辑器支持两种主要导出方式。一种是“模板”导出把整个场景序列化为 JSON包含相机、灯光、模型信息、组件参数等方便备份和版本管理。另一种是“导出 GLB”调用GLTFExporter把场景中可见的 Mesh、Group、Line 导出为.glb二进制文件可直接用于下游渲染管线或 Web 部署。分享方面编辑器可以通过 URL 参数?sceneNamexxx加载线上场景 JSON实现一键分享。场景名称会同步到window.currentOnlineSceneName顶部标题栏也提供了分享链接按钮。AI 驱动的模型操作AI 助手可以通过loadOnlineModel加载模型通过setProps调整位置、旋转、缩放通过deleteObject删除模型还能通过getSceneStats获取场景负载。对于中文模型名编辑器内置了别名与模糊匹配机制例如“狐狸”可以匹配到fox.glb让自然语言指令更贴近国内用户习惯。代码一瞥下面是本地模型上传后写入 IndexedDB 并加载的核心流程window.threeEditorDB.db.getRequest(file.name, url).then(res {const rootInfo { url: res.url, type: end.toLocaleUpperCase() GLB ? GLTF : end.toLocaleUpperCase(), threeEditorDBNameUrl: IndexDB: file.name }; const { loaderService } threeEditor.modelCores.loadModel(rootInfo); loaderService.complete m { const { maxView, target } getObjectViews(m); Promise.all([ createGsapAnimation(camera.position, maxView), createGsapAnimation(controls.target, target) ]).then(() { threeEditor.setOutlinePass([m]); controls.target.copy(target); transformControls.attach(m); }); }; });从在线模型库到本地文件从场景树管理到 GLB 导出three.js 编辑器的模型管理体系把 Three.js 中琐碎的资源加载与生命周期工作封装成了一套低代码工作流让开发者可以把精力放在场景叙事而不是资产搬运上。