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 监听到选中对象变化后刷新右侧面板 }
