使用靜態(tài)對象和形狀構建 3D 場景非?？幔钱斈憧梢允褂脛赢嬍箞鼍拌蜩蛉缟鷷r，它會更酷。

在 3D 世界中，有一個稱為角色裝配的過程，它允許你創(chuàng)建稱為骨架的特殊對象，其作用類似于骨骼和關節(jié)系統。 這些骨架連接到一塊 3D 幾何體上，例如人、動物或其他任何物體，并允許你彎曲和移動關節(jié)以使連接的幾何體變形。 你可以使用此過程通過在骨架的不同姿勢之間創(chuàng)建關鍵幀來創(chuàng)建動畫。

本教程不會教你如何創(chuàng)建這些裝配角色之一，但會教你如何使用已在 React Three Fiber 中創(chuàng)建的角色。

本教程由三個主要部分組成。 從 Mixamo 服務獲取一個預裝配的 3D 模型和一組動畫，準備該模型以用于 Blender 中的 WebGL，然后在 React Three Fiber 中使用該模型。 為什么我們要費心去學習 React 教程的前兩部分？ 好吧，如果你想重復這個過程來準備一些其他的綁定動畫，你就可以做到。 讓我們開始吧。

推薦：用 NSDT場景設計器 快速搭建3D場景。

1、尋找免費角色和動畫

首先讓我們找到一個角色和一組要使用的動畫。 為此，我們可以使用 Mixamo，這是一個由 Adobe 提供的免費角色模型和動畫庫。 如果沒有帳戶，則需要先創(chuàng)建一個。

第 1 步登錄 Mixamo（或創(chuàng)建一個免費帳戶）

第 2 步查找要下載的角色。 如果想使用與教程相同的角色，請使用 Michelle 角色。

第 3 步 下載 Capoeira 動畫包。 如果需要，你可以選擇另一個動畫包，但使用相同的動畫包可以更輕松地學習本教程。 這是因為動畫的名稱會有所不同，并可能導致與教程出現一些重大差異。

第 4 步將壓縮的資源文件下載為 FBX。 下載時你可以使用所有默認選項。

第 5 步將下載的 .zip 文件的內容解壓縮到您稍后可以找到的某個文件夾中。

2、安裝Blender

你需要 Blender 將 Mixamo Rig 轉換為適合 WebGL 的 GLTF 文件。 可以在此處下載最新版本。

3、在 Blender 中導入角色模型

在啟動并運行 Blender 之后，就可以導入模型了。

第 1 步從 Blender 歡迎菜單打開一個新項目。 你可以只選擇“常規(guī)”項目模板。

第 2 步從默認的 Blender 場景中刪除所有內容，通過刪除所有對象使其完全為空。 完成后，右上角的場景樹中應該看不到任何東西。

第 3 步在 Blender 的文件菜單下找到導入菜單，然后選擇 FBX (.fbx)。

第 4 步導航到從 Mixamo 中提取的 zip 文件的內容。 它看起來像這樣。

Step 5 找到文件大小最大的fbx文件，這個文件包含人物幾何體和默認的T-POSE。 如果你使用 Michelle 角色，則此文件的名稱應為 Ch03_nonPBR.fbx。其他文件將包含 Mixamo 包中的所有不同動畫。 我們稍后會回來導入這些。

第 6 步確保你在導入對話框中選擇了“自動骨骼定向”選項。 你可以在屏幕截圖中看到它的位置。 你現在應該可以在 Blender 中看到角色，但具有默認的 T-Pose 動畫。

4、在 Blender 中導入動畫數據

動畫可以用與模型文件完全相同的方式導入，重復上一步的過程，但這次選擇名為 armada.fbx 的 FBX 文件。該文件僅包含一個特定動作的動畫數據。 由于此動畫的名稱是 armada，從現在開始我們將經常使用該名稱來命名。

5、將動畫附加到角色

現在動畫已導入并存在于你的 Blender 場景中，但仍需要將其鏈接到模型。 在繼續(xù)之前，請確保 3D 場景的內容看起來像這樣。 它應該有兩個骨骼。 一個帶有 T 型姿勢的模型稱為 Armature，另一個帶有動畫但沒有附加模型稱為 Armature.001。 請注意，我將 Armature.001 下的動畫名稱從默認名稱重命名為 Armada，這只是為了方便以后查找。 默認名稱將是一些大而長的隨機名稱，我建議也更改它。

