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

就愉快的转起来了

相关推荐
索迪迈科技2 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
一朵梨花压海棠go3 小时前
html+js实现表格本地筛选
开发语言·javascript·html·ecmascript
咔咔一顿操作4 小时前
【CSS 3D 实战】从零实现旋转立方体:理解 3D 空间的核心原理
前端·css·3d·css3
一只小风华~4 小时前
Vue: Class 与 Style 绑定
前端·javascript·vue.js·typescript·前端框架
研梦非凡4 小时前
CVPR 2025|基于视觉语言模型的零样本3D视觉定位
人工智能·深度学习·计算机视觉·3d·ai·语言模型·自然语言处理
十碗饭吃不饱4 小时前
net::ERR_EMPTY_RESPONSE
java·javascript·chrome·html5
Zz_waiting.5 小时前
Javaweb - 14.6 - Vue3 数据交互 Axios
开发语言·前端·javascript·vue·axios
切糕师学AI5 小时前
前后端分离架构中,Node.js的底层实现原理与线程池饥饿问题解析
前端·vue.js·node.js
每天吃饭的羊6 小时前
state和ref
前端·javascript·react.js
GEO_YScsn6 小时前
Vite:Next-Gen Frontend Tooling 的高效之道——从原理到实践的性能革命
前端·javascript·css·tensorflow