使用靜態(tài)對(duì)象和形狀構(gòu)建 3D 場(chǎng)景非?？幔钱?dāng)你可以使用動(dòng)畫使場(chǎng)景栩栩如生時(shí)，它會(huì)更酷。

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

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

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

推薦：用 NSDT場(chǎng)景設(shè)計(jì)器 快速搭建3D場(chǎng)景。

1、尋找免費(fèi)角色和動(dòng)畫

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

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

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

第 3 步 下載 Capoeira 動(dòng)畫包。 如果需要，你可以選擇另一個(gè)動(dòng)畫包，但使用相同的動(dòng)畫包可以更輕松地學(xué)習(xí)本教程。 這是因?yàn)閯?dòng)畫的名稱會(huì)有所不同，并可能導(dǎo)致與教程出現(xiàn)一些重大差異。

第 4 步將壓縮的資源文件下載為 FBX。 下載時(shí)你可以使用所有默認(rèn)選項(xiàng)。

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

2、安裝Blender

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

3、在 Blender 中導(dǎo)入角色模型

在啟動(dòng)并運(yùn)行 Blender 之后，就可以導(dǎo)入模型了。

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

第 2 步從默認(rèn)的 Blender 場(chǎng)景中刪除所有內(nèi)容，通過刪除所有對(duì)象使其完全為空。 完成后，右上角的場(chǎng)景樹中應(yīng)該看不到任何東西。

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

第 4 步導(dǎo)航到從 Mixamo 中提取的 zip 文件的內(nèi)容。 它看起來像這樣。

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

第 6 步確保你在導(dǎo)入對(duì)話框中選擇了“自動(dòng)骨骼定向”選項(xiàng)。 你可以在屏幕截圖中看到它的位置。 你現(xiàn)在應(yīng)該可以在 Blender 中看到角色，但具有默認(rèn)的 T-Pose 動(dòng)畫。

4、在 Blender 中導(dǎo)入動(dòng)畫數(shù)據(jù)

動(dòng)畫可以用與模型文件完全相同的方式導(dǎo)入，重復(fù)上一步的過程，但這次選擇名為 armada.fbx 的 FBX 文件。該文件僅包含一個(gè)特定動(dòng)作的動(dòng)畫數(shù)據(jù)。 由于此動(dòng)畫的名稱是 armada，從現(xiàn)在開始我們將經(jīng)常使用該名稱來命名。

5、將動(dòng)畫附加到角色

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

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

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

第 3 步將活動(dòng)動(dòng)作更改為導(dǎo)入的第二個(gè)動(dòng)作，我們將其重命名為 Armada。

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

第 3 步按下 Dope Sheet Action Editor 中的 Stash 按鈕以確保動(dòng)畫保持與模型的關(guān)聯(lián)。 點(diǎn)擊存儲(chǔ)后，動(dòng)畫將與工作對(duì)象的附件一起存儲(chǔ)，以便稍后可以找到它，現(xiàn)在可以導(dǎo)入另一個(gè)模型并重復(fù)到此為止的步驟以附加另一個(gè)動(dòng)畫動(dòng)作。

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

6、將模型導(dǎo)出為 GLTF 文件

現(xiàn)在是時(shí)候從 Blender 導(dǎo)出到我們可以在 react-three-fiber 中使用的 .gltf 文件了。 GLTF 是你要導(dǎo)出到 WebGl 的任何 3d 數(shù)據(jù)的標(biāo)準(zhǔn)文件格式。

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

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

7、生成 React Component Wrapper

當(dāng)我們?cè)?React 中使用導(dǎo)出的 gltf 文件時(shí)，我們需要訪問導(dǎo)出場(chǎng)景的某些部分，例如我們需要提取幾何體、骨架和動(dòng)畫。

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

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

npm i -g gltfjsx

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

gltfjsx armada.gltf

運(yùn)行后你應(yīng)該看到一個(gè)名為 Armada.js 的新文件，記住你保存這個(gè)文件的位置，以便我們稍后可以將它添加到我們的 React 項(xiàng)目中。

這就是為我們的 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 三纖維場(chǎng)景

我們已經(jīng)創(chuàng)建了使用動(dòng)畫角色所需的資產(chǎn)。 現(xiàn)在讓我們進(jìn)入 React。

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

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 組件包裝器復(fù)制到 React 項(xiàng)目中。 Armada.js組件放在src目錄下，armada.gltf文件放在public目錄下。

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

/*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)建一個(gè)空的 React Three Fiber 場(chǎng)景。 用以下代碼替換 App.js 文件的內(nèi)容。 這將創(chuàng)建一個(gè)帶有 OrbitControls 和一些簡(jiǎn)單照明的空?qǐng)鼍啊?/span>

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、將導(dǎo)入的角色添加到 React Three Fiber場(chǎng)景

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

步驟 1 將 Armada.js 文件導(dǎo)入到 App.js 文件中。

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

步驟 3 在 Canvas 組件內(nèi)添加一個(gè) 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>
  );
}

你現(xiàn)在應(yīng)該會(huì)在 Armada 動(dòng)畫的開頭看到該角色，但它還沒有移動(dòng)。 我們將在下一步也是最后一步中解決這個(gè)問題。

10、警告

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

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

相反，確保直接從 drei導(dǎo)入的， 像這樣：

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

11、播放動(dòng)畫

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

第 1 步打開自動(dòng)生成的 Armada.js 組件（來自 gltfjsx）

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

// 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");

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

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