Skip to content

250. 实战:3D 画廊编辑器(一)

Published:

Three.js 的一个典型应用就是 3D 画廊:

image.png

就是一些画的展览。

实现思路可以想到:

把墙壁、地板、天花板画出来,然后上面挂上一些画,之后控制人物在画廊内走动来观察各个画。

但只是这样太简单了。

我们来做一个画廊的编辑器,可以定制画廊、定制画的内容,甚至对人物做定制。

用户可以通过在一个画布内画线,然后在另一个画布内生成对应的墙壁。

类似酷家乐这个在一个画布内画墙壁:

2025-09-23 22.29.31.gif

另一个画布内可以查看生成的墙壁一样:

image.png

但这里更简单一些。

并且可以对天花板、地板进行定制。

可以拖动画到不同的墙壁,可以更换画的内容。

人物也可以做定制,当然,比如人物换装,添加一些装饰等。

类似这样:

image.png

最后,控制这个人物在建好的画廊内走动,来观察各幅画。

大概就是做这样的一个应用。

编辑端是这些功能:

image.png

预览是这些:

总结

这节对 3D 画廊编辑器做了需求分析。

我们会做画廊墙壁绘制、天花板、地板定制、人物定制,之后预览生成的画廊,控制人物在画廊内四处走动。

下节就正式开始开发。

评论