前面几节,我们实现了 Three.js Editor,和官方的编辑器功能一样。
官方的编辑器是这样的:
添加 Mesh:

对它做平移、旋转、缩放:

在右边可以看到场景中所有的物体:

可以编辑材质等属性:

我们也实现了同样的功能。
首先是添加物体:

然后可以编辑:

选中物体就可以对它做编辑。
默认是位移,点击左侧的三个按钮切换模式,可以切到旋转、放缩模式。
右边是场景树,点击可以切换选中的物体:

选中的物体可以点击 delete 键删除。

可以编辑属性,比如修改材质颜色:

其余属性也是一样,大家可以自己扩展。
所有数据都保存在 json 里,可以看到 json 的内容:

我们用的 React 做前端框架、zustand 做状态管理、antd 做组件库、monaco editor 实现 json 代码高亮。
当然,你用 vue 来写也差不多。
编辑器的核心思路就是把数据都保存在 json 里,3D 场景通过 json 渲染出来,这样把这个 json 保存到服务端就可以实现 3D 场景的存储。
核心思路就是这样,可以实现更多的几何体、模型导入、属性编辑等,但思路都是一样的。
实现了这个编辑器,以后遇到各种 3D 编辑器的需求,你就都有思路了。