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

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

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

安裝依賴并設(shè)置項(xiàng)目

使用 Vite 初始化項(xiàng)目，并安裝 Three.js：

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

項(xiàng)目目錄結(jié)構(gòu)

我們將創(chuàng)建以下目錄結(jié)構(gòu)：

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)建相機(jī)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);// 添加一個(gè)立方體const geometry = new THREE.BoxGeometry();const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });const cube = new THREE.Mesh(geometry, material);scene.add(cube);// 動(dòng)畫函數(shù)const animate = () => {requestAnimationFrame(animate);// 旋轉(zhuǎn)立方體cube.rotation.x += 0.01;cube.rotation.y += 0.01;renderer.render(scene, camera);};animate();// 窗口尺寸調(diào)整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 組件引入應(yīng)用中。

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;

運(yùn)行項(xiàng)目

運(yùn)行以下命令啟動(dòng)開發(fā)服務(wù)器：

npm run dev

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

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