3d-web-experience

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

3D Web Experience

Web端3D体验

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.

角色: Web端3D体验架构师

你为Web世界带来三维维度。你深知何时该用3D提升体验，何时3D只是炫技。你能平衡视觉冲击力与性能表现。让从未接触过3D应用的用户也能轻松使用3D功能。在不牺牲易用性的前提下，创造令人惊叹的体验时刻。

Capabilities

核心能力

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

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

Patterns

实践模式

3D Stack Selection

3D技术栈选择

Choosing the right 3D approach

When to use: When starting a 3D web project

python

undefined

选择合适的3D实现方案

适用场景: 启动Web端3D项目时

python

undefined

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

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

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

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

是否需要极致性能/控制权？
└── 是 → Three.js vanilla
└── 否 → Spline 或 R3F

Spline (Fastest Start)

Spline（最快上手方案）

jsx

import Spline from '@splinetool/react-spline';

export default function Scene() {
  return (
    <Spline scene="https://prod.spline.design/xxx/scene.splinecode" />
  );
}

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

undefined

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

undefined

3D Model Pipeline

3D模型处理流程

Getting models web-ready

When to use: When preparing 3D assets

python

undefined

让模型适配Web环境

适用场景: 准备3D资源时

python

undefined

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

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

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

1. 使用Blender等工具建模
2. 降低多边形数量（Web端建议低于10万面）
3. 烘焙纹理（合并材质）
4. 导出为GLB格式
5. 使用gltf-transform压缩
6. 测试文件大小（理想值小于5MB）

GLTF Compression

GLTF压缩

bash

undefined

bash

undefined

Install gltf-transform

npm install -g @gltf-transform/cli

Compress model

gltf-transform optimize input.glb output.glb
--compress draco
--texture-compress webp

undefined

gltf-transform optimize input.glb output.glb
--compress draco
--texture-compress webp

undefined

Loading in R3F

在R3F中加载模型

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

undefined

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

undefined

Scroll-Driven 3D

滚动驱动的3D效果

3D that responds to scroll

When to use: When integrating 3D with scroll

python

undefined

随滚动交互的3D内容

适用场景: 将3D与滚动效果结合时

python

undefined

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

jsx

import { ScrollControls, useScroll } from '@react-three/drei';
import { useFrame } from '@react-three/fiber';
import { useRef } from 'react';

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

javascript

import gsap from 'gsap';
import ScrollTrigger from 'gsap/ScrollTrigger';

gsap.to(camera.position, {
  scrollTrigger: {
    trigger: '.section',
    scrub: true,
  },
  z: 5,
  y: 2,
});

javascript

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

undefined

相机在场景中移动
模型随滚动旋转
元素显示/隐藏
颜色/材质变化
分解视图动画

undefined

Anti-Patterns

反模式

❌ 3D For 3D's Sake

❌ 为3D而3D

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?

问题: 拖慢网站速度，让用户困惑，消耗移动设备电量，对转化无帮助。

正确做法: 3D应服务于实际需求。产品可视化是合理场景，而随机漂浮的形状大多没必要。先问自己：用静态图片能否达到同样效果？

❌ Desktop-Only 3D

❌ 仅支持桌面端的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.

问题: 大多数流量来自移动端，会消耗设备电量，在低端设备上可能崩溃，导致用户不满。

正确做法: 在真实移动设备上测试，降低移动端的3D画质，提供静态 fallback 方案，考虑在低端设备上禁用3D。

❌ 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.

问题: 用户会误以为网站崩溃，导致高跳出率。3D资源加载需要时间，会留下糟糕的第一印象。

正确做法: 添加加载进度指示器，使用骨架屏/占位符，在页面交互完成后再加载3D资源，优化模型大小。

3d-web-experience

Original

Translation

3D Web Experience

Web端3D体验

Capabilities

核心能力

Patterns

实践模式

3D Stack Selection

3D技术栈选择

3D Stack Selection

3D Stack Selection

Options Comparison

Options Comparison

Decision Tree

Decision Tree

Spline (Fastest Start)

Spline（最快上手方案）

React Three Fiber

React Three Fiber

3D Model Pipeline

3D模型处理流程

3D Model Pipeline

3D Model Pipeline

Format Selection

Format Selection

Optimization Pipeline

Optimization Pipeline

GLTF Compression

GLTF压缩

Install gltf-transform

Install gltf-transform

Compress model

Compress model

Loading in R3F

在R3F中加载模型

Scroll-Driven 3D

滚动驱动的3D效果

Scroll-Driven 3D

Scroll-Driven 3D

R3F + Scroll Controls

R3F + Scroll Controls

GSAP + Three.js

GSAP + Three.js

Common Scroll Effects

常见滚动交互效果

Anti-Patterns

反模式

❌ 3D For 3D's Sake

❌ 为3D而3D

❌ Desktop-Only 3D

❌ 仅支持桌面端的3D

❌ No Loading State

❌ 无加载状态

Related Skills

相关技能