React 與 Three.js 的結合 ：通過 React 管理組件化結構和應用邏輯，利用 Three.js 實現 3D 圖形的渲染與交互。使用這種方法，我們可以在保持代碼清晰和結構化的同時，實現令人驚嘆的 3D 效果。
在本文中，我們將以一個簡單的示例為基礎，詳細講解如何在 React 項目中集成 Three.js，并創建一個動態的 3D 場景。
本文介紹使用最原始的three，如果想了解 react-three-fiber 可以參考這篇文章：https://mp.weixin.qq.com/s/y0gsws7DqvbT_iZRasenkA?token=1707814885&lang=zh_CN
安裝依賴并設置項目
使用 Vite 初始化項目，并安裝 Three.js：
# 創建項目
npm create vite threejs-react-demo --template react# 進入項目目錄
cd threejs-react-app# 安裝 Three.js
npm install three
項目目錄結構
我們將創建以下目錄結構：
src/
├── components/ # 存放 React 組件
│ ├── ThreeScene.jsx # Three.js 場景組件
├── App.jsx # 入口文件
└── main.jsx # React 渲染入口
創建 Three.js 場景
1. 創建 ThreeScene.jsx
import React, { useEffect, useRef } from 'react';
import * as THREE from 'three';const ThreeScene = () => {const containerRef = useRef(null);useEffect(() => {// 獲取容器元素const container = containerRef.current;// 創建場景const scene = new THREE.Scene();// 創建相機const camera = new THREE.PerspectiveCamera(75,container.clientWidth / container.clientHeight,0.1,1000);camera.position.z = 5;// 創建渲染器const renderer = new THREE.WebGLRenderer();renderer.setSize(container.clientWidth, container.clientHeight);container.appendChild(renderer.domElement);// 添加一個立方體const geometry = new THREE.BoxGeometry();const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });const cube = new THREE.Mesh(geometry, material);scene.add(cube);// 動畫函數const animate = () => {requestAnimationFrame(animate);// 旋轉立方體cube.rotation.x += 0.01;cube.rotation.y += 0.01;renderer.render(scene, camera);};animate();// 窗口尺寸調整const handleResize = () => {camera.aspect = container.clientWidth / container.clientHeight;camera.updateProjectionMatrix();renderer.setSize(container.clientWidth, container.clientHeight);};window.addEventListener('resize', handleResize);// 清理return () => {window.removeEventListener('resize', handleResize);container.removeChild(renderer.domElement);};}, []);return <div ref={containerRef} style={{ width: '100%', height: '100vh' }} />;
};export default ThreeScene;
2. 修改 App.jsx
將 ThreeScene 組件引入應用中。
import React from 'react';
import ThreeScene from './components/ThreeScene';function App() {return (<div><h1 style={{ textAlign: 'center' }}>React + Three.js 示例</h1><ThreeScene /></div>);
}export default App;
運行項目
運行以下命令啟動開發服務器：
npm run dev
打開瀏覽器訪問 http://localhost:5173，你將看到一個旋轉的綠色立方體。
在本文中，我們將以一個簡單的示例為基礎，詳細講解如何在 React 項目中集成 Three.js，并創建一個動態的 3D 場景。無論你是剛接觸 3D 開發，還是已有一定經驗，相信都能從中有所收獲。
