用 AI 三步创建 3D 视差滚动网站：从设计稿到可部署页面

为什么你需要 3D 视差滚动网站

海外用户对静态页面的耐心越来越低。一个带 3D 交互模型的视差滚动页面，能让建筑科普、产品官网、个人作品集或游戏场景预览在首屏就抓住注意力。

传统做法需要你同时掌握 Three.js、Blender 建模和前端性能优化，门槛不低。但如果你把 AI 智能体当作“总调度”，人的角色就只剩三件事：准备素材、下指令、检查结果。整个流程可以压缩到三步：做设计稿、做模型、嵌网站。

本教程的方法论核心是：滚动进度是唯一时间轴。页面从 0% 滚到 100%，背景、文字、相机位置、模型旋转、部件展开都按各自的速率系数响应这个进度。反向滚动时所有元素准确归位，状态完全由进度决定，没有随机动画。

第一步：做设计稿（6 屏定视觉基准）

设计稿的作用不是“画得好看”，而是统一视觉风格、降低 AI 生成代码时的审美不确定性，同时提前规划信息结构。

你需要产出 6 屏 16:9 的高清设计图：

• 01 首页：完整主体 + 站名 + 主标题 + 探索按钮
• 02 整体介绍：一句话说清“这是什么”
• 03 结构展示：爆炸图视角，没有真实资料就不要臆造内部零件
• 04 细节展示：最有辨识度的特写角度
• 05 价值展示：场景化使用画面
• 06 收尾：全貌 + 总结 + 行动按钮 + 页脚

实操要点：

• 固定色板色值，每张图都从 01 屏提取视觉基准，避免风格漂移。
• 文案必须真实，不编造数据。
• 交付物是 01-06 命名图 + 设计规范 + 逐屏文案，这三样后面都要喂给 AI。

第二步：做模型（双轨制 + 分件组装）

不要试图让 AI 一次生成整个复杂模型。正确策略是分件生成、统一组装，而且规则几何和曲面有机形态要分开走两条线。

规则件走 Blender（由 GPT-6 控制）：梁柱、表盘、表针这类精确尺寸的部件，Blender 天然适合。AI 可以通过三种方式控制 Blender：UI 自动化、MCP 连接、bpy 脚本。MCP 连接最稳定，但前提是你在本地配置好 Blender 安装路径。

曲面件走 Aholo Lux3D：复杂曲面、有机形态交给 Lux3D，它自动带 PBR 材质（金属度、粗糙度、透明度、折射）。注意它有两个版本：极速版最快 20 秒出模型，速度快约 50%，适合批量分件和方案验证；标准版材质还原度更好，适合最终精细件。

组装策略：

1. 先用极速版生成所有分件，确定整体布局。
2. 对重点部件用标准版重新生成，替换掉极速版。
3. 在 Blender 中统一组装，每个部件保留独立节点，记录初始 position / rotation / scale。这是后面做爆炸图动画的前提。

导出 GLB 时注意：用 glTF Binary 单文件格式，保留父子层级，贴图嵌入，材质要兼容 glTF。Blender 是 Z-up，Three.js 是 Y-up，需要做坐标轴转换。

最后用 asset-index.json 管理最终版本资产清单，AI 会靠它找到正确的文件。

第三步：嵌网站（Three.js + React Three Fiber）

技术栈固定为：Three.js + React Three Fiber + React + Vite + GLTFLoader + useScroll / useFrame。

流程是：把 6 张设计稿、设计规范、Blender 工程文件、GLB 文件放入 Codex 项目目录 → 发网页提示词 → AI 自动识别资产、导出 GLB、搭框架、写视差代码、起本地预览（localhost:5173）→ 你给具体反馈，AI 修正。

核心代码逻辑就四段：

// 相机随滚动移动
camera.position.lerpVectors(cameraStartPosition, cameraEndPosition, t)

// 模型整体旋转
model.rotation.y = t * Math.PI * 2

// 爆炸展开量（t 是滚动进度 0-1）
explodeAmount = Math.max(0, (t - 0.3) / 0.4) * explodeDistance[i]

// 部件位置从初始位置出发，不累加
part.position = initialPosition + explodeDirection * explodeAmount

关键点是爆炸动画的位置计算从初始位置出发，而不是累加偏移，否则反向滚动时无法归位。

移动端适配：上下堆叠布局，模型占屏 40-50%，标题字号 28-36px，支持触摸滚动 + 单指旋转 + 双指缩放。

本地预览做 8 项检查：模型加载、导航、章节过渡、反向滚动归位、爆炸展开、自由交互、移动端、60fps。

两个案例参考

应县木塔建筑科普：6 屏结构是初见 / 解构 / 柱网 / 斗栱 / 飞檐 / 守护。塔身逐层独立节点，爆炸沿 Y 轴向上展开，暗层（结构隐藏层）展开幅度小。

FS50P 手表官网：表壳和机芯用 Lux3D 生成，表盘、表针、表带用 Blender 精确搭建。滚动时整体 360° 旋转，结构章节做爆炸展开，加一个 “Click to explore” 交互入口。

常见问题与性能优化

遇到问题先查这几条：

• 设计稿风格不一 → 以 01 屏为基准重新生成。
• 曲面变形 → 换 Lux3D 重新生成。
• 模型倒置 → 检查 Z-up / Y-up 坐标轴转换。
• 爆炸不归位 → 检查位置计算是否从初始值出发。
• 加载慢 → 贴图从 2048 降到 1024，启用 Draco 压缩。
• 旋转与滚动冲突 → 给交互设明确入口，不默认开启。
• 插件失败 → 查 API Key、额度、版本。
• AI 找不到文件 → 重建 asset-index.json。
• 移动端遮挡 → 单独做移动端布局。
• 设计稿小字看不清 → 以逐屏文案为准。

性能优化三板斧：Draco 压缩可减 50-70% 体积；Basis / KTX2 压缩纹理；InstancedMesh 处理重复部件。setPixelRatio 上限设为 2，避免高分屏性能浪费。

部署用 npm run build 后推到 Vercel / Netlify / GitHub Pages 或自有 Nginx。GLB 文件走 CDN（R2 / OSS），设置 Cache-Control: max-age=31536000，必须上 HTTPS。

合规与安全提醒

API Key 只在本地配置文件中填写，绝不在对话里明文发送。 这是底线。

价格和时效表述以官方页面为准。本教程声称约 30 分钟完成，但实际耗时取决于你的素材质量和 AI 工具的当前状态，不保证人人可达。

(文中案例与数字均为来源材料中提及，未经独立核实。)

系列：AI 实操