Threejs合并模型动画（上）

你华还是你华

已于 2024-09-15 16:17:56 修改

阅读量451

点赞数 14

分类专栏： ThreeJS Three.js进阶文章标签： webgl threejs 3d web

于 2024-09-15 15:39:03 首次发布

本文链接：https://blog.csdn.net/weixin_44103733/article/details/142281427

版权

本文目录

前言
一、素材准备
二、模型动画合并

前言

我们常常会遇到相同的模型具有不同的动画，那么我们想把不同的动画都给到一个相同的模型，让这个模型具有许多动画，通常这都是3d设计师给到你的，但是如果我们自己也不熟悉3d编辑器，我们又想模型有不同的动画，我们这个时候就可以使用Three.js来完成这样的合并，并且运用动画。接下来本篇文章将介绍。

一、素材准备

1.1 素材展示

在这里将介绍一个免费的模型以及给模型自动生成骨架及动画的网页https://www.mixamo.com/，我们注册登陆这个网站：
在这里插入图片描述
我们会发现左上角有Characters和Animations两个按钮，分别是选择模型以及给模型加上动画，我们这里点击Characters选择一个模型：

接着点击Animations给这个模型添加动画：

请添加图片描述
可以看到这是一个攻击的动作。

1.2 素材下载

接着我们点击DOWNLOAD下载这个模型及动画：
在这里插入图片描述
接着我们再选择一个动画：

请添加图片描述
可以看到是一个原地休息的动作，我们也把这个模型下载下来，这个时候我们就有两个模型了：

1.3 素材转换

将模型一个一个导入到建模软件blender或者其他建模软件中再一个一个导出为glb格式如下：
在这里插入图片描述
这样我们就得到了glb格式的两个模型了：

二、模型动画合并

2.1 GLTF导出器

2.1.1 简介

GLTF导出器(GLTFExporter)：一个专为glTF 2.0设计的导出工具。
glTF (GL Transmission Format) ，即图形传输格式，乃高效流转与载入3D资源的开放标准。资源支持JSON格式（.gltf）及二进制封装（.glb）。纹理数据（.jpg, .png）及附加二进制（.bin）存于外部文件。glTF资产集，场景多元，涵盖网格构建、材质定义、纹理贴图、骨骼绑定、变形效果、动画演绎、光影设置及镜头视角等丰富元素。

2.1.2 构造函数及方法

构造函数：GLTFExporter()：
创建一个新的 GLTFExporter 实例：const exporter = new GLTFExporter();。
方法parse：导出的场景或对象
.parse ( input : Object3D, onCompleted : Function, onError : Function, options : Object ) : undefined

2.2 代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body {
     
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }