AnimationUtils.subclip()

介绍

AnimationUtils.subclip 是 three.js 中的一个静态方法，用于在关键帧动画中创建子片段。此方法返回一个新的关键帧动画，该动画只包含原始动画中指定起始帧和结束帧之间的数据。

语法

AnimationUtils.subclip(clip, name, startFrame, endFrame, fps)

参数

• clip: 关键帧动画。类型：AnimationClip。
• name: 子片段的名称。类型：String。
• startFrame: 子片段的起始帧。类型：Number。
• endFrame: 子片段的结束帧。类型：Number。
• fps: 动画的帧率。类型：Number。

返回值

一个新的 AnimationClip 对象，它包含从指定起始帧到结束帧之间的数据。

示例

以下示例演示如何使用 AnimationUtils.subclip 方法创建一个名为 subclip 的子片段动画，并将其添加到场景中：

// 导入必要的模块
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { AnimationUtils } from 'three';

// 创建 Three.js 场景
const scene = new THREE.Scene();

// 创建 Three.js 相机
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.z = 5;

// 创建 Three.js 渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

// 加载 glTF 模型并获取动画数据
const loader = new GLTFLoader();
loader.load('path/to/model.gltf', function (gltf) {

    const animations = gltf.animations;
    const clip = animations[0];

    // 创建子片段动画
    const subclip = AnimationUtils.subclip(clip, 'mySubclip', 0, 50, 30);

    // 将子片段动画添加到场景中
    const mixer = new THREE.AnimationMixer(gltf.scene);
    const action = mixer.clipAction(subclip);
    action.play();

    scene.add(gltf.scene);

});

// 渲染场景
function animate() {
	renderer.render( scene, camera );
	requestAnimationFrame( animate );
}
animate();

在上面的示例中，AnimationUtils.subclip 方法从加载的 glTF 模型中获取第一个动画剪辑，并使用该方法创建名为 mySubclip 的子片段动画。子片段动画从开始帧（0）到结束帧（50）之间，以 30 帧每秒的帧率播放。最后，子片段动画被添加到场景中并通过 AnimationMixer 混合器播放。

参考

• AnimationUtils - three.js docs
• AnimationClip - three.js docs