加载模型
本次使用的是 GLTFLoader
模型加载器,可以加载 .gltf
和 .glb
的模型文件
// 场景、相机、渲染器、灯光等基本配置省略
// 动画混合器
let mixer: THREE.AnimationMixer;
const loader = new GLTFLoader().setPath('/assets/gltf/');
loader.load('Horse.glb', function (gltf: GLTF) {
console.log('gltf', gltf);
scene.add(gltf.scene);
gltf.scene.position.setY(-70);
gltf.scene.rotateY(-Math.PI / 4);
mixer = new THREE.AnimationMixer(gltf.scene);
// obj.animations[0]:获得剪辑对象clip
var AnimationAction = mixer.clipAction(gltf.animations[0]);
// AnimationAction.timeScale = 1; //默认1,可以调节播放速度
// AnimationAction.loop = THREE.LoopOnce; //不循环播放
// AnimationAction.clampWhenFinished = true;//暂停在最后一帧播放的状态
AnimationAction.play();//播放动画
});
const clock = new THREE.Clock();
function doRender() {
renderer.render(scene, camera);//执行渲染操作
requestAnimationFrame(doRender);
if (mixer) {
// 更新混合器相关的时间, clock.getDelta()方法获得两帧的时间间隔
mixer.update(clock.getDelta());
}
}
doRender();
效果图