Skip to content

97. 实战:酷家乐装修编辑器(一)

Published:

装修这个业务领域都是用 3D 来做。

比如装修编辑器里,拖拽一个家具模型到不同的房间,给地面设置不同的瓷砖,最后生成全景图看效果。

这整个业务流程都是需要用 3D 的技术。

这个业务领域做的最好的是酷家乐:

比如在它的编辑器里拖拽一个家具模型进去:

2025-04-18 10.14.42.gif

调整家具的位置:

2025-04-18 10.16.45.gif

全景浏览做好的效果:

2025-04-18 10.21.03.gif

这节开始,我们也来做一个这样的项目。

你可以先用一下酷家乐个人版 https://www.kujiale.com/ ,免费用

这节我们来做下需求分析,分析下要做什么功能:

首先是户型设计:

你要装修房子,总得先知道有哪些房间,这些房间的布局吧

也就是户型

酷家乐支持自己绘制、户型库、导入 cad 图纸等方式:

image.png

户型库就是已经内置的一些户型,可以直接导入:

2025-04-18 10.58.34.gif

户型设计好后,可以切换到 3D 视图,这样就可以装修了:

2025-04-18 11.04.07.gif

户型画出来之后,就是室内装修了:

可以导入家具:

2025-04-18 11.20.04.gif

对家具做旋转位移:

2025-04-18 11.21.06.gif

可以替换地板纹理:

2025-04-18 11.22.19.gif

image.png

装修完后,点击渲染,可以全景浏览看效果:

2025-04-18 11.32.29.gif

然后点击立即渲染按钮,会进入排队,在后端生成全景图需要的图片:

image.png

生成好后就可以全景浏览最终效果了:

image.png

2025-04-18 10.29.06.gif

当然,后端渲染这步不是 threejs 做的,我们也不实现。

我们只实现户型设计、2D/3D 切换、导入家具、家具编辑、全景浏览这些功能。

大概的需求是这些,细节等我们做的时候再细化。

image.png

总结

这节我们分析了下酷家乐装修编辑器的流程。

从户型设计到导入家具、家具编辑,全景浏览,到最后渲染出图之后的全景浏览。

整个流程还是很清晰的。

我们不会做全部的功能,比如后端渲染部分我们就不会做,这个不是用 threejs 渲染的。

我们会做户型设计(户型库),3D /2D 视图切换,导入家具,家具编辑(旋转、位移),全景浏览这些功能。

需求分析完了,下节就正式开始做。

评论