3d-web-experience

Name: 3d-web-experience
Author: sebas-aikon-intelligence

github.com/sebas-aikon-intelligence设计与 UI047 次安装40 周前更新

代码仓库

关于 3d-web-experience

3d-web-experience 是用于规划和构建 3D 网页体验的技能，涵盖技术栈选择、模型准备、交互场景，以及面向网页用户的性能和易用性考量。

主要功能

01选择 Spline、React Three Fiber 或 Three.js
02准备并压缩适用于网页的 3D 模型
03构建交互式和滚动驱动的 3D 场景
04添加模型加载进度状态
05考虑移动端性能和静态备用方案

适用场景

01为网页项目选择 3D 技术栈
02准备供浏览器加载的模型
03添加响应滚动的产品可视化

安装

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

$npx skills add https://github.com/sebas-aikon-intelligence/antigravity-awesome-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

登录后评论