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();

效果图

效果图

参考文档
  • 3
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值