Threejs合并模型动画（下）

news2024/11/15 19:30:05

本文目录

前言
最终效果展示
一、AnimationAction
- 1.1 简要介绍
- 1.2 常用方法
二、代码
三、效果

前言

我们在Threejs合并模型动画（上）以及Threejs合并模型动画（中）展示了同个模型不同动画的合并与展示，但是我们发现如果我们只是通过代码去改变模型的动画的话那肯定没意思，我们希望是由用户交互去改变模型的动画，本篇将在这两篇的基础去做这样的改变，并给模型加上阴影。

最终效果展示

请添加图片描述
可以看到模型动画完全由我们用户交互进行控制了。

一、AnimationAction

1.1 简要介绍

AnimationActions 用来调度存储在AnimationClips中的动画。
说明: AnimationAction的大多数方法都可以链式调用。

1.2 常用方法

.fadeIn ( durationInSeconds : Number ) : this
在传入的时间间隔内，逐渐将此动作的权重（weight）由0升到1。此方法可链式调用。
.fadeOut ( durationInSeconds : Number ) : this
在传入的时间间隔内，逐渐将此动作的权重（weight）由1降至0。此方法可链式调用。
.reset () : this
重置动作。此方法可链式调用。
该方法会将暂停值 paused 设为false, 启用值enabled 设为true，时间值 time设为0, 中断任何预定的淡入淡出和变形, 以及移除内部循环次数以及延迟启动。
说明: 停止方法stop内调用了重置方法（reset）, 但是 .reset不会调用 .stop。这就表示: 如果你想要这两者, 重置并且停止, 不要调用reset; 而应该调用stop。

二、代码

代码大部分起到的作用已加到代码注释中，代码如下：

<!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">
        // 倒入轨道控制器
        import {
      OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
        import * as THREE from 'three';
        import {
      GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
        import