React Three Fiber动画入门

使用静态对象和形状构建 3D 场景非常酷，但是当你可以使用动画使场景栩栩如生时，它会更酷。

在 3D 世界中，有一个称为角色装配的过程，它允许你创建称为骨架的特殊对象，其作用类似于骨骼和关节系统。 这些骨架连接到一块 3D 几何体上，例如人、动物或其他任何物体，并允许你弯曲和移动关节以使连接的几何体变形。 你可以使用此过程通过在骨架的不同姿势之间创建关键帧来创建动画。

在这里插入图片描述

推荐：用 NSDT场景设计器 快速搭建3D场景。

本教程不会教你如何创建这些装配角色之一，但会教你如何使用已在 React Three Fiber 中创建的角色。

本教程由三个主要部分组成。 从 Mixamo 服务获取一个预装配的 3D 模型和一组动画，准备该模型以用于 Blender 中的 WebGL，然后在 React Three Fiber 中使用该模型。 为什么我们要费心去学习 React 教程的前两部分？ 好吧，如果你想重复这个过程来准备一些其他的绑定动画，你就可以做到。 让我们开始吧。

1、寻找免费角色和动画

首先让我们找到一个角色和一组要使用的动画。 为此，我们可以使用 Mixamo，这是一个由 Adobe 提供的免费角色模型和动画库。 如果没有帐户，则需要先创建一个。

第 1 步登录 Mixamo（或创建一个免费帐户）

第 2 步查找要下载的角色。 如果想使用与教程相同的角色，请使用 Michelle 角色。
在这里插入图片描述

第 3 步 下载 Capoeira 动画包。 如果需要，你可以选择另一个动画包，但使用相同的动画包可以更轻松地学习本教程。 这是因为动画的名称会有所不同，并可能导致与教程出现一些重大差异。
在这里插入图片描述

第 4 步将压缩的资源文件下载为 FBX。 下载时你可以使用所有默认选项。
在这里插入图片描述

第 5 步将下载的 .zip 文件的内容解压缩到您稍后可以找到的某个文件夹中。

2、安装Blender

你需要 Blender 将 Mixamo Rig 转换为适合 WebGL 的 GLTF 文件。 可以在此处下载最新版本。

3、在 Blender 中导入角色模型

在启动并运行 Blender 之后，就可以导入模型了。

第 1 步从 Blender 欢迎菜单打开一个新项目。 你可以只选择“常规”项目模板。
在这里插入图片描述

第 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 场景中，但仍需要将其链接到模型。 在继续之前，请确保 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 的更节省空间的文件格式，但一旦导出，你就无法再轻松打开和检查文件的内容。

在这里插入图片描述

将文件命名为什么并不重要，但我将在我们要导出的动画名称之后将其命名为 armada.gltf。 你将在本教程的其余部分看到引用此名称。
在这里插入图片描述

7、生成 React Component Wrapper

当我们在 React 中使用导出的 gltf 文件时，我们需要访问导出场景的某些部分，例如我们需要提取几何体、骨架和动画。

你可以通过不手动操作来节省大量时间，而是使用由 react-three-fiber 团队创建的名为 GLFTJSX 的有用工具。 这是一个命令行工具，你可以将 gltf 或 glb 文件作为输入运行，它将创建一个结构良好的 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、创建React-three-fiber场景

我们已经创建了使用动画角色所需的资产。 现在让我们进入 React。

步骤 1 创建一个新的 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 步创建一个空的 React Three Fiber 场景。 用以下代码替换 App.js 文件的内容。 这将创建一个带有 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 创建的 Armada.js 文件了。

步骤 1 将 Armada.js 文件导入到 App.js 文件中。

第 2 步从“react”中导入 Suspense，并从我们之前创建的 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 导入的错误，可能是因为导入路径在最新版本中发生了变化。 看起来像这样的导入将不再有效：

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

如果一切正常，你应该会看到你的角色开始执行踢球动画！

原文链接：React Three Fiber动画 — BimAnt

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/4936.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

2023-03-24：音视频mp3和h264混合（muxer）编码为mp4，用go语言编写。

2023-03-24：音视频mp3和h264混合（muxer）编码为mp4，用go语言编写。

2023-03-24&#xff1a;音视频mp3和h264混合&#xff08;muxer&#xff09;编码为mp4&#xff0c;用go语言编写。 答案2023-03-24&#xff1a; 这是一个使用FFmpeg库将MP3和H.264混合编码为MP4的Go语言程序。程序的大体过程如下&#xff1a; 1.设置FFmpeg库路径和环境变量。…
阅读更多...
ChatGPT来了，让我们快速做个AI应用

