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/dist

导入导出是连接编辑器与外部系统的桥梁。three.js 编辑器支持多种格式和方式，覆盖了从模型资源到完整场景的不同粒度。

模型导入

编辑器支持 GLB/GLTF/FBX/OBJ 等主流模型格式。用户可以通过顶部“本地导入”上传文件，也可以调用modelCores.loadModel从线上地址加载。模型加载完成后会自动聚焦到视图中央。

场景 JSON

整个编辑状态可以导出为 JSON，包括对象层级、参数、变换、动画和组件状态。这个 JSON 是编辑器的“源文件”，可以在不同设备、不同用户之间传递。

GLB 导出

当需要把场景集成到业务系统时，可以导出为 GLB。导出逻辑会排除 TransformControls、Helper、不可见对象等编辑辅助元素，只保留最终可见的 Mesh、Group 和 Line。

分享链接

通过getShareLink可以生成带sceneName参数的 URL。打开链接时，编辑器会从线上 JSON 地址加载场景，实现一键分发。

代码一瞥

// 导出 GLB
const exporter = new GLTFExporter() exporter.parse(scene, (buffer) => { const blob = new Blob([buffer], { type: 'model/gltf-binary' }) download(blob, 'scene.glb') }, { binary: true })