VUE 轮播图+3D Model 实现

项目场景：

提示：这里简述项目相关背景：

VUE+ELEMENTUI 跑马灯（轮播图）展示3D模型

问题描述

提示：这里描述项目中遇到的问题：

3D模型使用的是 vue-3d-model 组件，问题是组件在页面上直接展示正常，放到轮播图里面就无法显示（打开F12改变了页面长宽，就显示出来了），期间尝试过 this.$nextTick()this.$forceUpdate() v-if 等等情况都无法直接渲染成功

原因分析：

提示：这里填写问题的分析：

分析是model-obj的组件问题导致的。

---

解决方案：

提示：这里填写该问题的具体解决方案：

自定义一个组件，组件里放轮播图，轮播图的Item中放组件。这样最终效果是，页面刷新不展示3D模型，使用轮播图的切换按钮后，会加载对应的3D模型。
那么要解决的问题，就是模拟轮播图组件的点击的功能即可，最后的实现代码如下：

<template>
  <el-carousel trigger="click" height="400px" :autoplay="false"
               ref="carousel1"
               @change="changeModel"
               indicator-position="outside" arrow="always">
    <el-carousel-item v-for="(item,index) in models" :key="index">
      <model-obj
        v-if="activeKey == index"
        :lights="lights"
        :src="item.src" :mtl="item.mtl"
      ></model-obj>
    </el-carousel-item>
  </el-carousel>
</template>
<script>
import {ModelObj} from 'vue-3d-model'

export default {
  name: 'MyModel',
  components: {ModelObj},
  data() {
    return {
      models: [],
      activeKey: -1,
      lights: [{
        type: 'HemisphereLight',
        position: {x: 0, y: 1, z: 0},
        skyColor: 0xffffff,
        // groundColor: 0xFF0000, // 此代码为灯光后颜色
        intensity: 1,
      },
        {
          type: 'DirectionalLight',
          position: {x: 1, y: 1, z: 1},
          color: 0xffffff,
          intensity: .8,
        }]
    }
  },
  created(){
    this.getModelInfo();
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.carousel1.next();
      this.$forceUpdate();
    });
    setTimeout(() => {
      this.$refs.carousel1.prev();
      this.$forceUpdate();
    }, 300);
  },
  methods: {
    changeModel(key) {
      this.activeKey = key;
    },
    getModelInfo() {
      this.models = [
        {
          id: 0,
          src: 'mod/1.obj',
          mtl: 'mod/1.mtl',
        },
        {
          id: 1,
          src: 'mod/2.obj',
          mtl: 'mod/2.mtl',
        }
      ];
    },
  }
}
</script>