跳到正文
在线
zh-Hansv0.46.1 · 1d135e2
积极开发中更新于 2026年11月9日

DeskForge

面向电子产品商店的3D桌面配置器:顾客在自己真实的桌子上搭建工作区,并把整套商品加入购物车。

DeskForge配置器:带砖墙的3D房间里有一张升降桌,桌上摆着两台显示器、一台笔记本电脑和键盘,还有办公椅、置物架和落地灯,旁边是商品目录DeskForge配置器:带砖墙的3D房间里有一张升降桌,桌上摆着两台显示器、一台笔记本电脑和键盘,还有办公椅、置物架和落地灯,旁边是商品目录

挑战

在网上购买显示器、支架和桌子的人无法确定所有东西能否放得下、能否配合使用,于是犹豫不决、一次只买一件,或者把不合适的商品退回。

方案

  • 3D配置器: 逼真的场景,采用基于物理的材质、柔和阴影和环境光遮蔽、圆角、按真实布局建模的键盘、真实的商品颜色、来自Blender和GLB文件的模型、RGB灯光、哑光或亮面屏幕;通过合并网格控制渲染预算,并为手机提供画质模式。
  • 桌子与房间: 参数化桌子(直线型、带缺口、L型)、桌子在房间中的位置、家具、窗户、装饰品,以及六种室内预设。
  • 规则引擎: 检查摆放、人体工学和安装兼容性(VESA、承重、夹具),给出警告和一键修复;支持一到三台显示器的布局;支架和底座;尺寸模式。
  • 商品目录与销售: 带管理界面、导入功能和OpenAPI的商品目录API;14个类别中带照片的38件真实演示商品;规格、折扣和缺货状态;兼容商品推荐和“还缺什么”提示;一键把整套配置加入购物车。
  • 嵌入商店: gzip压缩后不到10 KB的加载脚本,采用frame-ancestors CSP的嵌入模式和演示商店,以及商品页用的精简小部件。
  • 配置管理: 通过短链接保存、命名、“My setups”、带Open Graph预览的分享页面、导出为PNG和PDF;撤销和重做。
  • 数据分析: 事件规划、数据采集和漏斗,在获得同意后转发到GA4和Meta Pixel,订单归因和平均订单金额。
  • 安全: 不以root身份运行的容器、请求体大小限制、支持IPv6的速率限制,以及允许嵌入的来源列表。
  • 架构: 11份架构决策记录,其中包括选定渲染引擎前进行的基准测试。

成果

配置器、商品目录、嵌入和数据分析功能已经完成并有测试覆盖;Shopify是计划中的第一个商店集成。实测结果:60张商品照片做成缩略图后从18.8 MB降到124.5 KB;延迟加载的嵌入框架让LCP减少了35–40 ms;室内预设切换耗时不到135 ms。

截图