React 與 Three.js 的結合 ：通過 React 管理組件化結構和應用邏輯，利用 Three.js 實現(xiàn) 3D 圖形的渲染與交互。使用這種方法，我們可以在保持代碼清晰和結構化的同時，實現(xiàn)令人驚嘆的 3D 效果。

在本文中，我們將以一個簡單的示例為基礎，詳細講解如何在 React 項目中集成 Three.js，并創(chuàng)建一個動態(tài)的 3D 場景。

本文介紹使用最原始的three，如果想了解 react-three-fiber 可以參考這篇文章：https://mp.weixin.qq.com/s/y0gsws7DqvbT_iZRasenkA?token=1707814885&lang=zh_CN

安裝依賴并設置項目

使用 Vite 初始化項目，并安裝 Three.js：

# 創(chuàng)建項目
npm create vite threejs-react-demo --template react# 進入項目目錄
cd threejs-react-app# 安裝 Three.js
npm install three

項目目錄結構

我們將創(chuàng)建以下目錄結構：

src/
├── components/       # 存放 React 組件
│   ├── ThreeScene.jsx # Three.js 場景組件
├── App.jsx           # 入口文件
└── main.jsx          # React 渲染入口

創(chuàng)建 Three.js 場景

1. 創(chuàng)建 ThreeScene.jsx

import React, { useEffect, useRef } from 'react';
import * as THREE from 'three';const ThreeScene = () => {const containerRef = useRef(null);useEffect(() => {// 獲取容器元素const container = containerRef.current;// 創(chuàng)建場景const scene = new THREE.Scene();// 創(chuàng)建相機const camera = new THREE.PerspectiveCamera(75,container.clientWidth / container.clientHeight,0.1,1000);camera.position.z = 5;// 創(chuàng)建渲染器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);// 動畫函數(shù)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;

運行項目

運行以下命令啟動開發(fā)服務器：

npm run dev

打開瀏覽器訪問 http://localhost:5173，你將看到一個旋轉的綠色立方體。

在本文中，我們將以一個簡單的示例為基礎，詳細講解如何在 React 項目中集成 Three.js，并創(chuàng)建一個動態(tài)的 3D 場景。無論你是剛接觸 3D 開發(fā)，還是已有一定經(jīng)驗，相信都能從中有所收獲。