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 实现自定义功能，而不需要修改渲染核心。