ChatGPT来了，让我们快速做个AI应用

你好&#xff0c;我是徐文浩。 过去的两讲&#xff0c;我带着你通过OpenAI提供的Embedding接口&#xff0c;完成了文本分类的功能。那么&#xff0c;这一讲里&#xff0c;我们重新回到Completion接口。而且这一讲里&#xff0c;我们还会快速搭建出一个有界面的聊天机器人来给你…
阅读更多...
五分钟了解支付、交易、清算、银行等专业名词的含义？

五分钟了解支付、交易、清算、银行等专业名词的含义？

五分钟了解支付、交易、清算、银行等专业名词的含义&#xff1f;1. 支付类名词01 支付应用02 支付场景03 交易类型04 支付类型&#xff08;按通道类型&#xff09;05 支付类型&#xff08;按业务双方类型&#xff09;06 支付方式07 支付产品08 收银台类型09 支付通道10 通道类型…
阅读更多...
Unity Avatar Cover System - 如何实现一个Avatar角色的智能掩体系统

Unity Avatar Cover System - 如何实现一个Avatar角色的智能掩体系统

文章目录简介变量说明实现动画准备动画状态机State 状态NoneStand To CoverIs CoveringCover To Stand高度适配高度检测脚部IK简介 本文介绍如何在Unity中实现一个Avatar角色的智能掩体系统&#xff0c;效果如图所示&#xff1a; 初版1.0.0代码已上传至SKFramework框架Package…
阅读更多...
【Nginx】Nginx的学习（3.Nginx命令和nginx配置文件）

【Nginx】Nginx的学习（3.Nginx命令和nginx配置文件）

1. Nginx命令 1.1 启动nginx systemctl start nginx1.2 停止nginx systemctl stop nginx1.3 重载nginx # 重新加载配置文件 systemctl reload nginx1.4 查看nginx服务端口 netstat -anpl | grep nginx1.5 查看nginx进程 ps aux | grep nginx2. nginx的配置文件 2.1 查看…
阅读更多...
git拉取github上的项目

git拉取github上的项目

git拉取github上的项目测试创建bash公钥&#xff0c;拉取代码1.先创建github账号和项目&#xff1b;系统安装git程序2.先配置ssh公钥,为了避免每次远程访问需要输密码&#xff0c;将使用ssh登陆。ssh应该与本机信息绑定&#xff0c;查看自己电脑 C:\Users\lenovo\.ssh 目录下是…
阅读更多...
预训练语言模型（GPT，BERT）

预训练语言模型（GPT，BERT）

文章目录GPT 模型预训练语言模型模型和学习BERT 模型去噪自编码器模型和学习模型特点References在自然语言处理中事先使用大规模语料学习基于 Transformer 等的语言模型&#xff0c;之后用于各种任务的学习和预测&#xff0c;称这种模型为预训练语言模型。代表性的模型有 BERT …
阅读更多...
STA环境 - 时钟

STA环境 - 时钟

目录1. 指定时钟create_clock1.1. 时钟延迟set_clock_latency 1.2. 时钟不确定度&#xff08;时钟抖动&#xff09;set_clock_uncertainty 1.3. 时钟过渡时间set_clock_transition 2. 衍生时钟create_generated_clock3. 划定时钟域set_clock_groupsSTA环境配置中对时钟如何约束…
阅读更多...
【总结】爬虫4-selenium

【总结】爬虫4-selenium

爬虫4-selenium 1. selenium 基本操作 在使用selenium之前必须先配置浏览器对应版本的webdriver。才可以控制浏览器打开网页 1.1 创建浏览器对象 b Chrome()1.2 打开网页 &#xff08;需要哪个网页数据&#xff0c;就打开那个网页对应的网页地址&#xff09; b.get(https…
阅读更多...
git 001--建本地仓库和远程仓库和拉代码

git 001--建本地仓库和远程仓库和拉代码

要使用Git对我们的代码进行管理&#xff0c;首先需要获得Git仓库。 获取Git仓库通常有两种方式&#xff1a; 在本地初始化Git仓库&#xff08;不常用&#xff09; 从远程仓库克隆&#xff08;常用&#xff09; 一.建本地仓库 方法一: 在自己电脑的任意目录下创建一个空目录…
阅读更多...
字节测试总监，让我们用这份《测试用例规范》，再也没加班过

字节测试总监，让我们用这份《测试用例规范》，再也没加班过

