Skip to content

129. 实战:酷家乐装修编辑器(三十三):和酷家乐对比

Published:

学完基础后,我们来做了这个综合实战项目:酷家乐装修编辑器

做完之后,我们和酷家乐的编辑器对比下:

首先看下酷家乐的:

你可以自己试一下 https://www.kujiale.com/

首先,它可以从户型库里搜索户型:

image.png

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

image.png

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

2025-08-05 22.11.53.gif

可以切换 2D 平面图和 3D 户型

我们可以拖一些家具进来:

2025-08-05 22.15.29.gif

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

image.png

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

2025-08-05 22.17.37.gif

你也可以直接改数据:

2025-08-05 22.29.53.gif

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

image.png

image.png

这就是酷家乐编辑器的核心业务流程。

当然,它还会把编辑好的数据发送到后端来生成渲染好的全景图,然后用来做效果展示。

这里我们只做前端部分。

然后再看下我们做的:

首先是切换户型:

2025-08-05 22.21.53.gif

我们只内置了两个户型。

户型有 2D、3D 视图:

2025-08-05 22.22.51.gif

可以拖家具到 3D 场景:

2025-08-05 22.25.03.gif

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

2025-08-05 22.26.37.gif

2025-08-05 22.28.02.gif

可以在右侧改数据:

2025-08-05 22.30.51.gif

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

image.png

2025-08-05 22.33.44.gif

这就是我们做的酷家乐的全部功能。

和酷家乐的对比下,核心流程是一样的。

总结

做完之后,把我们做的和酷家乐的对比了下,核心功能是差不多的。

当然,我们肯定不可能实现完整酷家乐的功能,那是一个成熟的商业化项目,迭代了好多年,完全实现不现实。

自己实现一遍之后,对于户型、家具编辑、全景浏览,类似低代码的拖拽编辑,这些核心功能的原理就理解了。

评论