3D 网页体验

3d-web-experience
分类通用
作者Agentic Awesome Skills 社区
许可MIT
评分4.90/5
使用7.4K

3D Web Experience (网页 3D 体验)

网页 3D 体验构建专家 - 精通 Three.js, React Three Fiber, Spline, WebGL 及交互式 3D 场景。涵盖产品配置器、3D 作品集、沉浸式网站，以及为网页体验增加深度。

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

你为网页带来第三维度。你深知 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 网页项目时

3D 技术栈选择

方案对比

| 工具 | 最适用场景 | 学习曲线 | 控制力 | |------|----------|----------------|---------| | Spline | 快速原型, 设计师 | 低 | 中 | | React Three Fiber | React 应用, 复杂场景 | 中 | 高 | | Three.js vanilla | 最大控制力, 非 React 项目 | 高 | 最高 | | Babylon.js | 游戏, 重度 3D | 高 | 最高 |

决策树

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

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


需要极致性能/控制力？
└── 是 → Three.js vanilla
└── 否 → 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

jsx
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 资产时

3D 模型管线

格式选择

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

优化流程

code
1. 在 Blender 等软件中建模
2. 降低面数 (网页端建议 < 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 <H

tml center>{progress.toFixed(0)}%</Html>;
}

export default function Scene() {
return (
<Canvas>
<Suspense fallback={<Loader />}>
<Model />
</Suspense>
</Canvas>
);
}

code
### 滚动驱动 3D


响应滚动的 3D 效果


适用场景：将 3D 与滚动交互结合时


滚动驱动 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(() => {
// 根据滚动位置旋转
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>
);
}

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

code
### 常见滚动效果
  • 相机在场景中移动

  • 模型随滚动旋转

  • 元素的显示/隐藏

  • 颜色/材质变化

  • 爆炸视图动画


性能优化


保持 3D 运行流畅


适用场景：始终适用 —— 3D 资源开销较大


3D 性能


性能目标

| 设备 | 目标 FPS | 最大三角面数 |
|--------|------------|---------------|
| 桌面端 | 60fps | 500K |
| 移动端 | 30-60fps | 100K |
| 低端设备 | 30fps | 50K |

快速优化方案
jsx // 1. 对重复对象使用实例化 (Instances) import { Instances, Instance } from '@react-three/drei';

// 2. 限制灯光数量
<ambientLight intensity={0.5} />
<directionalLight /> // 仅使用一个

// 3. 使用 LOD (细节级别)
import { LOD } from 'three';

// 4. 模型懒加载
const Model = lazy(() => import('./Model'));

code
### 移动端检测
jsx
const isMobile = /iPhone|iPad|Android/i.test(navigator.userAgent);

<Canvas
dpr={isMobile ? 1 : 2} // 移动端降低分辨率
performance={{ min: 0.5 }} // 允许掉帧
>

code
### 回退策略 (Fallback)
jsx
function Scene() {
const [webGLSupported, setWebGLSupported] = useState(true);

if (!webGLSupported) {
return <img src="/fallback.png" alt="3D preview" />;
}

return <Canvas onCreated={...} />;
}

code
## 验证检查


缺失 3D 加载指示器


严重程度：高 (HIGH)


提示信息：3D 内容缺少加载指示器。


修复方案：添加带有加载回退的 Suspense 或使用 useProgress 构建加载 UI。


缺失 WebGL 回退方案


严重程度：中 (MEDIUM)


提示信息：不支持 WebGL 的设备缺少回退方案。


修复方案：添加 WebGL 检测并提供静态图片回退。


3D 模型未压缩


严重程度：中 (MEDIUM)


提示信息：3D 模型可能未经过优化。


修复方案：使用 gltf-transform 配合 Draco 和纹理压缩对模型进行压缩。


OrbitControls 拦截滚动


严重程度：中 (MEDIUM)


提示信息：OrbitControls 可能会捕获滚动事件。


修复方案：添加 enableZoom={false} 或妥善处理滚动/触摸事件。


移动端 DPR 过高


严重程度：中 (MEDIUM)


提示信息：Canvas 的 DPR 对移动设备而言可能过高。


修复方案：将移动端的 DPR 限制为 1 以提升性能。


协作


委派触发词


  • scroll animation|parallax|GSAP -> scroll-experience (滚动集成)


  • react|next|frontend -> frontend (React 集成)


  • performance|slow|fps -> performance-hunter (3D 性能优化)


  • product pa

ge|landing|marketing -> landing-page-design (含 3D 的产品落地页)

产品配置器 (Product Configurator)


技能：3d-web-experience, frontend, landing-page-design


工作流：

1. 准备 3D 产品模型
2. 搭建 React Three Fiber 场景
3. 添加交互功能（颜色、变体）
4. 集成至产品页面
5. 针对移动端优化
6. 添加后备图片 (fallback images)
code
### 沉浸式作品集 (Immersive Portfolio)


技能：3d-web-experience, scroll-experience, interactive-portfolio


工作流：

1. 设计 3D 场景概念
2. 在 Spline 或 R3F 中构建场景
3. 添加滚动驱动动画
4. 集成至作品集板块
5. 确保移动端后备方案
6. 优化性能
``

相关技能

协同效果佳：scroll-experience, interactive-portfolio, frontend, landing-page-design`

使用场景

  • 用户提及或暗示：3D 网站
  • 用户提及或暗示：three.js
  • 用户提及或暗示：WebGL
  • 用户提及或暗示：react three fiber
  • 用户提及或暗示：3D 体验
  • 用户提及或暗示：spline
  • 用户提及或暗示：产品配置器

局限性

  • 仅在任务明确符合上述范围时使用此技能。
  • 不要将输出结果视为环境特定验证、测试或专家评审的替代方案。
  • 如果缺少必要的输入、权限、安全边界或验收标准，请停止并请求澄清。