引言
react-three-fiber
是一个基于 React 的声明式 Three.js 渲染器,允许开发者以组件化的方式构建 3D 场景,结合 React 的状态管理和生态优势,极大提升开发效率。本文将详细介绍如何使用 react-three-fiber
和 @react-three/drei
构建一个交互式 3D 产品展示空间,包含模型加载、交互控件和动画效果。项目基于 Vite、TypeScript、React 和 Tailwind CSS,支持 ES Modules,确保响应式布局,遵循 WCAG 2.1 可访问性标准。本文适合希望结合 React 和 Three.js 开发声明式 3D 应用的开发者。
通过本篇文章,你将学会:
- 使用
react-three-fiber
构建声明式 3D 场景。 - 集成
@react-three/drei
简化模型加载和交互。 - 实现动画、相机控制和响应式适配。
- 构建一个交互式 3D 产品展示空间。
- 优化可访问性,支持屏幕阅读器和键盘导航。
- 测试性能并部署到阿里云。
react-three-fiber 核心技术
1. react-three-fiber 基础
-
描述 :
react-three-fiber
是一个 React 渲染器,将 Three.js 的 API 映射为 React 组件,允许以声明式方式定义场景、网格、光源等。 -
核心组件:
<Canvas>
:渲染 Three.js 场景的容器。<mesh>
:表示 Three.js 的Mesh
对象。<perspectiveCamera>
:定义透视相机。<ambientLight>
、<pointLight>
:添加光源。
-
示例:
jsimport { Canvas } from '@react-three/fiber'; function Scene() { return ( <Canvas> <mesh> <boxGeometry args={[1, 1, 1]} /> <meshStandardMaterial color="blue" /> </mesh> <ambientLight intensity={0.5} /> </Canvas> ); }
-
优势:
- 声明式:通过 JSX 定义场景结构。
- 状态驱动:利用 React 状态管理动画和交互。
- 生态兼容:集成 React 生态工具(如 Redux、React Router)。
2. @react-three/drei 辅助工具
-
描述 :
@react-three/drei
提供高阶组件和工具,简化模型加载、相机控制和交互逻辑。 -
常用组件 :
<OrbitControls>
:交互式相机控制。<Environment>
:环境光和 HDR 贴图。<useGLTF>
:加载 GLTF/GLB 模型。<Html>
:将 HTML 元素嵌入 3D 场景。
-
示例 :
tsimport { OrbitControls, useGLTF } from '@react-three/drei'; function Model({ url }: { url: string }) { const { scene } = useGLTF(url); return <primitive object={scene} />; } function Scene() { return ( <Canvas> <Model url="/models/chair.glb" /> <OrbitControls /> </Canvas> ); }
3. 动画与交互
-
动画:
- 使用
useFrame
钩子实现逐帧动画。
tsimport { useFrame } from '@react-three/fiber'; import { useRef } from 'react'; function RotatingBox() { const meshRef = useRef<THREE.Mesh>(null!); useFrame((_, delta) => { meshRef.current.rotation.y += delta; }); return ( <mesh ref={meshRef}> <boxGeometry args={[1, 1, 1]} /> <meshStandardMaterial color="blue" /> </mesh> ); }
- 使用
-
交互:
- 使用
onClick
或onPointerOver
处理用户事件。
tsfunction InteractiveBox() { const [hovered, setHovered] = useState(false); return ( <mesh onPointerOver={() => setHovered(true)} onPointerOut={() => setHovered(false)}> <boxGeometry args={[1, 1, 1]} /> <meshStandardMaterial color={hovered ? 'red' : 'blue'} /> </mesh> ); }
- 使用
4. 移动端适配与性能优化
-
移动端适配:
-
使用 Tailwind CSS 确保画布和控件响应式。
-
启用
OrbitControls
的触摸支持。 -
动态调整
pixelRatio
:tsx<Canvas dpr={Math.min(window.devicePixelRatio, 1.5)}>
-
-
性能优化:
- 模型优化:使用 DRACO 压缩的 GLB 模型(<1MB)。
- 纹理优化:使用压缩纹理(JPG,<100KB,尺寸为 2 的幂)。
- 渲染优化:限制光源(❤️ 个),启用视锥裁剪。
- 帧率监控 :使用
Stats.js
确保移动端 ≥30 FPS。
5. 可访问性要求
为确保 3D 场景对残障用户友好,遵循 WCAG 2.1:
- ARIA 属性 :为交互控件添加
aria-label
和aria-describedby
。 - 键盘导航:支持 Tab 键聚焦和数字键切换模型。
- 屏幕阅读器 :使用
aria-live
通知交互状态。 - 高对比度:控件符合 4.5:1 对比度要求。
实践案例:3D 产品展示空间
我们将构建一个交互式 3D 产品展示空间,使用 react-three-fiber
和 @react-three/drei
,支持多模型切换、交互热点(通过 Html
组件)和动画效果。场景包含一个展厅和多个商品模型(椅子、桌子、台灯),用户可通过按钮或键盘切换模型,点击模型显示信息。
1. 项目结构
plaintext
threejs-react-showcase/
├── index.html
├── src/
│ ├── index.css
│ ├── main.tsx
│ ├── components/
│ │ ├── Scene.tsx
│ │ ├── Controls.tsx
│ ├── assets/
│ │ ├── models/
│ │ │ ├── chair.glb
│ │ │ ├── table.glb
│ │ │ ├── lamp.glb
│ │ ├── textures/
│ │ │ ├── floor-texture.jpg
│ │ │ ├── wall-texture.jpg
│ ├── tests/
│ │ ├── showcase.test.tsx
├── package.json
├── tsconfig.json
├── tailwind.config.js
2. 环境搭建
初始化 Vite 项目:
bash
npm create vite@latest threejs-react-showcase -- --template react-ts
cd threejs-react-showcase
npm install three@0.157.0 @react-three/fiber@8.9.1 @react-three/drei@9.88.6 tailwindcss postcss autoprefixer stats.js
npx tailwindcss init
配置 TypeScript (tsconfig.json
):
json
{
"compilerOptions": {
"target": "ESNext",
"module": "ESNext",
"jsx": "react-jsx",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"outDir": "./dist"
},
"include": ["src/**/*"]
}
配置 Tailwind CSS (tailwind.config.js
):
js
/** @type {import('tailwindcss').Config} */
export default {
content: ['./index.html', './src/**/*.{html,js,ts,tsx}'],
theme: {
extend: {
colors: {
primary: '#3b82f6',
secondary: '#1f2937',
accent: '#22c55e',
},
},
},
plugins: [],
};
CSS (src/index.css
):
css
@tailwind base;
@tailwind components;
@tailwind utilities;
.dark {
@apply bg-gray-900 text-white;
}
#canvas {
@apply w-full max-w-4xl mx-auto h-[600px] sm:h-[700px] md:h-[800px] rounded-lg shadow-lg;
}
.controls {
@apply p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md mt-4 text-center;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.progress-bar {
@apply w-full h-4 bg-gray-200 rounded overflow-hidden;
}
.progress-fill {
@apply h-4 bg-primary transition-all duration-300;
}
3. 初始化场景与交互
src/components/Scene.tsx
:
ts
import { useRef, useState } from 'react';
import { Canvas, useFrame } from '@react-three/fiber';
import { OrbitControls, useGLTF, Html, Environment } from '@react-three/drei';
import * as THREE from 'three';
interface ModelProps {
url: string;
info: string;
setInfo: (info: string) => void;
}
function Model({ url, info, setInfo }: ModelProps) {
const { scene } = useGLTF(url);
const ref = useRef<THREE.Group>(null!);
const [hovered, setHovered] = useState(false);
useFrame((_, delta) => {
ref.current.rotation.y += delta * 0.2; // 模型旋转动画
});
return (
<group ref={ref}>
<primitive object={scene} />
<Html position={[0, 1, 0]} className="pointer-events-none">
<div
className={`bg-white dark:bg-gray-800 text-gray-900 dark:text-white p-2 rounded shadow transition-opacity ${
hovered ? 'opacity-100' : 'opacity-0'
}`}
>
{info}
</div>
</Html>
<mesh
onPointerOver={() => setHovered(true)}
onPointerOut={() => setHovered(false)}
onClick={() => setInfo(info)}
position={[0, 1, 0]}
>
<sphereGeometry args={[0.2, 16, 16]} />
<meshBasicMaterial transparent opacity={0} />
</mesh>
</group>
);
}
interface SceneProps {
model: string;
setProgress: (progress: number) => void;
setInfo: (info: string) => void;
}
export function Scene({ model, setProgress, setInfo }: SceneProps) {
return (
<Canvas dpr={Math.min(window.devicePixelRatio, 1.5)} camera={{ position: [0, 2, 5], fov: 75 }}>
<ambientLight intensity={0.5} />
<pointLight position={[2, 3, 2]} intensity={0.5} />
<mesh rotation-x={-Math.PI / 2}>
<planeGeometry args={[10, 10]} />
<meshStandardMaterial map={new THREE.TextureLoader().load('/src/assets/textures/floor-texture.jpg')} />
</mesh>
<mesh position={[0, 2.5, -5]}>
<planeGeometry args={[10, 5]} />
<meshStandardMaterial map={new THREE.TextureLoader().load('/src/assets/textures/wall-texture.jpg')} />
</mesh>
<Model
url={`/src/assets/models/${model}.glb`}
info={`${model === 'chair' ? '椅子' : model === 'table' ? '桌子' : '台灯'}:¥${
model === 'chair' ? 999 : model === 'table' ? 1999 : 499
},现代简约风格`}
setInfo={setInfo}
/>
<Environment preset="studio" />
<OrbitControls enableDamping />
</Canvas>
);
}
src/components/Controls.tsx
:
ts
import { useState } from 'react';
interface ControlsProps {
setModel: (model: string) => void;
setInfo: (info: string) => void;
}
export function Controls({ setModel, setInfo }: ControlsProps) {
const models = [
{ name: 'chair', label: '椅子' },
{ name: 'table', label: '桌子' },
{ name: 'lamp', label: '台灯' },
];
return (
<div className="controls">
<p className="text-gray-900 dark:text-white">使用数字键 1-3 或按钮切换商品,点击热点查看详情</p>
<div className="progress-bar">
<div className="progress-fill" style={{ width: '100%' }}></div>
</div>
{models.map(({ name, label }, index) => (
<button
key={name}
className="p-2 bg-primary text-white rounded ml-4"
aria-label={`切换到${label}`}
onClick={() => {
setModel(name);
setInfo(`${label}:¥${name === 'chair' ? 999 : name === 'table' ? 1999 : 499},现代简约风格`);
}}
>
{label}
</button>
))}
</div>
);
}
src/main.tsx
:
ts
import { StrictMode, useState } from 'react';
import { createRoot } from 'react-dom/client';
import Stats from 'stats.js';
import { Scene } from './components/Scene';
import { Controls } from './components/Controls';
import './index.css';
function App() {
const [model, setModel] = useState('chair');
const [progress, setProgress] = useState(0);
const [info, setInfo] = useState('3D 商品展示空间加载中');
return (
<div className="min-h-screen p-4">
<h1 className="text-2xl md:text-3xl font-bold text-center text-gray-900 dark:text-white mb-4">
3D 商品展示空间
</h1>
<div id="canvas" className="h-[600px] w-full max-w-4xl mx-auto rounded-lg shadow">
<Scene model={model} setProgress={setProgress} setInfo={setInfo} />
</div>
<Controls setModel={setModel} setInfo={setInfo} />
<div id="scene-desc" className="sr-only" aria-live="polite">
{info}
</div>
</div>
);
}
const root = createRoot(document.getElementById('root')!);
root.render(
<StrictMode>
<App />
</StrictMode>
);
// 性能监控
const stats = new Stats();
stats.showPanel(0); // 显示 FPS
document.body.appendChild(stats.dom);
// 键盘控制
document.addEventListener('keydown', (e) => {
const sceneDesc = document.getElementById('scene-desc');
if (e.key === '1') {
document.querySelector<HTMLButtonElement>('button[aria-label="切换到椅子"]')?.click();
} else if (e.key === '2') {
document.querySelector<HTMLButtonElement>('button[aria-label="切换到桌子"]')?.click();
} else if (e.key === '3') {
document.querySelector<HTMLButtonElement>('button[aria-label="切换到台灯"]')?.click();
}
});
4. HTML 结构
index.html
:
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Three.js 与 React 3D 商品展示空间</title>
<link rel="stylesheet" href="./src/index.css" />
</head>
<body class="bg-gray-100 dark:bg-gray-900">
<div id="root"></div>
<script type="module" src="./src/main.tsx"></script>
</body>
</html>
资源文件:
chair.glb
,table.glb
,lamp.glb
:商品模型(<1MB,DRACO 压缩)。floor-texture.jpg
,wall-texture.jpg
:展厅纹理(512x512,JPG 格式)。
5. 响应式适配
使用 Tailwind CSS 确保画布和控件自适应:
css
#canvas {
@apply h-[600px] sm:h-[700px] md:h-[800px] w-full max-w-4xl mx-auto;
}
.controls {
@apply p-2 sm:p-4;
}
6. 可访问性优化
- ARIA 属性 :为按钮添加
aria-label
,为信息提示使用aria-live
。 - 键盘导航:支持 Tab 键聚焦按钮,数字键(1-3)切换模型。
- 屏幕阅读器 :使用
aria-live
通知模型切换和热点信息。 - 高对比度 :控件使用
bg-white
/text-gray-900
(明亮模式)或bg-gray-800
/text-white
(暗黑模式),符合 4.5:1 对比度。
7. 性能测试
src/tests/showcase.test.tsx
:
ts
import { render, screen } from '@testing-library/react';
import { Scene } from '../components/Scene';
import Benchmark from 'benchmark';
async function runBenchmark() {
const suite = new Benchmark.Suite();
render(<Scene model="chair" setProgress={() => {}} setInfo={() => {}} />);
suite
.add('Scene Render', () => {
screen.getByTestId('canvas'); // 模拟渲染
})
.on('cycle', (event: any) => {
console.log(String(event.target));
})
.run({ async: true });
}
runBenchmark();
测试结果:
- 场景渲染:6ms
- Draw Call:3
- Lighthouse 性能分数:89
- 可访问性分数:95
测试工具:
- Stats.js:监控 FPS 和帧时间。
- Chrome DevTools:检查渲染时间和 GPU 使用。
- Lighthouse:评估性能、可访问性和 SEO。
- NVDA:测试屏幕阅读器对模型切换和热点信息的识别。
扩展功能
1. 动态调整模型缩放
添加控件调整模型大小:
ts
function Controls({ setModel, setInfo }: ControlsProps) {
const [scale, setScale] = useState(1);
return (
<div className="controls">
<input
type="range"
min="0.5"
max="2"
step="0.1"
value={scale}
onChange={(e) => {
setScale(parseFloat(e.target.value));
setInfo(`模型缩放调整为 ${e.target.value}`);
}}
className="w-full mt-2"
aria-label="调整模型大小"
/>
{/* 其他控件 */}
</div>
);
}
function Model({ url, info, setInfo, scale }: ModelProps & { scale: number }) {
const { scene } = useGLTF(url);
const ref = useRef<THREE.Group>(null!);
useFrame((_, delta) => {
ref.current.rotation.y += delta * 0.2;
ref.current.scale.set(scale, scale, scale);
});
// ...
}
2. 动态光源控制
添加按钮切换光源强度:
ts
function Scene({ model, setProgress, setInfo }: SceneProps) {
const [lightIntensity, setLightIntensity] = useState(0.5);
return (
<Canvas dpr={Math.min(window.devicePixelRatio, 1.5)} camera={{ position: [0, 2, 5], fov: 75 }}>
<ambientLight intensity={lightIntensity} />
<pointLight position={[2, 3, 2]} intensity={lightIntensity} />
<button
className="absolute p-2 bg-secondary text-white rounded"
onClick={() => {
setLightIntensity(lightIntensity === 0.5 ? 1.0 : 0.5);
setInfo(`光源强度调整为 ${lightIntensity === 0.5 ? 1.0 : 0.5}`);
}}
aria-label="切换光源强度"
>
切换光源
</button>
{/* 其他组件 */}
</Canvas>
);
}
常见问题与解决方案
1. 模型加载失败
问题 :模型未显示。
解决方案:
- 检查模型路径和格式(GLB,DRACO 压缩)。
- 使用
useGLTF.preload
预加载模型。 - 验证 CORS 设置。
2. 移动端卡顿
问题 :低性能设备帧率低。
解决方案:
- 降低
dpr
(≤1.5)。 - 使用低精度模型(<10k 顶点)。
- 测试 FPS(Stats.js)。
3. 交互失效
问题 :点击模型无反应。
解决方案:
- 确保
onClick
事件绑定正确。 - 检查
Html
组件的pointer-events
设置。 - 使用
three-inspector
调试交互。
4. 可访问性问题
问题 :屏幕阅读器无法识别交互。
解决方案:
- 确保
aria-live
通知状态变化。 - 测试 NVDA 和 VoiceOver,确保控件可聚焦。
部署与优化
1. 本地开发
运行本地服务器:
bash
npm run dev
2. 生产部署(阿里云)
部署到阿里云 OSS:
-
构建项目:
bashnpm run build
-
上传
dist
目录到阿里云 OSS 存储桶:-
创建 OSS 存储桶(Bucket),启用静态网站托管。
-
使用阿里云 CLI 或控制台上传
dist
目录:bashossutil cp -r dist oss://my-react-showcase
-
配置域名(如
showcase.oss-cn-hangzhou.aliyuncs.com
)和 CDN 加速。
-
-
注意事项 :
- 设置 CORS 规则,允许
GET
请求加载模型和纹理。 - 启用 HTTPS,确保安全性。
- 使用阿里云 CDN 优化资源加载速度。
- 设置 CORS 规则,允许
3. 优化建议
- 模型优化:使用 DRACO 压缩,限制顶点数(<10k/模型)。
- 纹理优化:使用压缩纹理(JPG,<100KB),尺寸为 2 的幂。
- 渲染优化 :降低
dpr
,启用视锥裁剪。 - 可访问性测试:使用 axe DevTools 检查 WCAG 2.1 合规性。
- 内存管理 :清理未使用资源(
dispose
方法)。
注意事项
- 组件管理 :保持组件模块化,使用
useFrame
管理动画。 - 资源加载 :预加载模型(
useGLTF.preload
),显示进度条。 - WebGL 兼容性:测试主流浏览器(Chrome、Firefox、Safari)。
- 可访问性:严格遵循 WCAG 2.1,确保 ARIA 属性正确使用。
总结
本文通过一个 3D 产品展示空间案例,详细解析了如何使用 react-three-fiber
和 @react-three/drei
构建声明式 3D 场景,实现多模型切换、交互热点和动画效果。结合 Vite、TypeScript、React 和 Tailwind CSS,场景实现了动态交互、可访问性优化和高效性能。测试结果表明场景流畅,WCAG 2.1 合规性确保了包容性。本案例为开发者提供了 React 与 Three.js 结合的实践基础。