[Question] Separately load animations and models

[Mippoose]

Hi there! Is it possible to load model and animations separately? I'm using your library as a showcase of different animations. So there's 1 model in my project and a lot of animations, downloading model+animation in 1 single file(around 5-6 mb) is too long. Is there any workaround?

[king2088]

Use threeJS control the animations and use load event get all models animations. In vue-3d-loader, you can import threeJS.
Example:

<template>
<vue3dLoader :filePath="['1.glb', '2.glb']" @load="getModels" />
</template>
<script>
import { vue3dLoader, Three } from 'vue-3d-loader'
export default {
  data() {
    models: null
  }
  methods: {
    getModels(models) {
      this.models = models
      .......................
      const mixers = []
      this.models.children.forEach((item, index) => {
        mixers.push(Three.AnimationMixer(item));
        if (item.animations && item.animations.length > 0) {
          item.animations.forEach((clip) => {
            if (clip) {
              // get animation
              const action = mixers[index].clipAction(clip);
              if (autoPlay) {
                // play animation
                action.play();
              } else {
                // stop animation
                action.stop();
              }
            }
          });
        }
      });
    }
  }
  }
</script>