threejs实现模型gltf的动画效果

最新推荐文章于 2023-12-20 10:55:38 发布

迷途小员员

最新推荐文章于 2023-12-20 10:55:38 发布

阅读量648

点赞数 1

分类专栏： threejs 文章标签： threejs

本文链接：https://blog.csdn.net/weixin_38441229/article/details/132284976

版权

threejs 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

确保加载模型后模型有animations属性。

加载完模型后，在模型中定义mixer的变量值。


// 4、加入加载器
const loader = new GLTFLoader();
loader.load("./model/gltf/RobotExpressive/RobotExpressive.glb", function (gltf) {
    // 赋值动画给mixer
    mixer = 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);
}