Three.JS编程中如何切换gltf模型动画？
在Threejs编程中，处理GLTF模型动画的切换主要涉及对模型中的动画剪辑（AnimationClip）进行管理和播放控制。下面的代码，展示如何在Three.js中切换GLTF模型的动画。
步骤 1: 加载GLTF模型
首先，你需要使用GLTFLoader来加载包含动画的GLTF模型。
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';const loader = new GLTFLoader();
loader.load('path/to/your/model.gltf',function ( gltf ) {scene.add( gltf.scene );// 假设gltf.animations是一个包含所有动画剪辑的数组const mixer = new THREE.AnimationMixer( gltf.scene );// 你可以存储这些剪辑以供后续使用let clips = gltf.animations;// 假设你想播放第一个动画let action = mixer.clipAction( clips[0] );action.play();},// 可选: 加载中function ( xhr ) {console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );},// 可选: 加载出错function ( error ) {console.error( 'An error happened', error );}
);步骤 2: 切换动画
要切换动画，可以停止当前正在播放的动画，并启动一个新的动画剪辑。
function switchToAnimation(clipIndex) {if (mixer.hasAction(action)) {// 停止当前动画action.stop();}// 获取新的动画剪辑并播放action = mixer.clipAction(clips[clipIndex]);action.play();
}
// 切换到第二个动画
switchToAnimation(1);步骤 3: 管理动画混合器
确保动画混合器（AnimationMixer）在渲染循环中被更新，以便动画能够正常播放。
function animate() {requestAnimationFrame( animate );// 更新动画混合器if (mixer) {mixer.update(clock.getDelta());}// 渲染场景和相机renderer.render(scene, camera);
}
animate();注意事项
确保在尝试播放动画之前，动画剪辑已经加载完毕。
如果需要循环播放动画，可以在clipAction的play方法中设置参数，例如：
action.play().loop(THREE.LoopRepeat, 3);
表示重复播放3次。
通过这些步骤，就能够在Three.js中实现加载、播放和切换GLTF模型的动画。
此外，threejs开发的项目，是JS编程、运行于浏览器，他人只需在浏览器中右键查看网页源码，便可得获得源码，进而可以分析功能逻辑、可以复制、运行调试、了解功能原理。为了防止代码被任意分析、复制、盗用。threejs开发的功能在发布前通常需要先用JShaman、JS-Obfuscator、JsJiaMi.Online等工具进行JS代码混淆加密，以解决JS代码公开透明特性带来的不安全问题。
原文地址：Three.JS编程中如何切换gltf模型动画？