到目前为止我们已经学到了很多知识，现在是时候将它们结合在一起了。在本课中，我们将创建一个外观精美且响应迅速的作品集！

别担心，在此过程中我们还将学习新东西 😊

我们将构建什么

桌面版：

手机版：

不要局限于构建完全相同的东西。随意添加您自己的创意。

希望你充满期待！让我们开始吧！🚀

启动包

为了专注于要点，这个最终项目的启动包包含了我们将使用的所有 3D 模型、动画、字体和纹理。（除了头像，我们稍后会讲到）

每个模型的 React 组件都是用 gltfjsx 生成的。

我只在注释中添加了一行来注明作者并跟踪每个模型的来源：

Copy
/*
Auto-generated by: https://github.com/pmndrs/gltfjsx
Command: npx gltfjsx@6.2.3 public/models/Balloon.glb -o src/components/Balloon.jsx -r public
Balloon by Poly by Google [CC-BY] (https://creativecommons.org/licenses/by/3.0/) via Poly Pizza (https://poly.pizza/m/d1gDDhM7pTf)
*/

目前，如果我们运行应用程序，启动包看起来是这样的：

一个白色的立方体和一个非常浅的灰色背景。

让我们不再浪费时间，开始构建我们的作品集吧！

3D Avatar

我们将使用 Ready Player Me 来创建我们的头像。这是一个免费的服务，允许开发者将头像添加到他们的应用程序中。

访问 Ready Player Me，创建一个账户或者登录（如果你已有账户），然后创建你的头像。

你可以使用照片作为参考，或者从头开始创建一个新的头像。

编辑器提供了多种选项，可以让你的头像看起来和你很像。

当你对你的头像感到满意时，点击右上角的 Enter Hub 按钮。

在 Hub 中，点击 Customize look 按钮左侧的 下载图标。

然后点击 Download Avatar as .glb file。

你会得到一个以你的头像ID开头，以.glb结尾的文件。

例如，我的文件是 646d9dcdc8a5f5bddbfac913.glb

将此文件复制到项目的 public/models 文件夹中。

然后在终端中运行以下命令：

Copy
npx gltfjsx public/models/646d9dcdc8a5f5bddbfac913.glb -o src/components/Avatar.jsx -k -r public

将 646d9dcdc8a5f5bddbfac913.glb 替换为你的头像文件名。

我们使用的参数快速回顾：

• -o 指定输出文件
• -k 保留节点的名称
• -r 指定模型的根路径

在 src/components/Avatar.jsx 文件中，将组件重命名为 Avatar：

Copy
// ...

export function Avatar(props) {
  // ...
}

现在我们可以用我们的 Avatar 组件替换掉 src/Experience.jsx 中的 Cube 组件：

Copy
import { Environment } from "@react-three/drei";
import { Avatar } from "./Avatar";

export const Experience = () => {
  return (
    <>
      <Environment preset="sunset" />
      <Avatar />
    </>
  );
};

现在你应该可以看到你的头像在场景的中央！

一些学生报告说从 gltfjsx 本地 CLI 生成的文件有问题。如果你在显示 Avatar 时遇到任何问题，可以使用 在线版本 来生成 Avatar.jsx 组件。

请确保重命名组件名称，并且模型的路径是正确的。你需要在 useGLTF hook 中以及文件末尾的 preload 函数前添加 /models/ 和模型名称。

对于我的头像，它将是：

Copy
// ...
export function Avatar(props) {
const { nodes, materials } = useGLTF("/models/646d9dcdc8a5f5bddbfac913.glb");
// ...

文件末尾：

Copy
// ...
useGLTF.preload("/models/646d9dcdc8a5f5bddbfac913.glb");

Mixamo 动画

我们将使用 Mixamo 为我们的化身添加动画。得益于 Ready Player Me，我们已经有了一个绑定好的化身，所以这个过程会非常简单。

进入 Mixamo，创建一个账户或登录（如果你已经有账户），然后进入animations。

你应该在左侧看到animations，右侧是预览区。

点击Upload Character按钮，会打开一个模态窗，但它只接受 .fbx、.obj 和 .zip 文件。我们需要将 .glb 文件转换为 .fbx。

我已经在起始包的 public/models 文件夹中提供了一个名为 avatar.fbx 的化身。如果你想使用它，可以跳过下一步。