VUE使用轮播图画3D模型图

使用vue的组件和three.js画出3d模型图

直接上代码，有问题评论区联系吧，经常在线。qq:2277655147

<template>
  <div class="card text-center m-b-20">
    <div class="card-body text-muted" >
      <h4 class="mt-0 header-title" style="font-weight: bold;font-size: 20px; height: 40px;">{
   {
   equipmentTitle}}</h4>
      <div class="paramPanel" v-show="sensorModel.sphereModel">
        <el-row>
          <label>{
   {
   sensorModel.sensorName}}：{
   {
   sensorModel.sensorValue}}</label>
        </el-row>
      </div>
      <el-carousel
              trigger="click"
              :autoplay="false"
              :height="modelHeight"
              arrow="always"
              @change="equipmentChange"
      >
        <el-carousel-item v-for="(item,index) in equipmentData" :key="index"  >
          <div ref="panel3d"  :style="'height: '+modelHeight"></div>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
  <!--<div ref="panel3d"  style="height: 31vh;"></div>-->
</template>
<script>
    import * as THREE from 'three'
    import {
    OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
    import {
    STLLoader } from 'three/examples/jsm/loaders/STLLoader'
    import * as TWEEN from '../../../Tween.js';
    export default {
   
        // props:['pointsInfo','sensorModel','equipmentTitle','parentActiveName','parentMethod','styleHeight'],
        /*
         *equipmentData：3d模型所需要的标题和监测点数据
         * equipmentChangeParent：设备变化之后的方法
         * sensorChangeParent：传感器变化之后的方法
         * styleHeight：3d模型的高度
         * initHighLight：是否初始化高亮
         */
        props:['equipmentData','equipmentChangeParent','sensorChangeParent','styleHeight','initHighLight'],
        data() {
   
            let temp_height=this.styleHeight;
            if(!this.styleHeight){
   
                temp_height='35vh';
            }
            return{
   
                //3d图
                scene: null,
                camera: null,
                raycaster: null,
                renderer: null,
                controls: null,
                material: null,
                mesh: null,
                INTERSECTED: null,
                INTERSECTEDForcus: null,
                pointsInfo: [],
                points: null,
                pointShells: null,
                width: 0,
                height: 0,
                //固定模型
                modelInfo:{
   
                    path:'/big.STL',
                    position:{
   
                        x:108,
                        y:0,
                        z:-137,
                    },
                    rotation:'-90',
                    scale:'0.052',
                },
                //模型的高度
                modelHeight:temp_height,
                //轮播图第一个
                sensorModel:{
   
                    sphereModel:false,
                    sensorName:'',
                    sensorValue:'',
                },
                //变压器标题
                equipmentTitle:'',
                //所有监测点
                parentActiveName:'',
                //展示的第几个
                index:0,
                //所有的模型
                indexs:[]
            }
        },
        watch:{
   
            'equipmentTitle'(value){
   
                if(value==this.parentActiveName){
   
                    if(this.points){
   
                        if(!this.INTERSECTED){
   
                            this.sensorModel.sphereModel=false;
                            return false;
                        }
                        for(let i = 0; i < this.points.children.length; i++){
   
                            if(this.points.children[i] == this.INTERSECTED){
   
                                this.sensorModel.sphereModel=true;
                                this.sensorModel.sensorName=this.pointsInfo[i].sensorName;
                                this.sensorModel.sensorValue=this.pointsInfo[i].sensorValue;
                            }