滚动 3D 产品官网

一个完整的产品官网：滚动时实时 3D 模型旋转、打开、拆解，页面上的视频和图片都从这个模型渲染，整站是一个离线文件。

滚动 3D 产品官网

围绕一个实时 three.js 模型做一整个随滚动展开的产品官网，交付一个可离线打开的 HTML 文件。滚动到固定的 3D 版块时，产品会翻面、推近、沿轴拆开；页面上的视频和图片也都从同一个模型渲染，不需要素材库视频。动效、3D 场景和媒体是三个独立模块，本地脚本负责渲染媒体、打包单文件、在桌面和手机上检查，并录制滚动影片。

使用方法

  1. 定下产品、模型和 3D 版块的滚动姿态

  2. 从随包模板开始，分别修改 scene3d、文案、动效和媒体模块

  3. 从模型渲染媒体，打包成单文件，在桌面和手机上运行检查

常见问题

需要模型 Key 或付费调用吗？

不需要。全部在本地运行：three.js 渲染模型，ffmpeg 编码媒体，Chrome 运行检查。需要 Node.js 22.4 以上、Chrome 和带 libx264 的 ffmpeg。

能换成我自己的产品模型吗？

可以。模板里的物体只是占位：你描述自己的产品，Agent 用代码把它建出来，替换 scene3d/model.js 和 scene3d/facts.js，保持同样的 createModel 接口，再为它写滚动姿态、命名节点、文案和媒体镜头。会动的零件都由参数文件驱动，零件互相穿插或联动的零件脱开时检查会报错。加载 GLB 或 GLTF 文件不在模板里，也没有测试过：单文件在无网络环境运行，模型要嵌进页面里解析，而且每个零件要是单独的节点才能拆开。Skill 里写了这样做需要处理什么。

为什么是一个 HTML 文件？

页面要能在没有网络、没有存储的环境里打开，比如 Lab 的预览。build-single.mjs 把 CSS、字体、脚本和所有视频内联进一个文件，超过 5 MiB 就报错。两个示例分别约 4.5 和 4.7 MiB。

手机上和减少动效时会怎样？

手机使用较轻的 3D 档位（不开环境光遮蔽，阴影贴图更小）。开启 prefers-reduced-motion 时跳过开场，视频只显示封面，3D 版块换成一张拆解图静帧。

示例里的品牌是真的吗？

不是。Valmoret（制表工坊）和 Corvane（发动机厂）都是虚构的，两个模型都只是示意，不是工程数据。Valmoret 是模板自带的占位产品。Corvane 是单独的一次运行：一个只拿到 Skill 下载包和一段需求说明的 Agent 做出了发动机网站，之后对照几何探针经过七轮复审和修改，最后一轮由复审者完成。