使用 React-Three-Fiber 在 React 中导入和交互 3D 模型

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

React-Three-Fiber是一个强大的库，它结合了React的优势和Three.js的功能。在本文中，我们将分析一段代码，演示如何使用React-Three-Fiber和其他辅助库（例如@react-three/drei ）来实现一个交互式 3D 地球模型。
我们假设您已经对 React 有基本的了解，并且已经搭建了一个新的 React 应用程序。

步骤一：安装所需软件包

首先，我们来安装依赖项。请在终端中运行以下命令（确保您位于项目的根目录）：

npm install three @react-three/fiber @react-three/drei

这里，three是react-three-fiber用于创建和渲染 3D 场景的基础库。 @react-three/drei是react-three-fiber的一个辅助库，提供了一组可重用的组件和函数。

步骤二：下载3D模型

请确保您已下载 3D 模型并将其放置在public项目根目录下的文件夹中，如下所示：

您可以从这里下载。本教程
将使用其中一种格式。.gltf

步骤 3：设置画布

现在，在你的 React 组件中Canvas从@react-three/fiber导入它。

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

在 return 语句中使用 Canvas，如下所示：

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

const EarthCanvas = () => {
  return (
    <Canvas frameloop="demand" camera={{ position: [-4, 3, 6], fov: 45, near: 0.1, far: 200 }}> 
    </Canvas>
  );
};

export default EarthCanvas;

它Canvas需要一些道具：

• frameloopprop set todemand告诉 react-three-fiber 只在状态改变时重新渲染。
• camera道具用于调整摄像机在场景中的位置、视野范围以及近裁剪面和远裁剪面。您可以根据自己的喜好进行调整。

步骤 4：在 React 组件中导入 3D 模型

public为了导入我们放置在项目文件夹中的 3D 模型，我们将使用@react-three/dreiuseGLTF中的 hook 。

在组件顶部这样使用它：

const earth = useGLTF('./planet/scene.gltf');

useGLTF 钩子函数接受一个参数，即 3D 模型文件的路径scene。

步骤 5：渲染 3D 模型

我们可以使用该组件来渲染组件primitive。它是一个底层的 react-three-fiber 组件，可以表示任何 three.js 对象。

<primitive object={earth.scene} scale={2.5} />

该scale道具用于调整模型的大小。

现在，我们可以使用此组件App.jsx在浏览器中查看它。返回语句App.jsx如下所示：

  return (
    <div className="flex justify-center items-center h-screen w-screen">
      <EarthCanvas />
    </div>
)

瞧，这就是在 React 应用中渲染 3D 模型所需的一切。

如果您看不到模型或模型太暗，请尝试ambientLight在场景中添加一个。

<ambientLight intensity={0.5} />

还有其他一些增加照明的方法，例如directionalLight…… spotLight。您可以在这里了解更多信息。

步骤 6：添加交互性

为了给我们的模型添加交互性，我们可以使用@react-three/dreiOrbitControls中的组件，如下所示：

<OrbitControls autoRotate enableZoom={false} maxPolarAngle={Math.PI / 2} minPolarAngle={Math.PI / 2} enablePan={false} />

• 该autoRotate道具可使模型自动旋转。

• enableZoom在这种情况下， propsenablePan设置为 false，以禁用缩放和平移。

• maxPolarAngle道具minPolarAngle用于限制摄像机围绕 3D 物体的垂直旋转范围。

现在您也可以使用光标旋转模型了。

因此，我们 EarthCanvas 组件的最终代码如下所示：

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

import { OrbitControls, useGLTF } from '@react-three/drei';


const EarthCanvas = () => {

  const earth = useGLTF('./planet/scene.gltf');


return (

    <Canvas className="cursor-pointer" frameloop="demand" camera={{ position: [-4, 3, 6], fov: 45, near: 0.1, far: 200 }}>

      <OrbitControls autoRotate enableZoom={false} maxPolarAngle={Math.PI / 2} minPolarAngle={Math.PI / 2} enablePan={false} />

      <primitive object={earth.scene} scale={2.5} />

    </Canvas>

  );

};


export default EarthCanvas;

最后想说的话

本教程到此结束。我们使用 React 应用中的 `render`、`frame`和`render` 渲染了一个 3D 模型threejs，并添加了一些交互功能，使其更有趣。react-three-fiberreact-three/drei

您可以在这里找到官方文档，并使用React-Three-Fiber探索 React 中 3D 渲染的广阔世界。