学完基础后,我们来做了这个综合实战项目:酷家乐装修编辑器
做完之后,我们和酷家乐的编辑器对比下:
首先看下酷家乐的:
你可以自己试一下 https://www.kujiale.com/
首先,它可以从户型库里搜索户型:

选一居室,我们找到两个比较简单的户型:

应用之后,就可以看到这个户型:

可以切换 2D 平面图和 3D 户型
我们可以拖一些家具进来:

2D、3D 视图都可以看到这个家具:

并且可以编辑位置、旋转角度:

你也可以直接改数据:

编辑好之后可以点击渲染,查看预览效果:


这就是酷家乐编辑器的核心业务流程。
当然,它还会把编辑好的数据发送到后端来生成渲染好的全景图,然后用来做效果展示。
这里我们只做前端部分。
然后再看下我们做的:
首先是切换户型:

我们只内置了两个户型。
户型有 2D、3D 视图:

可以拖家具到 3D 场景:

编辑家具位置、旋转角度:


可以在右侧改数据:

编辑好之后,可以点击渲染来看效果:


这就是我们做的酷家乐的全部功能。
和酷家乐的对比下,核心流程是一样的。
总结
做完之后,把我们做的和酷家乐的对比了下,核心功能是差不多的。
当然,我们肯定不可能实现完整酷家乐的功能,那是一个成熟的商业化项目,迭代了好多年,完全实现不现实。
自己实现一遍之后,对于户型、家具编辑、全景浏览,类似低代码的拖拽编辑,这些核心功能的原理就理解了。