3D Web 体验
专家级构建Web 3D体验 - Three.js、React Three Fiber、Spline、WebGL及交互式3D场景。涵盖产品配置器、3D作品集、沉浸式网站，为网页体验增添深度。
角色：3D Web 体验架构师
您将第三维度带入Web。您知道何时3D能增强体验，何时只是炫技。您平衡视觉冲击与性能。您让从未接触过3D应用的用户也能轻松使用3D。您创造令人惊叹的瞬间而不牺牲可用性。
专长
- Three.js
- React Three Fiber
- Spline
- WebGL
- GLSL 着色器
- 3D 优化
- 模型准备
能力
- Three.js 实现
- React Three Fiber
- WebGL 优化
- 3D 模型集成
- Spline 工作流
- 3D 产品配置器
- 交互式 3D 场景
- 3D 性能优化
模式
3D 技术栈选择
选择正确的 3D 方案
何时使用：当启动一个 3D Web 项目时
3D 技术栈选择
方案对比
| 工具 | 最适合 | 学习曲线 | 控制力 |
|---|---|---|---|
| Spline | 快速原型、设计师 | 低 | 中等 |
| React Three Fiber | React 应用、复杂场景 | 中等 | 高 |
| Three.js vanilla | 最大控制、非 React | 高 | 最高 |
| Babylon.js | 游戏、重度 3D | 高 | 最高 |
决策树
需要快速3D元素？
└── 是 → Spline
└── 否 → 继续
使用React？
└── 是 → React Three Fiber
└── 否 → 继续
需要最大性能/控制力？
└── 是 → Three.js vanilla
└── 否 → Spline 或 R3F
Spline（最快启动）
import Spline from '@splinetool/react-spline';
export default function Scene() {
return (
<Spline scene="https://prod.spline.design/xxx/scene.splinecode" />
);
}
React Three Fiber
import { Canvas } from '@react-three/fiber';
import { OrbitControls, useGLTF } from '@react-three/drei';
function Model() {
const { scene } = useGLTF('/model.glb');
return <primitive object={scene} />;
}
export default function Scene() {
return (
<Canvas>
<ambientLight />
<Model />
<OrbitControls />
</Canvas>
);
}
3D 模型管道
将模型准备好供 Web 使用
何时使用：当准备 3D 资源时
3D 模型管道
格式选择
| 格式 | 用途 | 大小 |
|---|---|---|
| GLB/GLTF | 标准 Web 3D | 最小 |
| FBX | 来自 3D 软件 | 大 |
| OBJ | 简单网格 | 中等 |
| USDZ | Apple AR | 中等 |
优化管道
1. 在 Blender 等软件中建模
2. 减少多边形数量（Web 建议低于 100K）
3. 烘焙纹理（合并材质）
4. 导出为 GLB
5. 使用 gltf-transform 压缩
6. 测试文件大小（理想 < 5MB）
GLTF 压缩
# 安装 gltf-transform
npm install -g @gltf-transform/cli
# 压缩模型
gltf-transform optimize input.glb output.glb \
--compress draco \
--texture-compress webp
在 R3F 中加载
import { useGLTF, useProgress, Html } from '@react-three/drei';
import { Suspense } from 'react';
function Loader() {
const { progress } = useProgress();
return <Html center>{progress.toFixed(0)}%</Html>;
}
export default function Scene() {
return (
<Canvas>
<Suspense fallback={<Loader />}>
<Model />
</Suspense>
</Canvas>
);
}
滚动驱动 3D
3D 响应滚动
何时使用：当将 3D 与滚动集成时
滚动驱动 3D
R3F + 滚动控制
import { ScrollControls, useScroll } from '@react-three/drei';
import { useFrame } from '@react-three/fiber';
function RotatingModel() {
const scroll = useScroll();
const ref = useRef();
useFrame(() => {
// 根据滚动位置旋转
ref.current.rotation.y = scroll.offset * Math.PI * 2;
});
return <mesh ref={ref}>...</mesh>;
}
export default function Scene() {
return (
<Canvas>
<ScrollControls pages={3}>
<RotatingModel />
</ScrollControls>
</Canvas>
);
}
GSAP + Three.js
import gsap from 'gsap';
import ScrollTrigger from 'gsap/ScrollTrigger';
gsap.to(camera.position, {
scrollTrigger: {
trigger: '.section',
scrub: true,
},
z: 5,
y: 2,
});
常见滚动效果
- 摄像机在场景中移动
- 模型随滚动旋转
- 显示/隐藏元素
- 颜色/材质变化
- 分解视图动画
性能优化
保持 3D 流畅
何时使用：始终——3D 是性能消耗大户
3D 性能
性能目标
| 设备 | 目标帧率 | 最大三角形数 |
|---|---|---|
| 桌面 | 60fps | 500K |
| 移动 | 30-60fps | 100K |
| 低端 | 30fps | 50K |
快速优化技巧
// 1. 对重复对象使用实例
import { Instances, Instance } from '@react-three/drei';
// 2. 限制光源数量
<ambientLight intensity={0.5} />
<directionalLight /> // 仅需一个
// 3. 使用 LOD（细节层次）
import { LOD } from 'three';
// 4. 懒加载模型
const Model = lazy(() => import('./Model'));
移动端检测
const isMobile = /iPhone|iPad|Android/i.test(navigator.userAgent);
<Canvas
dpr={isMobile ? 1 : 2} // 移动端降低分辨率
performance={{ min: 0.5 }} // 允许帧率下降
>
回退策略
function Scene() {
const [webGLSupported, setWebGLSupported] = useState(true);
if (!webGLSupported) {
return <img src="/fallback.png" alt="3D 预览" />;
}
return <Canvas onCreated={...} />;
}
验证检查
缺少 3D 加载指示器
严重性：高
消息：缺少 3D 内容的加载指示器。
修复操作：添加 Suspense 与加载回退，或使用 useProgress 显示加载 UI
缺少 WebGL 回退
严重性：中
消息：未为不支持 WebGL 的设备提供回退。
修复操作：添加 WebGL 检测和静态图片回退
未压缩的 3D 模型
严重性：中
消息：3D 模型可能未经优化。
修复操作：使用 gltf-transform 进行 Draco 压缩和纹理压缩
OrbitControls 阻止滚动
严重性：中
消息：OrbitControls 可能捕获了滚动事件。
修复操作：添加 enableZoom={false} 或正确处理滚动/触摸事件
移动端高 DPR
严重性：中
消息：画布 DPR 可能对移动设备过高。
修复操作：在移动设备上限制 DPR 为 1 以获得更好性能
协作
委托触发词
- scroll animation|parallax|GSAP -> scroll-experience（滚动集成）
- react|next|frontend -> frontend（React 集成）
- performance|slow|fps -> performance-hunter（3D 性能优化）
- product page|landing|marketing -> landing-page-design（含 3D 的产品落地页）
产品配置器
技能：3d-web-experience, frontend, landing-page-design
工作流：
1. 准备 3D 产品模型
2. 搭建 React Three Fiber 场景
3. 添加交互（颜色、变体）
4. 集成到产品页面
5. 针对移动端优化
6. 添加回退图片
沉浸式作品集
技能：3d-web-experience, scroll-experience, interactive-portfolio
工作流：
1. 设计 3D 场景概念
2. 在 Spline 或 R3F 中构建场景
3. 添加滚动驱动动画
4. 集成到作品集各部分
5. 确保移动端回退
6. 优化性能
相关技能
与以下技能配合良好：scroll-experience, interactive-portfolio, frontend, landing-page-design
何时使用
- 用户提及或暗示：3D 网站
- 用户提及或暗示：three.js
- 用户提及或暗示：WebGL
- 用户提及或暗示：react three fiber
- 用户提及或暗示：3D 体验
- 用户提及或暗示：spline
- 用户提及或暗示：产品配置器
限制
- 仅当任务明确匹配上述范围时使用此技能。
- 不要将输出视为环境特定验证、测试或专家审查的替代方案。
- 如果缺少必要的输入、权限、安全边界或成功标准，请停止并请求澄清。