到目前为止，我们只使用了基本形状来创建 3D 场景（立方体、球体、平面等）。

但使 3D 图形如此有趣的是能够导入和显示由 3D 建模软件创建的 3D 模型，如Blender、Maya、Cinema 4D、Nomad Sculpt等。

简介

我们在本课程中不会进行3D 建模，因为这本身就是一个完整的主题。要使用 threejs 和 React Three Fiber 创建 3D 体验并不是必须掌握的技能。你可以从网上找到许多免费的 3D 模型并在你的项目中使用它们。但学习 3D 建模的基础知识对更好地理解 3D 模型的制作和如何在项目中使用它们是很有帮助的。

如果你想走这条路，我推荐你使用 Blender，这是一款免费的开源 3D 建模软件。它是一个非常强大的工具，并且网上有许多教程可以帮助你学习如何使用它。

最知名的入门教程是 Blender Guru 的甜甜圈教程。

3D 模型

3D 模型是包含有关 3D 模型几何数据的文件。它们也可以包含纹理和动画。

3D 模型有许多不同的文件格式。最常见的是：

• .obj：一种简单的文件格式，仅包含 3D 模型的几何数据。
• .fbx：一种二进制文件格式，包含 3D 模型的几何数据、纹理和动画。它是 Unity 和 Unreal Engine 使用的格式。
• .gltf：一种JSON 文件格式，包含 3D 模型的几何数据、纹理和动画。它是 推荐在网络上使用的格式，因其是非常紧凑的格式。
• .glb：.gltf 格式的二进制版本。它是更紧凑的格式，通常比 .gltf 格式小 33%。

在本课程中，我们将使用 .gltf 和 .glb 格式。

使用 Blender 可以很容易地将 3D 模型从一种格式转换为另一种。

查找 3D 模型

以下是一些可以找到免费 3D 模型的网站：

• Poly Pizza: 收集了免版税的低多边形 3D 模型
• Sketchfab: 一个分享和下载 3D 模型的平台。提供许多免费模型！
• Unity Asset Store: 最初用于 Unity，但你可以找到许多可以在项目中使用的 3D 模型包。
• Quaternius: 一位在他的网站上分享免费 3D 模型包的 3D 艺术家。
• Kenney: 另一位很棒的创作者，分享了许多高质量的免费 3D 模型包。

在所有情况下，请确保查看你想使用的3D 模型的许可。其中一些仅供个人使用免费，一些是商业用途免费，一些则完全不免费。有些还具有自定义许可，以防止 3D 模型用于某些特定用途，如 NFT。

现在我们有了 3D 模型，让我们看看如何将它们加载到我们的项目中。

项目结构

public 文件夹是我们项目的根文件夹。这是我们放置项目的静态资源（图像、3D 模型、音频文件等）的地方。

为了保持项目的组织性，我们将在 public 文件夹中创建一个 models 文件夹来存储所有的 3D 模型。

启动包已经包含一个带有一些 3D 模型的 models 文件夹。它们来自 Quaternius。

useLoader

在 React Three Fiber 中加载任何外部资源的基本组件是 useLoader 钩子。它是一个钩子，第一个参数是 loader，第二个参数是 url。它返回加载的资源。

loader 是一个扩展自 threejs 中的 Loader 类的类。在 threejs 中有许多可用的加载器用于加载不同类型的资源。例如，GLTFLoader 用于加载 .gltf 和 .glb 文件。

让我们加载第一个 3D 模型：

Copy
import { useLoader } from "@react-three/fiber";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";

export const Experience = () => {
  const model = useLoader(GLTFLoader, "models/Fish.gltf");

  return (
    <>
      <primitive object={model.scene} />
    </>
  );
};

primitive 组件用于在场景中显示 threejs 对象。它接受一个 object 属性，即我们想要显示的 threejs 对象。

我们的 3D 模型现在已经加载并在场景中显示。 (看起来不错吧？)

useLoader 负责缓存已加载的资源。因此，如果多次加载相同的资源，它将只加载一次。

useGLTF / useFBX

Drei 库提供了两个加载3D模型的钩子：useGLTF 和 useFBX。它们是 useLoader 钩子的封装，并且更易使用。

让我们更新现有代码以使用 useGLTF 钩子：