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 对象、Vue 响应式状态、以及持久化存储。理解它们之间的关系是二次开发的关键。内核状态Three.js 对象本身持有最真实的运行时状态位置、旋转、缩放、材质参数等。所有渲染结果都来源于此。Vue 状态Vue 的ref和reactive管理界面层的显示状态例如当前选中的对象、工具栏模式、面板展开状态等。这些状态不直接参与渲染但决定用户看到什么。持久化状态场景 JSON 和localStorage保存了可以跨会话恢复的状态。用户保存场景时内核状态被序列化成 JSON加载时JSON 被反序列化回内核状态。同步方向用户通过面板改参数Vue - 内核 - 渲染用户通过画布拖拽内核 - Vue - 面板刷新用户保存场景内核 - JSON - localStorage。这种双向同步机制保证了编辑器的一致性和实时性。代码一瞥// 修改参数后同步到内核function updatePosition(id, x, y, z) { const obj editor.scene.getObjectById(id) obj.position.set(x, y, z) // Vue 监听到选中对象变化后刷新右侧面板 }