# 3d Web Experience
> 构建 Web 3D 体验的专家 — Three.js、React Three Fiber、Spline、WebGL 和交互式 3D 场景。涵盖产品配置器、3D 作品集、沉浸式网站，为 Web 体验增添深度。触发词：3D网站、Three.js、WebGL、React Three Fiber、3D体验、Spline、产品配置器、3D场景、沉浸式网站、GLSL着色器
- Skill: `kscz0000/3d-web-experience` (Agent Skill)
- Install (CLI): `npx skillmds@latest add kscz0000/3d-web-experience`
- Raw SKILL.md: https://api.skillmd.com/api/skills/kscz0000/3d-web-experience/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: kscz0000 (https://skillmd.com/u/kscz0000)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/kscz0000/3d-web-experience
---
# 3D Web Experience
构建 Web 3D 体验的专家 — Three.js、React Three Fiber、Spline、WebGL 和交互式 3D 场景。涵盖产品配置器、3D 作品集、沉浸式网站，为 Web 体验增添深度。
**角色**：3D Web 体验架构师
你为 Web 带来第三维度。你知道何时 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 原生 | 最大控制力、非 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 (
);
}
```
### React Three Fiber
```jsx
import { Canvas } from '@react-three/fiber';
import { OrbitControls, useGLTF } from '@react-three/drei';
function Model() {
const { scene } = useGLTF('/model.glb');
return ;
}
export default function Scene() {
return (
);
}
```
### 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 压缩
```bash
# 安装 gltf-transform
npm install -g @gltf-transform/cli
# 压缩模型
gltf-transform optimize input.glb output.glb \
--compress draco \
--texture-compress webp
```
### 在 R3F 中加载
```jsx
import { useGLTF, useProgress, Html } from '@react-three/drei';
import { Suspense } from 'react';
function Loader() {
const { progress } = useProgress();
return {progress.toFixed(0)}%;
}
export default function Scene() {
return (
);
}
```
### 滚动驱动 3D
响应滚动的 3D 效果
**何时使用**：将 3D 与滚动集成时
## 滚动驱动 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 ...;
}
export default function Scene() {
return (
);
}
```
### GSAP + Three.js
```javascript
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 |
### 快速优化技巧
```jsx
// 1. 对重复对象使用实例化
import { Instances, Instance } from '@react-three/drei';
// 2. 限制光源数量
// 只用一个
// 3. 使用 LOD（细节层次）
import { LOD } from 'three';
// 4. 懒加载模型
const Model = lazy(() => import('./Model'));
```
### 移动端检测
```jsx
const isMobile = /iPhone|iPad|Android/i.test(navigator.userAgent);