vue + threejs实现导入blender动画并控制其播放

<template>
<div class="modelsBox">
  <div class="modelsBox_wrapper"></div>
  <div class="opara-pannel" @click.stop>
    <div>
      <button @click="playAnimate(idx)" v-for="(v, idx) in this.animations" :key="idx">{{`动画${idx + 1} 播放`}}</button>
    </div>
  </div>
</div>
</template>

<script>

import { webglOBJ, labelTag, getPointRay, getFitScaleValue, deepCopyObject } from '@/utils/webGL/webGL.js';
import TWEEN from '@tweenjs/tween.js';
export default {
  name: 'modelsBox',
  data () {
    return {
      animations: [], // 动画对象
      isAn: false, // 单个动画停止标志
      current: -1, // 当前视角定索引
      controls: '',
      isAnimate: false,
      point3d: {},
      zoom: 1,
      target: '',
      sence: null,
      camera: '',
      renderer: ''
    };
  },
  beforeDestroy () {
    document.removeEventListener('click', this.get3D);
  },
  mounted () {
    this.int();
  },
  methods: {
    playAnimate (index) {
      // 先停止动画
      for (let i = 0; i < this.animations.length; i++) {
        this.mixer.clipAction(this.animations[i]).stop();
      }
      this.stopAn(index);
    },
    // 单个模型控制动画开始和停止
    stopAn (index) {
      if (!this.isAn) {
        this.mixer.clipAction(this.animations[index]).play();
        // this.scenceAnimate();
      } else {
        this.mixer.clipAction(this.animations[index]).stop();
      }
      this.isAn = !this.isAn;
    },
    scenceAnimate () {
      const a = new TWEEN.Tween(this.sence.rotation)
        .to({ x: 0, y: 10, z: 0}, 10000)
        .start().repeat(Infinity);
    },
    // 点击模型显示对应视角
    get3DmodeView () {
      const point3d = getPointRay(this.sence, this.camera).point;
      if (!point3d) {return;}
      const time = 1000;
      // 克隆相机用户计算点击后相机聚焦的位置
      const cloneCamera = this.camera.clone();
      // this.camera.lookAt(point3d);
      cloneCamera.lookAt(point3d);

      new TWEEN.Tween(this.camera.position)
      .to({ x: cloneCamera.position.x, y: cloneCamera.position.y, z: cloneCamera.position.z}, time)
      .easing(TWEEN.Easing.Back.Out).start();

      new TWEEN.Tween(this.camera.rotation)
      .to({ x: cloneCamera.rotation.x, y: cloneCamera.rotation.y, z: cloneCamera.rotation.z}, time)
      .easing(TWEEN.Easing.Back.Out).start();
      this.camera.lookAt(new THREE.Vector3(point3d.x, point3d.y, point3d.z));
      this.camera.updateProjectionMatrix();
      this.controls.reset();  // 一定要重置对应的控制轴的状态，不然视角还原后放大滚轮会从上一次的视角那边放大。
      this.renderer.render(this.sence, this.camera);
    },
    int () {
      const vm = this;
      const position = window.sessionStorage.getItem('position');
      const target = window.sessionStorage.getItem('target');
      let mixer = null;

      const imgBG = require('./img.jpg');
      const gltf = '/static/models/animate.gltf';
      // const gltf = 'https://scqilin.github.io/learning-threejs-third/assets/models/CesiumMan/CesiumMan.gltf';

      const loader = new THREE.GLTFLoader();
      const webGLdom = document.querySelector('.modelsBox_wrapper');
      const sence = webglOBJ.createSence(webGLdom);
      const camera = webglOBJ.createCamera({
        fov: 45,
        aspect: 1,
        near: 100,
        far: 5000,
        position: {
          x: 550,
          y: 550,
          z: -90
        }
      });

      if (position) {
        camera.position.set(JSON.parse(position).x, JSON.parse(position).y, JSON.parse(position).z);
        camera.lookAt(JSON.parse(target));
      }

      const renderer = webglOBJ.createRenderer();
      const plane = webglOBJ.createPlane(imgBG, imgBG);
      const spotLight = webglOBJ.createSpotLight();
      const directionalLight = webglOBJ.createDirectionalLight({ x: 100000, y: 100000, z: 100000 });
      const ambient = webglOBJ.createAmbient();
      const datGui = webglOBJ.createDatGui();
      const controls = webglOBJ.createControls();
      const axisHelper = webglOBJ.createAxisHelper();

      const earthDiv = document.createElement('div');
      earthDiv.className = 'label';
      earthDiv.textContent = 'Earth';
      const earthLabel = new THREE.CSS2DObject(earthDiv);
      earthLabel.position.set(150, 550, -190);
      console.log(earthLabel, 'earthLabel');
      loader.load(gltf, (gltf) => {
        let object = gltf.scene;
        console.log(gltf, 'gltf');
        object.scale.set(30, 30, 30);
        sence.add(object);
        // vm.scenceAnimate();

        // 动画效果
        mixer = new THREE.AnimationMixer(gltf.scene);
        vm.mixer = mixer;
        console.log(gltf.animations, 'gltf.animations[i]');
        vm.animations = gltf.animations;
        //同时将这个外部模型的动画全部绑定到动画混合器里面
        for (var i = 0; i < gltf.animations.length; i++){
          // mixer.clipAction(gltf.animations[i]).play();
        }
      });
      // 滚动缩小获取比例
      controls.addEventListener('change', function(evt) {
        console.log(controls.target, evt, 'zoom');
      });

      this.sence = sence;
      this.controls = controls;
      this.camera = camera;
      this.plane = plane;
      this.renderer = renderer;

      // 将对象添加到场景中去
      webglOBJ.senceAdd([plane, earthLabel, directionalLight, ambient, datGui, controls, axisHelper]);
      // webglOBJ.webglRender(sence, camera, renderer);

     // 动画显示
     const clock = new THREE.Clock();
      function render (html) {

        // 动画显示
        const time = clock.getDelta();
        if (mixer) {
          mixer.update(time);
        }

        TWEEN.update();
        renderer.render(sence, camera);
        vm.sence = sence;
        vm.camera = camera;
        requestAnimationFrame(render);
      };
      this.render = render;
      render();

    }
  }
};
</script>
<style lang="scss" scoped>
.label {
  width: 100px;
  height: 100px;
  background: #000;
}
div.active {
  border: 3px solid red;
  .sign div {
    color: red !important;
  }
}
.modelsBox_wrapper {
  position: relative;
  width: 100%;
  height: 100vh;
  border: 1px solid #ccc;
  overflow: hidden;
}
.opara-pannel {
  position: absolute;
  right: 15px;
  top: 100px;
  width: 200px;
  height: 400px;
  background: rgba(0, 0, 0, 0.7);
  div, p{
    color: #fff;
  }
}
.modelsBox {
  position:relative;
  overflow: hidden;
}
div[id *= "sign"] {
  width: 250px;
  height: 100px;
  padding:10px 10px 10px 70px;
  background: rgba(0, 0, 0, .65);
  background: url('~assets/label-bg.png') center center no-repeat;
  .sign{
    div {
      color: #fff;
      text-align: left;
      padding: 0 5px;
    }
  }
}
</style>