第一章节：准备工作

在本章节中，我们将学习如何准备环境以开始使用React和Three.js创建交互式3D场景。首先，我们将创建一个新的React项目作为我们的基础。然后，我们将配置所需的Three.js依赖项，并确保一切正常运行。最后，我们将创建一个简单的React+Three.js场景，以确保我们的设置正确。

1. 创建React项目

在开始之前，请确保您已经安装了Node.js和npm。如果尚未安装，请先访问官方网站下载并安装它们。

步骤 1：使用Create React App工具创建新的React项目。

打开您喜欢的终端或命令提示符，并执行以下命令：

npx create-react-app react-threejs-tutorial

此命令将创建一个名为"react-threejs-tutorial"的新React项目。您可以将项目名称替换为您喜欢的名称。

步骤 2：进入项目目录并启动开发服务器。

进入您刚刚创建的项目目录：

cd react-threejs-tutorial

然后启动开发服务器：

npm start

现在，您应该在浏览器中看到React的欢迎页面。这意味着您已经成功创建了一个新的React项目。

2. 安装和配置Three.js依赖

现在，我们已经有一个可用的React项目，接下来是安装并配置Three.js所需的依赖项。

步骤 1：安装Three.js库。

在React项目的根目录中，打开终端或命令提示符，并执行以下命令来安装Three.js：

npm install three

这将下载并安装最新版本的Three.js库。

步骤 2：引入Three.js库。

在我们的React应用程序中使用Three.js之前，我们需要在代码中引入它。打开src/App.js文件，并在文件的开头添加以下行：

import * as THREE from 'three';

现在，我们已经成功地将Three.js库引入到我们的React项目中。

3. 创建第一个React+Three.js场景

现在，让我们创建我们的第一个React+Three.js场景，以确保一切都设置正确。

步骤 1：在src文件夹下创建一个名为ThreeScene.js的新文件。

touch src/ThreeScene.js

步骤 2：在ThreeScene.js文件中，我们将编写我们的第一个React组件，其中将包含一个简单的Three.js场景。

import React, { useRef, useEffect } from 'react';
import * as THREE from 'three';

const ThreeScene = () => {
  const sceneRef = useRef(null);

  useEffect(() => {
    // 在这里创建Three.js场景
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);

    sceneRef.current.appendChild(renderer.domElement);

    // 创建一个简单的红色立方体
    const geometry = new THREE.BoxGeometry();
    const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    // 将相机定位到远离立方体并渲染场景
    camera.position.z = 5;

    const animate = () => {
      requestAnimationFrame(animate);

      // 使立方体旋转
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;

      renderer.render(scene, camera);
    };

    animate();

    // 当组件卸载时，清理Three.js场景和渲染器
    return () => {
      scene.remove(cube);
      geometry.dispose();
      material.dispose();
      renderer.dispose();
    };
  }, []);

  return <div ref={sceneRef} />;
};

export default ThreeScene;

步骤 3：在App.js文件中使用ThreeScene组件。

import React from 'react';
import ThreeScene from './ThreeScene';

function App() {
  return (
    <div>
      <h1>My React+Three.js Scene</h1>
      <ThreeScene />
    </div>
  );
}

export default App;

现在，如果您在浏览器中查看您的React应用程序，您应该会看到一个简单的红色立方体在旋转。