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

编辑器的界面不是零散堆叠的，而是围绕“左中右 + 顶底”的框架组织。这个框架让复杂功能有稳定的入口，也方便二次开发时扩展新面板。

布局框架

• 顶部：场景管理、导入导出、全局操作；
• 左侧：组件库、资源列表；
• 中央：三维画布和悬浮工具栏；
• 右侧：属性面板、参数调节；
• 底部：预览切换、分享链接、快捷键提示；
• 浮动：AI 助手面板。

Vue3 组件化

界面层由多个 Vue 组件拼成：index.vue 负责整体布局，left.vue 和 right.vue 负责两侧面板，aiPanel.vue 负责 AI 助手。这种拆分让每个模块职责清晰。

状态同步

界面状态和内核状态通过 Vue 的响应式系统同步。例如用户在工具栏切换平移/旋转模式，会同步设置 transformControls.mode；反过来，用户用快捷键切换模式，也会刷新工具栏按钮状态。

扩展面板

由于界面层和内核层解耦，开发者可以新增自己的 Vue 面板，调用内核 API 实现自定义功能，而不需要修改渲染核心。

代码一瞥