vue中将three.js导入的3D模型中原本带有的动画进行播放

1.首先是你要确保模型中是有动画的

2.在加载模型后获取动画混合器并对设置动画的物体进行播放

javascript 复制代码
 loadModel() {
      // 加载3D模型
      const loader = new GLTFLoader();
      loader.load('/models/donghua.glb', (gltf) => {
        this.model = gltf.scene
        this.scene.add(this.model);
        // 获取动画混合器
        const animations = gltf.animations;
        if (animations && animations.length) {
          this.mixer = new THREE.AnimationMixer(gltf.scene);
          for (let i = 0; i < animations.length; i++) {
            const action = this.mixer.clipAction(animations[i]);
            action.play();
          }
        }
      }, (xhr) => {
        console.log(xhr, 'xhr');
      }, (err) => {
        console.log(err, 'err');
      });
}

3.关键的一步在动画的函数中去实时更新模型动画update函数中的值越小转动越快

javascript 复制代码
 animate() {
      this.controls.update()
      this.renderer.render(this.scene, this.camera)
      requestAnimationFrame(this.animate)
       // 更新动画
       if (this.mixer) {
        this.mixer.update(0.05);
      }
}

就愉快的转起来了

相关推荐
敲敲了个代码41 分钟前
[特殊字符] Web 字体裁剪优化实践:把 42MB 字体包瘦到 1.6MB
前端·javascript·学习·html·web
change_fate1 小时前
vue3 懒加载第三方组件
javascript·vue.js·ecmascript
扎瓦斯柯瑞迫1 小时前
Cursor 提示"Too Many Accounts"?一行命令重置机器码
前端·javascript·后端
前端付豪1 小时前
Vue3 响应式来!
前端·javascript·vue.js
Dontla1 小时前
JS睡眠函数(JS sleep()函数、JS单线程、Event Loop事件循环)假睡眠
开发语言·javascript·ecmascript
lumi.2 小时前
前端本地存储技术笔记:localStorage 与 sessionStorage 详解
前端·javascript·笔记
炫饭第一名2 小时前
🌍🌍🌍字节一面场景题:异步任务调度器
前端·javascript·面试
丘耳2 小时前
vis-network 知识点笔记
前端·javascript
你说啥名字好呢2 小时前
【React的Fiber及中断-重启逻辑的设计】
javascript·react.js
小白的码BUG之路2 小时前
Vue3 -- 响应式 ref和 reactive
前端·javascript·vue.js