没有模型文件,也没有一张照片
Caliber 08 是一个完全靠代码生成的机械腕表产品展示。整个页面被固定在一个 WebGL 画布上,没有 .glb 模型文件,没有纹理贴图,也没有任何摄影素材。这块表的每一个表面,都是在运行时用 Three.js 基础几何体和一块画布绘制的表盘程序化生成的。改代码里的一个数字,整块表就会跟着变。
![]()
24个滚动节点驱动镜头与装配
这个项目最核心的部分是滚动编排。页面里设置了 24 个滚动节点,用来控制镜头、灯光和手表的装配过程。整个手表由 57 个网格组成,来自 14 种组件类型,全部在代码里构建。背景和文字的色调系统会一起反转,形成统一的明暗切换。项目没有使用任何外部资源,滚动时也能保持 60 帧。
为什么一块表能说明问题
作者把这件事的意义指向了奢侈品电商。现在奢侈品的线上展示,仍然依赖为每一个 SKU、每一种配色、每一个角度单独拍摄昂贵的照片。Caliber 08 想证明的是,这些拍摄可以被程序化、可配置的 3D 内容替代。这样的方案更轻、可交互,而且可以无限定制。
技术栈与参赛信息
项目使用 Three.js、GSAP 和 Vite 构建,已经部署并提交到 Building Indonesia 活动。这个活动会选出 100 名获胜者分享超过 8 亿印尼盾的奖金,展示页上获得投票的前 200 名会进入评审阶段。作者特别提到,桌面端体验最好,移动端功能可用,但滚动编排还没有优化到位。
一个可交互的活体产品页
从产品展示的角度看,Caliber 08 把“看一块表”变成了一个可以滚动操控的过程。镜头、灯光、装配顺序都被编排进滚动动作里,用户不是在看静态图片,而是在触发一块表的组装和光影变化。这种展示方式如果用在真实商品页上,意味着同一套代码可以覆盖不同配色、不同角度,而不需要重新拍摄。
程序化生成的边界在哪里
这个项目也留下了一个开放问题:程序化 3D 能不能真正替代摄影。对于机械腕表这类结构规则、材质明确的产品,代码生成的几何体可以做到很高的还原度。但对于面料、皮革、复杂反光材质,程序化生成的质感是否足够说服消费者,还需要更多验证。Caliber 08 至少给出了一个可运行的方向。
特别声明:以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布,本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.