第 1 步在視口中選擇第一個骨架（帶有模型的骨架）后，通過選擇視口頂部的動畫選項卡切換到 Blender 中的動畫布局。 你的視圖應該更改為如下面的屏幕截圖所示。

第 2 步切換到攝影表面板（底部）中的動作編輯器視圖。

第 3 步將活動動作更改為導入的第二個動作，我們將其重命名為 Armada。

如果這有效，你應該會看到角色立即將其姿勢更改為踢球動畫的開始。 要嘗試它，請點擊攝影表上的播放按鈕以查看動畫播放。 如果由于某種原因它不起作用，你可能需要使用新的 Blender 重新開始并重新導入你的 .fbx 文件。 確保選中了“自動骨骼定向”選項。

第 3 步按下 Dope Sheet Action Editor 中的 Stash 按鈕以確保動畫保持與模型的關聯。 點擊存儲后，動畫將與工作對象的附件一起存儲，以便稍后可以找到它，現在可以導入另一個模型并重復到此為止的步驟以附加另一個動畫動作。

第 4 步 最后刪除第二個骨架，即只有動畫的那個。 不是上面有模型的那個。 這只是為了在導出前清理場景，因此導出文件中沒有多余的對象。 擁有這些有時會使 GLFTJSX 感到困惑，所以這是一件好事。

6、將模型導出為 GLTF 文件

現在是時候從 Blender 導出到我們可以在 react-three-fiber 中使用的 .gltf 文件了。 GLTF 是你要導出到 WebGl 的任何 3d 數據的標準文件格式。

步驟 1 導出為 .gltf 文件。 .gltf 格式在導出后將保持人類可讀性。 如果你想查看導出文件的結構，這有時會很有幫助。 你也可以導出為 .glb，它代表 GLTF 二進制文件。 它是一種用于表示 GLTF 的更節(jié)省空間的文件格式，但一旦導出，你就無法再輕松打開和檢查文件的內容。

將文件命名為什么并不重要，但我將在我們要導出的動畫名稱之后將其命名為 armada.gltf。 你將在本教程的其余部分看到引用此名稱。

7、生成 React Component Wrapper

當我們在 React 中使用導出的 gltf 文件時，我們需要訪問導出場景的某些部分，例如我們需要提取幾何體、骨架和動畫。

你可以通過不手動操作來節(jié)省大量時間，而是使用由 react-three-fiber 團隊創(chuàng)建的名為 GLFTJSX 的有用工具。 這是一個命令行工具，你可以將 gltf 或 glb 文件作為輸入運行，它將創(chuàng)建一個結構良好的 React 組件包裝器作為輸出。

第 1 步 使用 npm 全局安裝 GLTFJSX，以便您可以在命令行上使用它。

npm i -g gltfjsx

第 2 步以 armada.gltf 文件作為輸入運行 GLTFJSX。 確保在與 .gltf 文件相同的目錄中運行該命令。

gltfjsx armada.gltf

運行后你應該看到一個名為 Armada.js 的新文件，記住你保存這個文件的位置，以便我們稍后可以將它添加到我們的 React 項目中。

這就是為我們的 armada.gltf 文件生成的組件的樣子。

/*
Auto-generated by: https://github.com/pmndrs/gltfjsx
*/

import * as THREE from "three";
import React, { useRef, useState } from "react";
import { useGLTF } from "@react-three/drei";

import { useAnimations } from "@react-three/drei";

export default function Model(props) {
  const group = useRef();
  const { nodes, materials, animations } = useGLTF("/armada.gltf");
  const { actions } = useAnimations(animations, group);

  return (
    <group ref={group} {...props} dispose={null}>
      <group rotation={[Math.PI / 2, 0, 0]} scale={[0.01, 0.01, 0.01]}>
        <primitive object={nodes.mixamorigHips} />
        <skinnedMesh
          material={materials.Ch03_Body}
          geometry={nodes.Ch03.geometry}
          skeleton={nodes.Ch03.skeleton}
        />
      </group>
    </group>
  );
}

useGLTF.preload("/armada.gltf");

8、創(chuàng)建React 三纖維場景

我們已經創(chuàng)建了使用動畫角色所需的資產。 現在讓我們進入 React。

步驟 1 創(chuàng)建一個新的 React 應用程序

npx create-react-app armada

