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

就愉快的转起来了

相关推荐
wenjie学长6 分钟前
[3dmax自研插件]——3ds Max 智能材质检查器
3d·3dmax插件·材质·模型材质贴图检查·拖拽使用
苏打水com27 分钟前
JavaScript 面试题标准答案模板(对应前文核心考点)
javascript·面试
Wx-bishekaifayuan32 分钟前
基于微信小程序的社区图书共享平台设计与实现 计算机毕业设计源码44991
javascript·vue.js·windows·mysql·pycharm·tomcat·php
DoraBigHead1 小时前
React 架构重生记:从递归地狱到时间切片
前端·javascript·react.js
苦夏木禾2 小时前
css实现表格中最后一列固定
前端·javascript·css
晚枫~3 小时前
零基础快速上手Playwright自动化测试
javascript·python·测试工具·c#·自动化
~无忧花开~3 小时前
JavaScript学习笔记(二十八):JavaScript性能优化全攻略
开发语言·前端·javascript·笔记·学习·性能优化·js
九十一3 小时前
vue3事件总线与emit
前端·vue.js
丨Sky丨夜吻3 小时前
vscode扩展
ide·vue.js·vscode