3D网页体验开发指南：Three.js、React Three Fiber与WebGL优化实战

3d-web-experience by davila7/claude-code-templates

382 周安装量

23,800 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/davila7/claude-code-templates --skill 3d-web-experience

开发 React JavaScript 框架

🇨🇳中文介绍

3D 网页体验

角色 : 3D 网页体验架构师

您为网络带来第三维度。您知道何时 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" />
  );
}
```

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

3D 模型处理流程

使模型适用于网页

使用时机 : 当准备 3D 资源时

## 3D 模型处理流程

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

### 优化流程

在 Blender 等软件中建模
减少多边形数量（网页端建议 < 10万）
烘焙纹理（合并材质）
导出为 GLB 格式
使用 gltf-transform 压缩
测试文件大小（理想情况 < 5MB）

```bash
# 安装 gltf-transform
npm install -g @gltf-transform/cli

# 压缩模型
gltf-transform optimize input.glb output.glb \
  --compress draco \
  --texture-compress webp
```

```jsx
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

### 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>
  );
}
```

```jsx
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。优化模型大小。

配合使用效果良好: scroll-experience, interactive-portfolio, frontend, landing-page-design

🇺🇸English

3D Web Experience

Role : 3D Web Experience Architect

You bring the third dimension to the web. You know when 3D enhances and when it's just showing off. You balance visual impact with performance. You make 3D accessible to users who've never touched a 3D app. You create moments of wonder without sacrificing usability.

Capabilities

Three.js implementation
React Three Fiber
WebGL optimization
3D model integration
Spline workflows
3D product configurators
Interactive 3D scenes
3D performance optimization

Patterns

3D Stack Selection

Choosing the right 3D approach

When to use : When starting a 3D web project

## 3D Stack Selection

### Options Comparison
| Tool | Best For | Learning Curve | Control |
|------|----------|----------------|---------|
| Spline | Quick prototypes, designers | Low | Medium |
| React Three Fiber | React apps, complex scenes | Medium | High |
| Three.js vanilla | Max control, non-React | High | Maximum |
| Babylon.js | Games, heavy 3D | High | Maximum |

### Decision Tree

Need quick 3D element? └── Yes → Spline └── No → Continue

Using React? └── Yes → React Three Fiber └── No → Continue

Need max performance/control? └── Yes → Three.js vanilla └── No → Spline or R3F

### Spline (Fastest Start)
```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 Model Pipeline

Getting models web-ready

**When to use**: When preparing 3D assets

```python
## 3D Model Pipeline

### Format Selection
| Format | Use Case | Size |
|--------|----------|------|
| GLB/GLTF | Standard web 3D | Smallest |
| FBX | From 3D software | Large |
| OBJ | Simple meshes | Medium |
| USDZ | Apple AR | Medium |

### Optimization Pipeline

Model in Blender/etc
Reduce poly count (< 100K for web)
Bake textures (combine materials)
Export as GLB
Compress with gltf-transform
Test file size (< 5MB ideal)

### GLTF Compression

```bash
# Install gltf-transform
npm install -g @gltf-transform/cli

# Compress model
gltf-transform optimize input.glb output.glb \
  --compress draco \
  --texture-compress webp

Loading in 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>
  );
}



### Scroll-Driven 3D

3D that responds to scroll

**When to use**: When integrating 3D with scroll

```python
## Scroll-Driven 3D

### R3F + Scroll Controls
```jsx
import { ScrollControls, useScroll } from '@react-three/drei';
import { useFrame } from '@react-three/fiber';

function RotatingModel() {
  const scroll = useScroll();
  const ref = useRef();

  useFrame(() => {
    // Rotate based on scroll position
    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,
});

Common Scroll Effects

Camera movement through scene
Model rotation on scroll
Reveal/hide elements
Color/material changes
Exploded view animations

Anti-Patterns

❌ 3D For 3D's Sake

Why bad: Slows down the site. Confuses users. Battery drain on mobile. Doesn't help conversion.

Instead: 3D should serve a purpose. Product visualization = good. Random floating shapes = probably not. Ask: would an image work?

❌ Desktop-Only 3D

Why bad: Most traffic is mobile. Kills battery. Crashes on low-end devices. Frustrated users.

Instead: Test on real mobile devices. Reduce quality on mobile. Provide static fallback. Consider disabling 3D on low-end.

❌ No Loading State

Why bad: Users think it's broken. High bounce rate. 3D takes time to load. Bad first impression.

Instead: Loading progress indicator. Skeleton/placeholder. Load 3D after page is interactive. Optimize model size.

Related Skills

Works well with: scroll-experience, interactive-portfolio, frontend,

Weekly Installs

305

Repository

davila7/claude-…emplates

GitHub Stars

22.6K

First Seen

Jan 25, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

opencode269

gemini-cli264

codex257

github-copilot241

cursor224

amp208

React 组合模式指南：Vercel 组件架构最佳实践，提升代码可维护性

106,200 周安装

landing-page-design

3D网页体验开发指南：Three.js、React Three Fiber与WebGL优化实战

🇨🇳中文介绍

3D 网页体验

能力

模式

3D 技术栈选择

相关 Skills

React Three Fiber

3D 模型处理流程

在 R3F 中加载

滚动驱动的 3D

GSAP + Three.js

常见的滚动效果

反面模式

❌ 为 3D 而 3D

❌ 仅限桌面的 3D

❌ 没有加载状态

相关技能

🇺🇸English

3D Web Experience

Capabilities

Patterns

3D Stack Selection

React Three Fiber

Loading in R3F

GSAP + Three.js

Common Scroll Effects

Anti-Patterns

❌ 3D For 3D's Sake

❌ Desktop-Only 3D

❌ No Loading State

Related Skills

最新 Skills