王烨飞微博_源码网站制作教程_seo咨询邵阳_seo服务公司招聘

时间:2025/8/25 0:30:00来源：https://blog.csdn.net/qq_44808710/article/details/147125692 浏览次数:0次

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

今天，我们将更进一步，将上一篇中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 reactcd r3f-demonpm installnpm 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 (<Canvascamera={{ 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 /><meshLambertMaterialcolor="#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]} /><meshLambertMaterialcolor="#b4b4b3"emissive="#b4b4b3"/></mesh>);
}

💡 灯光组件 `Lights.jsx`

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