Threejs加载gltf模型

加载模型

本次使用的是 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();

效果图

参考文档

• Three.js教程
• threejs手册