把一个多年没人维护的开源 3D 户型图工具重写了一遍，用了最新的技术栈

[linncharm9]

blueprint3d https://github.com/furnishup/blueprint3d 是一个挺有意思的开源项目， 可以在浏览器里画户型、摆家具、切换 2D/3D 视图。但原项目基于 jQuery 、CoffeeScript 和已经废弃的 Three.js API ，好几年没人维护了，现在基本跑不起来。

自己有个项目需要用到类似功能，找了一圈没有合适的现代替代品，就干脆自己重写了一遍。

demo: https://blueprint3d-modern.vercel.app/

---

改了什么

原版 → 现版：

• jQuery + CoffeeScript → TypeScript 严格模式 ES Module
• 废弃的 Three.js Geometry API → Three.js r181 BufferGeometry / WebGLRenderer
• tween.js → anime.js v4 （ camera 动画）
• 无持久化 → IndexedDB 本地存储，不需要任何后端
• 仅英文 → 多语言支持（中文简体 / 繁体 / 英文）
• 无 demo → Next.js 15 App Router + React 19 完整 demo

---

主要功能

• 2D 平面图编辑器：画墙、移动、删除，带吸附和尺寸标注
• 3D 实时预览：可以拖转视角，随时切换 2D/3D
• 家具放置：从分类目录拖拽摆放（床、沙发、桌椅、衣柜、卫浴、门窗等）
• 每件家具可单独调整尺寸、旋转、锁定位置
• 地板和墙面纹理可以按房间独立设置
• 房间模板：空白画布或预设房型直接开始
• 存档/读档：存在浏览器 IndexedDB ，不需要账号，不需要服务器
• 单位制：英寸/英尺、米、厘米、毫米可切换

---

技术栈

核心库（ src/）是纯 TypeScript ES Module ，可以独立于任何框架使用。

Demo 应用：

• Next.js 15 App Router
• React 19
• Tailwind CSS v4
• shadcn/ui + Radix UI
• Zustand （状态管理）
• Framer Motion （动画）
• next-intl （ i18n ）

---

仓库地址

原版： https://github.com/furnishup/blueprint3d 重写版： https://github.com/charmlinn/blueprint3d-modern

[JoeJoeJoe]

已 star 感谢分享!

[metalvest]

有合适的现代替代品
https://github.com/pascalorg/editor

[linncharm9]

@metalvest 感谢推荐

[szdubinbin]

这个项目之前关注过确实挺不错的，用现在的 Ai coding 可能能把里面历史 bug 和 ui 变得更美观一些

[linncharm9]

@szdubinbin 是的 现在重新改写了一下美观多了 也添加了很多家具