Threejs合并模型动画（中）

你华还是你华

已于 2024-09-15 16:43:13 修改

阅读量846

点赞数 13

分类专栏： Three.js进阶 ThreeJS 文章标签：数码相机 3d webgl threejs 前端

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

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

版权

本文目录

前言
最终效果展示
一、AnimationMixer
二、加载模型

前言

在Threejs合并模型动画（上）
这篇博客中我们把两个相同的模型不同的动画整合到了一个模型上，那么这篇将围绕整合的模型进行动画的展示。

最终效果展示

请添加图片描述

请添加图片描述
我们的模型有两种动画了。

一、AnimationMixer

1.1 简介

AnimationMixer动画混合器。动画融合引擎专为场景中特定实体的动态展示而设计。在复杂场景中，当多个独立实体各自演绎独特动画时，每一实体均能共享同一高效动画融合引擎。

1.2 构造器

AnimationMixer( rootObject : Object3D )
rootObject - 混合器播放的动画所属的对象。

1.3 常用方法

.clipAction (clip : 需要播放的动画元素, optionalRoot : Object3D) : AnimationAction：
返回所传入的剪辑参数的AnimationAction, 根对象参数可选，默认值为混合器的默认根对象。第一个参数可以是动画剪辑(AnimationClip)对象或者动画剪辑的名称。
.update (deltaTimeInSeconds : Number) : this：
推进混合器时间并更新动画，通常在渲染循环中完成

更多常用方法请查看这里。

二、加载模型

2.1 代码

我们将之前导出的模型，导入我们新的场景，代码如下：

<!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%;
        }
    </style>
</head>

<body>
    <script type="module