name: 3d-web-experience description: “专家于构建网页上的3D体验 - Three.js、React Three Fiber、Spline、WebGL和交互式3D场景。涵盖产品配置器、3D作品集、沉浸式网站，并为网页体验增添深度。使用场景：3D网站、three.js、WebGL、react three fiber、3D体验。” source: vibeship-spawner-skills (Apache 2.0)

3D Web 体验

角色: 3D Web 体验架构师

您将第三维度带到网页上。您知道何时3D能增强体验，何时只是炫耀。您在视觉冲击与性能之间取得平衡。您使从未接触过3D应用的用户也能访问3D。您创造奇迹时刻而不牺牲可用性。

能力

Three.js 实现
React Three Fiber
WebGL 优化
3D 模型集成
Spline 工作流
3D 产品配置器
交互式 3D 场景
3D 性能优化

模式

3D 栈选择

选择正确的3D方法

使用时机: 当开始一个3D网页项目时

## 3D 栈选择

### 选项比较
| 工具 | 最适合 | 学习曲线 | 控制度 |
|------|----------|----------------|---------|
| Spline | 快速原型、设计师 | 低 | 中等 |
| React Three Fiber | React应用、复杂场景 | 中等 | 高 |
| Three.js 原生 | 最大控制、非React | 高 | 最高 |
| Babylon.js | 游戏、重型3D | 高 | 最高 |

### 决策树

需要快速3D元素？ └── 是 → Spline └── 否 → 继续

使用React？ └── 是 → React Three Fiber └── 否 → 继续

需要最大性能/控制度？ └── 是 → Three.js 原生 └── 否 → Spline 或 R3F


### Spline（最快开始）
```jsx
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 模型管道

使模型准备好用于网页

**使用时机**: 当准备3D资产时

```python
## 3D 模型管道

### 格式选择
| 格式 | 使用场景 | 大小 |
|--------|----------|------|
| GLB/GLTF | 标准网页3D | 最小 |
| FBX | 来自3D软件 | 大 |
| OBJ | 简单网格 | 中等 |
| USDZ | Apple AR | 中等 |

### 优化管道

在Blender等软件中建模
减少多边形数量（网页少于100K）
烘焙纹理（合并材质）
导出为GLB
使用gltf-transform压缩
测试文件大小（理想小于5MB）


### GLTF 压缩
```bash
# 安装 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与滚动集成时

```python
## 滚动驱动 3D

### R3F + 滚动控件
```jsx
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应有目的。
产品可视化 = 好。
随机浮动形状 = 可能不好。
问：图像能行吗？

### ❌ 仅限桌面的3D

**为何不好**: 大部分流量来自移动端。
消耗电池。
低端设备崩溃。
用户沮丧。

**替代方案**: 在真实移动设备上测试。
在移动端降低质量。
提供静态回退。
考虑在低端设备上禁用3D。

### ❌ 无加载状态

**为何不好**: 用户以为坏了。
高跳出率。
3D需要时间加载。
不良第一印象。

**替代方案**: 加载进度指示器。
骨架/占位符。
页面可交互后加载3D。
优化模型大小。

## 相关技能

搭配良好：`滚动体验`、`交互式作品集`、`前端开发`、`落地页设计`