Skip to content

84. 实战:Three.js Editor

Published:

官方有个编辑器,可以可视化的编辑 3D 场景。

https://threejs.org/editor/

比如添加 Mesh:

image.png

2025-04-21 10.06.15.gif

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

2025-04-21 10.07.36.gif

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

image.png

可以编辑几何体:

2025-04-21 10.10.34.gif

编辑材质:

2025-04-21 10.12.36.gif

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

image.png

这显然是前端框架结合 Three.js 实现的项目。

正好我们刚学完 Three.js 如何与前端框架集成,我们就拿这个编辑器来作为练手项目。

当然,不会实现全部的功能。

我们会实现这些:

添加 Mesh:

image.png

2025-04-21 10.19.01.gif

添加 Light:

image.png

2025-04-21 10.19.19.gif

移动物体:

2025-04-21 10.21.13.gif

旋转物体:

2025-04-21 10.21.58.gif

缩放物体:

2025-04-21 10.22.30.gif

场景对象树:

image.png

编辑几何体:

2025-04-21 10.24.39.gif

编辑材质:

2025-04-21 10.25.07.gif

这些核心功能。

总结

这节我们梳理了下 Three.js Editor 的需求。

我们会做这些功能:

添加 Mesh、添加 Light、移动物体、旋转物体、缩放物体、场景对象树、编辑几何体、编辑材质这些核心功能。

目的一个是为了学习如何实现编辑器,另一个是为了练习 Three.js 和前端框架结合。

我们没必要做的特别的完善,因为这涉及到很多前端的知识,我们主要是为了学习 Three.js,实现核心功能,理清思路即可。

评论