一句话看懂

一个基于 Three.js 的 3D 在线积木设计与搭建平台，提供真实物理感的搭建体验。用户可以在浏览器中自由设计作品，并生成零件清单和搭建步骤说明书，方便后续购买实体零件或分享。

目标用户：积木爱好者、创意设计爱好者、想在浏览器中体验乐高式搭建乐趣的所有人。

配图2

功能亮点

  • 50+ 种预设零件（基础砖、薄板、斜面、拱形、圆砖、科技件、人仔等）
  • 40+ 种颜色切换，支持自定义零件形状、尺寸和颜色
  • 基于物理规则的 3D 搭建系统（网格对齐、堆叠支撑、碰撞检测）
  • 拖拽或点击放置，方向键移动，R 键旋转
  • 模板中心（中世纪城堡、F1 赛车、机器人三大模板）
  • 自动生成分层搭建步骤说明书，含零件清单和步骤预览
  • 零件清单统计（总数、种类、颜色分布），支持导出 CSV
  • 导出功能（PNG 图片 / OBJ 3D 模型）
  • 丰富零件库 & 自定义零件：50+ 种预设零件（基础砖、薄板、斜面、拱形、圆砖、科技件、人仔等），40+ 种颜色切换，同时支持自定义零件形状、尺寸和颜色，发挥无限创意
  • image1919×876 182 KB
配图4

需求 / 使用场景

  • 用户想用数字工具先设计积木作品，验证效果后再购买实体零件
  • 搭建完成后需要知道所需零件的种类和数量，方便对照购买
  • 需要系统记录搭建步骤，便于复现和分享作品
  • 希望有预设模板作为参考或改造基础
  • 需要直观的 3D 交互体验，像搭实体积木一样流畅
  • 是什么：一个基于 Web 的 3D 在线积木设计与搭建工坊（网站），使用 Three.js 实现真实物理感的积木搭建体验。
  • 面向谁：积木爱好者、创意设计爱好者、想在浏览器里体验乐高式搭建乐趣的所有人。
配图8
配图5
配图1

痛点洞察

  • 脑子里有想法但不知道用哪些零件、怎么搭，缺乏数字设计工具
  • 搭建完成后不清楚需要多少种、多少个零件，购买时容易遗漏
  • 没有系统的搭建步骤记录，复现和分享作品很麻烦
  • 现有 3D 设计工具学习成本高，不够直观易用
  • Web 3D 技术（Three.js）已经足够成熟，浏览器里就能流畅运行
  • 积木搭建逻辑清晰（网格对齐、堆叠支撑、碰撞检测），适合用 AI 辅助开发
  • "先设计、再购买、后搭建"的流程很实用，数字设计是实体搭建的完美前置环节
  • Demo 体验地址
  • 体验链接：https://brick-craft.pages.dev/
  • TRAE 实践过程
配图3
配图7
配图6

可借鉴机会

  • 将数字设计与实体购买流程打通，提供一键购买零件清单功能
  • 增加社区分享功能，用户可上传作品并互相学习
  • 引入 AI 辅助设计，根据用户描述自动生成积木作品
  • 支持 AR 预览，让用户在现实环境中查看作品效果

来源信息