电鸭
13人浏览/1人投稿
21天前
待托管赏金
项目概述
我们需要开发一个运行于网页端的交互式3D设计工具，允许用户通过拖拽模块的方式，设计自己的车库布局，并实时看到3D效果图和总价。该项目旨在提升客户购买体验，并作为核心的销售转化工具。
这个设计会放在一个美国网站上。
核心功能需求
2.1. 用户界面与画布
画布区域： 一个2D俯视图网格画布，用于模拟车库平面图。
组件库： 一个可滚动的侧边栏，展示所有可用的柜体、工作台、工具挂板等模块的图标和名称。
3D预览窗口： 一个实时渲染的3D视图，与2D画布布局同步更新。
信息面板： 实时显示当前设计的总价、已选模块列表及其数量。
2.2. 核心交互功能
拖拽放置： 用户可将组件从库中拖拽至2D画布。
移动与删除： 在画布中选中已放置的模块，可进行移动或删除操作。
自动吸附与碰撞检测：模块放置时，应能自动吸附到网格和对齐其他模块。
实现基本的碰撞检测，防止模块在物理上重叠。
实时3D同步： 用户在2D画布上的任何操作（添加、移动、删除），3D预览窗口需实时更新。
3D视图控制： 用户可以在3D窗口中通过鼠标进行旋转、缩放、平移，从不同角度查看设计。
2.3. 配置与计算
模块配置： 点击画布上的模块，可弹出配置选项（例如，选择颜色/材质）。
实时定价引擎：前端需根据用户选择的模块类型、数量、配置，通过预定义的价目表实时计算并显示总价。
价格规则可能需要通过API从后端动态获取（为二期功能预留接口）。
2.4. 数据持久化与分享
方案保存： 用户（登录后）可将当前设计方案保存到服务器。
方案加载： 用户可加载自己之前保存的方案。
方案分享： 生成一个唯一的链接，允许他人查看（只读）此设计方案。
技术要求
前端框架： React / Vue.js （优先考虑React）
3D图形库： Three.js （必备）。需要经验丰富的WebGL/Three.js工程师。
UI库： Ant Design / Material-UI 等，用于快速构建管理界面。
后端语言： Node.js / Python （FastAPI/Django） / Java， 用于处理用户数据和定价逻辑。
数据库： PostgreSQL / MongoDB，用于存储用户方案、产品SKU和价格。
关键交付物与里程碑
4.1 第一阶段：核心MVP
完成基础的拖拽、3D预览、实时定价功能。
在浏览器本地实现方案暂存（无需后端）。
4.2 第二阶段：用户系统与数据持久化
实现用户注册/登录。
后端API与数据库设计。
方案的服务器端保存与加载。
4.3 第三阶段：优化与增强
实现方案分享功能。
性能优化（模型加载速度、大规模场景渲染）。
高级功能（如车库尺寸预设、图片背景上传）。
开发者注意事项
3D模型来源： 我们将提供所有柜体模块的3D模型文件（.stp格式)。开发团队需要负责将这些模型优化并集成到Three.js场景中。
性能要求： 必须考虑性能，确保在普通配置的电脑和浏览器上也能流畅运行。
浏览器兼容性： 需要支持所有现代浏览器（Chrome, Firefox, Safari, Edge）。
代码质量： 代码需结构清晰、有良好注释，便于后续迭代和维护。
请在你的回复中包括
6.1 对以上需求的技术可行性评估。
6.2 基于类似项目的作品集链接（必须是可交互的3D项目）。
6.3 初步的技术实施方案与架构建议。
6.4 根据功能优先级，给出大致的工期和报价范围。预算大概1万人民币。薪酬可以按里程碑来分开结算。
我们期待与有相关经验的团队合作。如果您有任何问题，可以加我微信
