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

在数字孪生与可视化场景中，3D 编辑器不是孤立存在的。three.js 编辑器提供了多层次的数据接入能力，能够连接本地状态、远程接口、实时消息与外部模型资源，让场景真正「动」起来，而不是只停留在静态展示。

一、场景即数据

three.js 编辑器的核心是「场景描述 JSON」。通过saveSceneEdit()可以把灯光、模型、相机、组件参数完整导出为结构化数据；通过resetEditorStorage()又能将 JSON 还原为可交互场景。这种数据驱动方式让版本管理、场景分享与多环境同步变得简单。业务系统可以把场景 JSON 存入数据库或对象存储，实现按项目、按版本管理。

二、本地持久化与 IndexDB

编辑器默认使用localStorage保存场景列表与配置，使用IndexedDB缓存用户上传的 GLB/FBX 模型。即使刷新页面，用户场景与本地资源也不会丢失。对于大体积模型，IndexDB 能避免重复下载，提升二次加载速度。在二次开发时，也可以把 localStorage 替换为企业级后端存储，以满足多设备同步需求。

三、远程模型与 API 接入

通过modelCores.loadModel与「线上导入」功能，编辑器可以直接加载远程 GLB/GLTF/FBX 模型。业务系统只需把模型地址、位置、旋转等元数据返回给前端，编辑器即可自动完成加载、聚焦与高亮。对于企业内部系统，建议统一走对象存储或 CDN，并配置 CORS。模型列表、权限校验与版本控制则由后端接口提供。

四、实时数据与图表组件

编辑器内置了 ECharts 图表组件与 CSS2D/CSS3D 标签，能够将实时数据映射到 3D 空间。结合 WebSocket 或 Server-Sent Events，数字孪生大屏、设备监控、城市态势感知等场景都能实现秒级刷新。数据变化时，组件通过统一的数据绑定接口更新材质颜色、位置、缩放或文本内容，而无需重新创建对象。

五、数据安全与脱敏

在接入真实业务数据时，必须考虑安全与合规。建议对敏感字段进行脱敏处理，避免把用户隐私信息直接写入场景 JSON。对于需要通过 URL 分享的场景，应设置访问令牌或有效期，防止未授权访问。模型资源地址也应通过签名 URL 或权限网关下发。

六、典型行业数据流

以智慧园区为例，整个数据流通常是：后端把楼宇、设备、传感器模型与实时状态推送到前端；编辑器根据场景 JSON 初始化 3D 园区；WebSocket 持续推送设备运行数据；组件把数据映射为颜色、高度、标签等视觉属性。用户既可以在编辑器中调整布局，也可以在预览态查看实时态势。

代码一瞥

// src/editor/index.vue 片段：线上模型导入
function loadModelUrl() { const url = window.prompt('请输入模型地址url') window.left_loadModel?.(url) }
// 文件上传后通过 IndexDB 缓存 const uploadChange = file => { const url = URL.createObjectURL(file.raw) window.threeEditorDB.db.getRequest(file.name, url).then(res => { const rootInfo = { url: res.url, type: end.toUpperCase() === 'GLB' ? 'GLTF' : end.toUpperCase(), threeEditorDBNameUrl: 'IndexDB:' + file.name } const { loaderService } = threeEditor.modelCores.loadModel(rootInfo) // loaderService.complete 中处理相机聚焦与高亮 }) }

结语

three.js 编辑器的数据接入方案覆盖了静态配置、本地缓存、远程资源与实时数据四类典型需求。以 JSON 场景描述为中心，再叠加合适的存储、接口与安全策略，就能构建出可扩展、可运营的可视化应用。