日常记录vue-three，本文主要实现加载Gltf格式模型，并实现相应的动画。

主要效果如下：

是基于已经设置好好相机，灯光等基本设置
模型的话可以的话可以去这里下载
模型下载地址：地址
首先引用Gltf加载器

import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";

主要代码设置
**

1.第一步

**
首先在data中设置以下参数

 mixer:null,
 clock: new THREE.Clock()

2.第二步

设置加载模型函数
首先加载模型及设置动画

loadGltf() {
        let self = this 
        var loader = new GLTFLoader();
        loader.load("/model/Duck/run/standardwalk/Standard Walk.gltf", (gltf) => {
        var mesh = gltf.scene;
        mesh.position.set(10,10,10)//模型的坐标位置
        self.scene.add(mesh);
        mesh.scale.set(10, 10, 10);//模型的拉伸
        console.log(gltf, "gltf");
        // 调用动画
        self.mixer = new THREE.AnimationMixer(mesh);
        var action = self.mixer.clipAction(gltf.animations[0]);
        action
          .stop()
          .setDuration(1)//这个为播放速度
          .play();
       
      });  
      }

实现动画更新

render:function(){
        let that=this
        //this.mesh.rotation.x+=0.01
        requestAnimationFrame(that.render); //请求再次执行渲染函数render
        that.renderer.render(that.scene,that.camera);//执行渲染操作

	     	TWEEN.update();
        var time = that.clock.getDelta();
      if (this.mixer) {
        this.mixer.update(time);
      }
        
      },