Threejs里执行对象的多个动画-编程知识

Threejs里执行对象的多个动画

承接上文，本文讲述如何在Threejs里播放对象的多个动画，这也是研究了很久才解决的…

一导出模型

在Blender里按照File->Export，选择glTF2.0

然后在弹框的右上角选择导出为glTF Embedded (.gltf)

这样就把模型导出来了，该模型里包含了2个动画。

二 Threejs样例

Threejs的安装本文不会描述，可以参考官方文档，比较简单。

main.js内容如下，

import * as THREE from 'three';import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { GUI } from 'lil-gui'const scene = new THREE.Scene();
scene.background = new THREE.Color(0xffffff );
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1e-5, 1e10 );
camera.position.set(0, 15, 30);var ambient = new THREE.AmbientLight(0xffffff);
scene.add(ambient);const renderer = new THREE.WebGLRenderer({ antialias: true, logarithmicDepthBuffer: true });
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setPixelRatio(window.devicePixelRatio);
renderer.outputColorSpace = THREE.SRGBColorSpace;document.body.appendChild( renderer.domElement );const loader = new GLTFLoader();const dracoLoader = new DRACOLoader();
loader.setDRACOLoader(dracoLoader);let modelReady = false;
let gltfscene;
let horsevisible = false;
let mixer;let actions;loader.load('/models/33.gltf',function (gltf) {gltfscene = gltf.scene;scene.add(gltfscene);console.log(gltf.animations);mixer = new THREE.AnimationMixer(gltf.scene);let Action1 = mixer.clipAction( gltf.animations[0] );let Action2 = mixer.clipAction( gltf.animations[1] );actions = [Action1, Action2];modelReady = true;},function(xhr) {console.log((xhr.loaded / xhr.total * 100) + '% loaded');},function (error) {console.log('An error happened.');}
)const obj = {myFunction: function () {if (horsevisible == false){actions[0].clampWhenFinished = true;actions[0].setLoop(THREE.LoopOnce);actions[0].play();actions[1].stop(); // 非常关键}else{actions[1].clampWhenFinished = true;actions[1].setLoop(THREE.LoopOnce);actions[1].play();actions[0].stop(); // 非常关键}horsevisible = !horsevisible;}
}
const gui = new GUI()
gui.add(obj, 'myFunction'); // 按钮const grid = new THREE.GridHelper( 2000, 20, 0x000000, 0x000000 );
grid.material.opacity = 0.3;
grid.material.transparent = true;
scene.add( grid );const controls = new OrbitControls(camera, renderer.domElement);
controls.update();const clock = new THREE.Clock();function animate() {requestAnimationFrame( animate );if (modelReady){mixer.update(clock.getDelta());}controls.update();renderer.render( scene, camera );
}animate();