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

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

article 2024/12/26 15:41:32

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;