装修这个业务领域都是用 3D 来做。
比如装修编辑器里,拖拽一个家具模型到不同的房间,给地面设置不同的瓷砖,最后生成全景图看效果。
这整个业务流程都是需要用 3D 的技术。
这个业务领域做的最好的是酷家乐:
比如在它的编辑器里拖拽一个家具模型进去:

调整家具的位置:

全景浏览做好的效果:

这节开始,我们也来做一个这样的项目。
你可以先用一下酷家乐个人版 https://www.kujiale.com/ ,免费用
这节我们来做下需求分析,分析下要做什么功能:
首先是户型设计:
你要装修房子,总得先知道有哪些房间,这些房间的布局吧
也就是户型
酷家乐支持自己绘制、户型库、导入 cad 图纸等方式:

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

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

户型画出来之后,就是室内装修了:
可以导入家具:

对家具做旋转位移:

可以替换地板纹理:


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

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

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


当然,后端渲染这步不是 threejs 做的,我们也不实现。
我们只实现户型设计、2D/3D 切换、导入家具、家具编辑、全景浏览这些功能。
大概的需求是这些,细节等我们做的时候再细化。

总结
这节我们分析了下酷家乐装修编辑器的流程。
从户型设计到导入家具、家具编辑,全景浏览,到最后渲染出图之后的全景浏览。
整个流程还是很清晰的。
我们不会做全部的功能,比如后端渲染部分我们就不会做,这个不是用 threejs 渲染的。
我们会做户型设计(户型库),3D /2D 视图切换,导入家具,家具编辑(旋转、位移),全景浏览这些功能。
需求分析完了,下节就正式开始做。