- 确保加载模型后模型有animations属性。
- 加载完模型后，在模型中定义mixer的变量值。
// 4、加入加载器
const loader = new GLTFLoader();
loader.load("./model/gltf/RobotExpressive/RobotExpressive.glb", function (gltf) {// 赋值动画给mixermixer = new THREE.AnimationMixer(gltf.scene);mixer.clipAction(gltf.animations[9]).play();scene.add(gltf.scene);
});
- 定义时间间隔，直接初始化就行
// 3、定义间隔时间
clock = new THREE.Clock();
- 在重复渲染函数中加入以下代码，第2行到第5行
function animate () {if (mixer) {const delta = clock.getDelta();mixer.update(delta);}renderer.render(scene, camera);robotRef.value.appendChild(renderer.domElement);requestAnimationFrame(animate);
}