经常看到无论是刚入职场的新人&#xff0c;还是工作了一段时间的老人&#xff0c;都会对编写测试用例感到困扰&#xff1f;例如&#xff1a; 固然&#xff0c;编写一份好的测试用例需要&#xff1a;充分的需求分析能力 理论及经验加持&#xff0c;作为测试职场摸爬打滚的老人&…
阅读更多...
为什么企业需要一个“企业办公浏览器”？

为什么企业需要一个“企业办公浏览器”？

目前&#xff0c;大多数企业还在用着传统的Web浏览器&#xff0c;它是各行业企业办公最常用到的应用程序&#xff0c;搜索资料、打开其他应用工具、打开文档等等&#xff0c;企业员工几乎每天都在用它做这些工作。 但实际上&#xff0c;Web浏览器并不是一个企业专用的办公应用软…
阅读更多...
炒黄金所需的k线图基础知识（上）

炒黄金所需的k线图基础知识（上）

炒金&#xff0c;一般是指对杠杠式的黄金电子合约&#xff08;如伦敦金、黄金期货&#xff09;进行短线的多空操作&#xff0c;从中赚取波动价差的行为。无论投资者从事内盘还是外盘交易&#xff0c;K线图都是基础的、必备的知识。 1、什么叫K线图&#xff1f; K线图源于日本的…
阅读更多...
计算机网络名词解释和简答题总结

计算机网络名词解释和简答题总结

名词解释 CSMA/CD&#xff08;载波监听多点接入/碰撞检测协议&#xff09; CSMA/CD是一种基于冲突检测的载波监听多路访问技术。CSMA/CD协议要求站点在发送数据之前先监听信道。如果信道空闲&#xff0c;站点就可以发送数据&#xff1b;如果信道忙&#xff0c;则站点不能发送…
阅读更多...
使用CookieJar提取cookie信息

使用CookieJar提取cookie信息

首先&#xff0c;推荐几个帖子&#xff0c;大伙可以先看看。国内通过cookiejar主要获取cookie的方法&#xff0c;大致都是如此的。 http.cookiejar库之CookieJar_pigYanYan的博客-CSDN博客 Python编程&#xff1a;cookiejar的使用_彭世瑜的博客-CSDN博客 再推荐一个资料帖&a…
阅读更多...
Linux权限

Linux权限

Linux下有两种用户&#xff1a;超级用户(root)、普通用户。超级用户(root):可以在linux系统下做任何事&#xff0c;不受限制&#xff0c;只有1个。普通用户:在linux系统下做有限的事,有N个。超级用户的提示符#&#xff1b;普通用户的提示符$切换用户的命令:su切换root时可以直接…
阅读更多...
MQ之kafka

MQ之kafka

一 概念 Kafka是最初由Linkedin公司开发&#xff0c;是一个分布式、支持分区的&#xff08;partition&#xff09;、多副本的&#xff08;replica&#xff09;&#xff0c;基于zookeeper协调的分布式消息系统&#xff0c;它的最大的特性就是可以实时的处理大量数据以满足各种需…
阅读更多...
Visual Studio Code2023（VSCode2023）安装包下载及安装教程（最新版接入了chat GPT）

Visual Studio Code2023（VSCode2023）安装包下载及安装教程（最新版接入了chat GPT）

[软件名称]: Visual Studio Code2023 [软件大小]: 88.6 MB [安装环境]: Win11/Win10/Win7 [软件安装包下载]:https://pan.quark.cn/s/ee94a4aa2abc Visual Studio Code简称“VS Code”是Microsoft在2015年4月30日Build开发者大会上正式宣布一个运行于 Mac OS X、Windows和 Lin…
阅读更多...
【Datawhale动手学深度学习笔记】多层感知机代码实践

【Datawhale动手学深度学习笔记】多层感知机代码实践

多层感知机 激活函数 激活函数&#xff08;activation function&#xff09;通过计算加权和并加上偏置来确定神经元是否应该被激活&#xff0c; 它们将输入信号转换为输出的可微运算。 大多数激活函数都是非线性的。 由于激活函数是深度学习的基础&#xff0c;下面简要介绍一…
阅读更多...
多线程进阶学习09------ThreadLocal详解

多线程进阶学习09------ThreadLocal详解

ThreadLocal&#xff1a;提供线程的局部变量&#xff0c;对于线程共享变量如果使用ThreadLocal则无需加锁&#xff0c;更省事省心。 ThreadLocal本地线程变量,线程自带的变量副本(实现了每一个线程副本都有一个专属的本地变量,主要解决的就是让每一个线程绑定自己的值,自己用自…
阅读更多...
最新文章

Copyright @ 2022~2023