Three.js 动画 Animation 理解

场景

在3dmax中做模型和动画，导出FBX格式，转换成GLTF后通过three.js的GLTFLoader导入网页，通过AnimationMixer.setTime()来控制动画进度

主要步骤

1. 建模及制作动画，要注意的是，动画需要按照30帧为单位来做
2. 通过FBX2glTF-windows-x64.exe来进行转换，有个问题是，开始我用的动画是24为单位，一共48帧的动画，转成gltf后，最后一帧会丢失，3dmax里整个动画是前后相同的，也就是第0帧和第48帧是一样的，结果导致转成gltf后，用windows自带的3d查看器最后一帧都是不对的，导入网页控制时发现也是不对的
3. loader加载完模型的函数中,通过

		this.mixer_gaizi = new THREE.AnimationMixer(gltf.scene);
        let action_kaigai=this.mixer_gaizi.clipAction(gltf.animations[0]);
        action_kaigai.play();

        this.mixer_xuanjin=new THREE.AnimationMixer(gltf.scene);
        let action_xuanjin=this.mixer_xuanjin.clipAction(gltf.animations[1]);
        action_xuanjin.play();

把模型中的两个动画获取出来，这里两个mixer是因为要独立控制两个动画，3dmax里这两个动画分别是0-60和60-120帧

4. 最后在animate()中就可以

	 if(this.mixer_gaizi){//筒盖的mixer
        // this.mixers[1].update(delta);
        this.mixer_gaizi.setTime(t1)
      }
      if(this.mixer_xuanjin){
        this.mixer_xuanjin.setTime(t2)
      }

通过t1,t2来设置动画进度，这里的问题是：t从0开始，setTime(0),动画处于第0帧；setTime(1)，动画处于第30帧；setTime(2)，处于第60帧，超过1的以此类推，setTime(4)===setTime(2)。当然如果动画必须是24帧，可以设置mixer的timeScale=0.8，然后其余操作就可以和对待30帧一样了，有了这个0.8，setTime里的值都会先乘这个0.8再设置到动画，24帧的动画第30帧已经超过1秒了，所以想要动画设置在1秒的位置，直接设置setTime(1)是第30帧的位置，超过了24，但是setTime(1*0.8)就是24帧的位置，讲的比较乱，见谅