THREE和React组合使用，react-three/fiber是最好的选择

@react-three/fiber是一个React渲染器，用在React应用程序中创建和渲染Three.js场景和对象。

Threejs是一个流行3D的JavaScript库，用在Web上创建和显示3D图形，@react-three/fiber将Three的API转化为React组件，让开发者能够使用React的声明式编程来创建复杂的3D场景。

特点：

1. 声明式API，使用React组件和属性来定义3D场景，而不是直接操作Threejs的API
2. 和React生态系统集成，可以使用React的state、hooks这些特性，以及其他React相关的第三方库和工具
3. 高性能，利用threejs的底层性能，同时保持React的简洁和高效
4. 容易上手，对于熟悉React的开发者来说，更容易学习threejs相关技能

安装必要的依赖

首先，需要在我们的项目中安装 @react-three/fiber 和 three。我们可以使用 npm 或 yarn 来安装它们：

npm install @react-three/fiber three
# 或者
yarn add @react-three/fiber three

创建React组件

然后，我们可以创建一个基本的 React 组件来包含我们的 3D 场景。通常，我们会使用 Canvas 组件作为包裹整个 Three.js 场景的容器。

import React from 'react';
import { Canvas } from '@react-three/fiber';

function MyThreeScene() {
  return (
    <Canvas>
      {/* 在这里添加你的 Three.js 对象和场景 */}
    </Canvas>
  );
}

export default MyThreeScene;

添加Threejs对象和场景

在 Canvas 组件内部，我们可以添加各种 Three.js 对象，如 mesh、light、camera 等。这些对象可以通过相应的 React 组件来创建。

import React from 'react';
import { Canvas } from '@react-three/fiber';
import { ambientLight, mesh, pointLight, boxGeometry, meshStandardMaterial } from '@react-three/drei';

function MyThreeScene() {
  return (
    <Canvas>
      <ambientLight intensity={0.5} />
      <pointLight position={[10, 10, 10]} />
      <mesh position={[0, 0, 0]}>
        <boxGeometry attach="geometry" args={[1, 1, 1]} />
        <meshStandardMaterial attach="material" color="pink" />
      </mesh>
    </Canvas>
  );
}

export default MyThreeScene;

使用@react-three/fiber创建一个简单的立体图，效果如图：

在直接调用threejs的API的时候，创建完成后，节点中会出现canvas元素。使用@react-three/fiber来开发3D应用的时候，是使用Canvas组件来包裹整个3D场景，然后再使用Box组件来创建一个立方体，根据需要再添加一些光源来照亮场景。代码如下：

import React from 'react';
import { Canvas } from '@react-three/fiber';
import { Box, useCursor } from '@react-three/drei';

function BoxRotation() {
  const ref = React.useRef();
  const [rotation, setRotation] = React.useState(0);

  useCursor(() => {
    ref.current.rotation.x += 0.01;
    ref.current.rotation.y += 0.01;
    setRotation(ref.current.rotation.x);
  });

  return (
    <Canvas>
      <ambientLight intensity={0.5} />
      <pointLight position={[10, 10, 10]} />
      <Box ref={ref} args={[1, 1, 1]} position={[0, 0, 0]} rotation={[0, 5, 2]}>
        <meshStandardMaterial attach="material" color="pink" />
      </Box>
    </Canvas>
  );
}

export default BoxRotation;

注意事项

• 确保你的项目配置支持 WebGL，并且你的浏览器也支持它。
• 你可以使用 React 的 state 和 props 来动态控制你的 3D 场景。
• 当你开始创建更复杂的场景时，你可能需要深入学习 Three.js 的文档和 API。
• @react-three/fiber 和 @react-three/drei 的版本可能会随着时间更新，所以请查阅最新的文档以获取最新的信息和最佳实践。

希望这些步骤能帮助你开始使用 @react-three/fiber 在 React 中创建 3D 场景！