当前位置：首页 > news >正文

在 React 项目中安装和配置 Three.js

news 2025/7/7 3:14:00

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;