步驟2 添加Three.js、React Three Fiber、drei依賴

yarn add three react-three-fiber @react-three/drei

第 3 步將 .gltf 文件和 Armada.js 組件包裝器復制到 React 項目中。 Armada.js組件放在src目錄下，armada.gltf文件放在public目錄下。

第 4 步將 index.css 替換為以下內容，使 React Three Fiber 畫布填充整個視口。

/*index.css*/
* {
  box-sizing: border-box;
}

html,
body,
#root {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: #000000;
  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica
      neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif;
}

第 5 步創(chuàng)建一個空的 React Three Fiber 場景。 用以下代碼替換 App.js 文件的內容。 這將創(chuàng)建一個帶有 OrbitControls 和一些簡單照明的空場景。

import React from "react";
import { Canvas } from "react-three-fiber";

import { OrbitControls } from "@react-three/drei";
import "./index.css";

export default function App() {
  return (
    <Canvas>
      <OrbitControls />
      <ambientLight intensity={0.6} />
      <directionalLight intensity={0.5} />
    </Canvas>
  );
}

9、將導入的角色添加到 React Three Fiber場景

現在是時候使用我們用 GLTFJSX 創(chuàng)建的 Armada.js 文件了。

步驟 1 將 Armada.js 文件導入到 App.js 文件中。

第 2 步從“react”中導入 Suspense，并從我們之前創(chuàng)建的 Armada 組件中導入 Armada。

步驟 3 在 Canvas 組件內添加一個 Suspense 組件。

步驟 4 在 Suspense 組件中添加 Armada 組件。

import React, { Suspense } from "react"; //highlight-line
import { Canvas } from "react-three-fiber";
import Armada from "./Armada.js";

import { OrbitControls } from "@react-three/drei";
import "./index.css";

export default function App() {
  return (
    <Canvas>
      <OrbitControls />
      <ambientLight intensity={0.6} />
      <directionalLight intensity={0.5} />
      // highlight-start
      <Suspense fallback={null}>
        <Armada />
      </Suspense>
      // highlight-end
    </Canvas>
  );
}

你現在應該會在 Armada 動畫的開頭看到該角色，但它還沒有移動。 我們將在下一步也是最后一步中解決這個問題。

10、警告

如果你看到有關無法從 drei 導入的錯誤，可能是因為導入路徑在最新版本中發(fā)生了變化。 看起來像這樣的導入將不再有效：

import { useAnimations } from "@react-three/drei/useAnimations";

相反，確保直接從 drei導入的， 像這樣：

import { useAnimations } from "@react-three/drei";

11、播放動畫

播放動畫很容易！ 你需要做的就是對 Armada.js 文件進行小的更改。 是的，從 GLTFJSX 自動生成。 動畫將作為組件提供的 javascript 對象提供給您。

第 1 步打開自動生成的 Armada.js 組件（來自 gltfjsx）

第 2 步 在 useEffect 掛鉤中調用要播放的動畫的 play 方法。 動畫的名稱將來自 Blender 中動作的名稱！ 這就是為什么在導出之前重命名它如此重要。 如果你不記得要播放的動畫的名稱，總是可以先在掛鉤中控制臺記錄操作對象。

// Armada.js
/*
Auto-generated by: https://github.com/pmndrs/gltfjsx
*/

import React, { useRef, useEffect } from "react";
import { useGLTF } from "@react-three/drei";
//highlight-start
import { useAnimations } from "@react-three/drei";
//highlight-end
export default function Model(props) {
  const group = useRef();
  const { nodes, materials, animations } = useGLTF("/armada.gltf");

  const { actions } = useAnimations(animations, group);
  //highlight-start
  useEffect(() => {
    actions.Armada.play();
  });
  //highlight-end
  return (
    <group ref={group} {...props} dispose={null}>
      <group rotation={[Math.PI / 2, 0, 0]} scale={[0.01, 0.01, 0.01]}>
        <primitive object={nodes.mixamorigHips} />
        <skinnedMesh
          material={materials.Ch03_Body}
          geometry={nodes.Ch03.geometry}
          skeleton={nodes.Ch03.skeleton}
        />
      </group>
    </group>
  );
}

useGLTF.preload("/armada.gltf");

如果一切正常，你應該會看到你的角色開始執(zhí)行踢球動畫！

原文鏈接：
http://www.bimant.com/blog/react-three-fiber-anim/