使用 react-three-fiber 快速重构 Three.js 场景⚛️

news2025/4/18 11:41:01

不明白的知识先放在一边，激发兴趣是第一步，所以不必纠结代码的细节，相信我你很快就会爱上这种感觉！！！

今天，我们将更进一步，将上一篇中vite + npm传统 Three.js 原生代码完整 重构为 react-three-fiber 风格 ✅

本文将带你完成以下目标：

✅ 使用 React 重构原生 Three.js 场景
✅ 拆分组件化结构，实现同样效果
✅ 保留交互、动画、响应式特性

推荐网站	地址
官方文档	https://r3f.docs.pmnd.rs/getting-started
优秀中文文档	https://fiber.framer.wiki/Introduction

🌟 为什么选择 react-three-fiber？

react-three-fiber 是一个将 Three.js 映射为 React 声明式组件的库，优点包括：

✅ 完全响应式、组合式
✅ 更容易重用组件
✅ 支持 Suspense、hooks、reactivity 等 React 特性
✅ 社区活跃，生态丰富（如 drei、leva、postprocessing 等）

📦 创建项目 & 安装依赖

npm create vite@latest r3f-demo --template react

cd r3f-demo

npm install

npm install three @react-three/fiber @react-three/drei

📁 项目结构推荐

src/
├── App.jsx
├── components/
│   ├── Dodecahedron.jsx
│   ├── BaseBox.jsx
│   └── Lights.jsx
└── main.jsx

🎮 主组件 `App.jsx`

import { Canvas } from '@react-three/fiber';
import { OrbitControls } from '@react-three/drei';
import Dodecahedron from './components/Dodecahedron';
import BaseBox from './components/BaseBox';
import Lights from './components/Lights';

export default function App() {
  return (
    <Canvas
      camera={{ position: [0, 0, 5], fov: 75 }}
      style={{ width: '100vw', height: '100vh' }}
    >
      <color attach="background" args={['#f0f0f0']} />
      <Lights />
      <Dodecahedron />
      <BaseBox />
      <OrbitControls enableDamping dampingFactor={0.05} />
    </Canvas>
  );
}

🎲 十二面体组件 `Dodecahedron.jsx`

import { useRef } from 'react';
import { useFrame } from '@react-three/fiber';

export default function Dodecahedron() {
  const ref = useRef();

  useFrame(() => {
    ref.current.rotation.x += 0.01;
    ref.current.rotation.y += 0.01;
  });

  return (
    <mesh ref={ref}>
      <dodecahedronGeometry />
      <meshLambertMaterial
        color="#468585"
        emissive="#468585"
      />
    </mesh>
  );
}

🟫 底座方块组件 `BaseBox.jsx`

import { useRef } from 'react';
import { useFrame } from '@react-three/fiber';

export default function BaseBox() {
  const ref = useRef();

  useFrame(() => {
    ref.current.rotation.y += 0.01;
  });

  return (
    <mesh ref={ref} position={[0, -1.5, 0]}>
      <boxGeometry args={[2, 0.1, 2]} />
      <meshLambertMaterial
        color="#b4b4b3"
        emissive="#b4b4b3"
      />
    </mesh>
  );
}

💡 灯光组件 `Lights.jsx`

export default function Lights() {
  return (
    <>
      <ambientLight intensity={0.3} />
      <spotLight
        color="#006769"
        intensity={100}
        position={[1, 1, 1]}
        castShadow
      />
    </>
  );
}