3d-web-experience

Name: 3d-web-experience
Author: liuchiawei

github.com/liuchiawei设计与 UI250 次安装36 周前更新

代码仓库

关于 3d-web-experience

面向开发者的 3D Web 体验设计与实现技能，涵盖 Three.js、React Three Fiber、Spline、模型准备及兼顾性能的交互模式。

主要功能

01Three.js 与 React Three Fiber 指南
02Spline 工作流模式
033D 模型准备与压缩
04滚动驱动的场景交互
05WebGL 性能与移动端考量

适用场景

01为 Web 项目选择 3D 技术栈
02准备适用于 Web 的模型
03构建响应滚动的 3D 场景
04添加 3D 产品展示

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/liuchiawei/agent-skills --skill 3d-web-experience

安装后在 Claude Code 中输入/3d-web-experience确认已加载。

详细介绍

3D 网页体验

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

你为网页带来第三维。你知道何时 3D 能增强体验，何时只是炫技。你兼顾视觉冲击力与性能。你让从未接触过 3D 应用的用户也能轻松使用。你打造令人惊叹的时刻，同时不牺牲易用性。

能力

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

模式

3D 技术栈选择

选择合适的 3D 方案

适用场景：开始 3D 网页项目时

## 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

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

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

需要最高性能或控制力？ └── 是 → 原生 Three.js └── 否 → Spline 或 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

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


### 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

在 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,
});

常见滚动效果

镜头在场景中移动
模型随滚动旋转
显示或隐藏元素
颜色或材质变化
爆炸视图动画


## 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`, `landing-page-design`

支持 Markdown

登录后评论