官方有个编辑器,可以可视化的编辑 3D 场景。
比如添加 Mesh:


然后可以对它做平移、旋转、缩放:

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

可以编辑几何体:

编辑材质:

你还可以在设置里把语言改为中文:

这显然是前端框架结合 Three.js 实现的项目。
正好我们刚学完 Three.js 如何与前端框架集成,我们就拿这个编辑器来作为练手项目。
当然,不会实现全部的功能。
我们会实现这些:
添加 Mesh:


添加 Light:


移动物体:

旋转物体:

缩放物体:

场景对象树:

编辑几何体:

编辑材质:

这些核心功能。
总结
这节我们梳理了下 Three.js Editor 的需求。
我们会做这些功能:
添加 Mesh、添加 Light、移动物体、旋转物体、缩放物体、场景对象树、编辑几何体、编辑材质这些核心功能。
目的一个是为了学习如何实现编辑器,另一个是为了练习 Three.js 和前端框架结合。
我们没必要做的特别的完善,因为这涉及到很多前端的知识,我们主要是为了学习 Three.js,实现核心功能,理清思路即可。