vue项目用three.js机房展示

前言：
本人公司要求我制作机房展示，机房先由2D编辑并设置好机柜位置及机柜里面防火墙位置，做出2D展示，并在基础上制作3D展示，现在阶段功能研究制作完成，我发布的内容仅供互相学习参考，一切产生的后果与我无关。本人用的是vue

先上视频

<template>
  <div class="sketchMenageBox">
    <div id="container" ref="container"></div>
    <div id="sketchTextBoxRef" class="sketchTextBox df-aj">
      <div class="sketText_css">{
  {sketchText}}</div>
    </div>
    <div id="sketchBoxBoardRef" class="sketchBoxBoard">
      <img src="./img/sketchbdbg.png" style='width:100;height:100%;' alt="">
      <img class="computer_Box" src="./img/jigui_img.png" alt="">
      <div class='computer_main'>
        <div class='computer_title'>{
  {sketchNameBoardName.boxNo}}</div>
        <div class='df-aj computer_content1'>
          <img src="./img/icon_rongliang.png" style='width:100;height:100%;' alt="">
          <div class='computer_name mgl-5'>机柜容量</div>
          <div class='df-aj mgl_10'>
            <span class='computer_text1'>{
  {sketchNameBoardName.equipNum}}</span>
            <span class='mgl_10 mgr_10'>/</span>
            <span class='computer_text3'>{
  {sketchNameBoardName.equipNumAll}}</span>
          </div>
        </div>
        <div class='df-aj computer_content2'>
          <img src="./img/icon_zhuangtai.png" style='width:100;height:100%;' alt="">
          <div class='computer_name mgl-5'>设备状态</div>
          <div class='df-aj mgl_10'>
            <span class='computer_text2'>{
  {sketchNameBoardName.typeError}}</span>
            <span class='mgl_10 mgr_10'>/</span>
            <span class='computer_text3'>{
  {sketchNameBoardName.typeAll}}</span>
          </div>
        </div>
      </div>
    </div>
    <div v-for="(item,index) in computerList" :key="index">
      <div v-if="item.boxInfo">
        <div v-for="item1 in item.boxInfo.devNoList" :key="item1.id" :ref="'sketchBoxServeRef'+item1.id" class="sketchBoxBoard">
          <img src="./img/sketchbdbg.png" style='width:100;height:100%;' alt="">
          <div class='serve_box'>
            <div class='df'>
              <div>
                <div>
                  <div class='serve_title df-aj'>设备名称</div>
                  <div class='serve_main df-aj'>{
  {item1.productShowName.substr(item1.productShowName.indexOf('【'), item1.productShowName.indexOf('】'))}}</div>
                </div>
                <div>
                  <div class='serve_title df-aj'>设备类型</div>
                  <div class='serve_main df-aj'>{
  {item1.productShowName.substr(0, item1.productShowName.indexOf('【'))}}</div>
                </div>
              </div>
              <div>
                <div>
                  <div class='serve_title df-aj'>位置</div>
                  <div class='serve_main df-aj'>{
  {item1.startLine + '~' + (+item1.startLine + +item1.capacity - 1) + ' (U)'}}</div>
                </div>
                <div>
                  <div class='serve_title df-aj'>IP</div>
                  <div class='serve_main df-aj'>{
  {sketchNameServeName.typeName4}}</div>
                </div>
              </div>
              <div>
                <div>
                  <div class='serve_title df-aj'>状态</div>
                  <div class='serve_main df-aj'>{
  {item1.errorTroubleLight ? '正常' : '故障'}}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-for="item in computerList" :key="item.id" :ref="'sketchBoxBG'+item.id" class="sketchBoxBoard" @mousedown='spriteClick(item)'>
      <img src="./img/sketchbdbg.png" style='width:100;height:100%;' alt="">
      <img class="computer_Box" src="./img/jigui_img.png" alt="">
      <div class='computer_main'>
        <div class='computer_title'>{
  {setBoxNo(item)}}</div>
        <div class='df-aj computer_content1'>
          <img src="./img/icon_rongliang.png" style='width:100;height:100%;' alt="">
          <div class='computer_name mgl-5'>机柜容量</div>
          <div class='df-aj mgl_10'>
            <span class='computer_text1'>{
  {setEquipNum(item)}}</span>
            <span class='mgl_10 mgr_10'>/</span>
            <span class='computer_text3'>{
  {setEquipNumAll(item)}}</span>
          </div>
        </div>
        <div class='df-aj computer_content2'>
          <img src="./img/icon_zhuangtai.png" style='width:100;height:100%;' alt="">
          <div class='computer_name mgl-5'>设备状态</div>
          <div class='df-aj mgl_10'>
            <span class='computer_text2'>{
  {setTypeError(item)}}</span>
            <span class='mgl_10 mgr_10'>/</span>
            <span class='computer_text3'>{
  {setTypeAll(item)}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import sketchBorder from '../sketchManagement/sketchBorder.vue'
import * as THREE from './js/three.module.js'
// import * as THREE from 'three'
import {
      OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import html2Canvas from 'html2canvas'
// import './js/Projector.js'
import {
      CSS2DRenderer, CSS2DObject } from './js/CSS2DRenderer.js'
import {
      FontLoader } from './jsm/loaders/FontLoader.js'
import {
      TextGeometry } from './jsm/geometries/TextGeometry.js'
import {
      buildingModel } from './buildingModel.js'
export default {
     
  components: {
      sketchBorder },
  data() {
     
    return {
     
      camera: null,
      scene: {
      children: [] },
      renderer: null,
      mesh: null,
      controls: null,
      stats: null,
      targetList: [],
      curHoverUUID: null,
      buildingModel: {
     },
      mouse: {
      x: 0, y: 0 },
      animateList: [],
      step: 0,
      p1: {
      x: 0, y: 2, z: 1000 },
      tweena: null,
      tweenb: null,
      tweenc: null,
      tweend: null,
      sketchText: '',
      sketchNameBoardName: {
     },
      sketchNameServeName: {
     },
      labelRenderer: null,
      mousedblclick: {
      x: 0, y: 2, z: 100 },
      timer: null,
    }
  },
  props: {
     
    isModel3D: {
     
      type: Boolean,
      default: false,
    },
    isRefresh: {
     
      type: Boolean,
      default: false,
    },
    isLook: {
     
      type: Boolean,
      default: false,
    },
    computerList: {
     
      type: Array,
      default: [],
    },
    sketckRoomName: {
     
      type: String,
      default: '',
    },
  },
  watch: {
     
    isRefresh(val) {
     
      var tweena = this.cameraCon({
      x: 0, y: 500, z: 1050 }, 1000)
      tweena.start()
    },
    isLook(val) {
     
      if (val) {
     
        this.initTween()
      } else {
     
        this.tweena.stop()
        this.tweenb.stop()
        this.tweenc.stop()
        this.tweend.stop()
        this.tweena = null
        this.tweenb = null
        this.tweenc = null
        this.tweend = null
        this.camera.position.set(0, 500, 1050)
        this.camera.lookAt(this.scene.position)
      }
    },
  },
  created() {
     
    // 机房墙体
    this.buildingModel = buildingModel
    console.log('this.buildingModel', this.buildingModel)
  },
  mounted() {
     
    this.init()
    this.initEquipModel()
    this.animate()
  },
  methods: {
     
    //初始化
    init() {
     
      //  添加场景
      this.scene = new THREE.Scene()
      // this.scene.background = new THREE.Color('#022f4c')
      this.renderer = new THREE.WebGLRenderer({
     
        antialias: true, //抗锯齿:true
        alpha: true,
      })
      //设置渲染器
      this.labelRenderer = new CSS2DRenderer()
      this.labelRenderer.setSize(this.$refs.container.clientWidth, this.$refs.container.clientHeight)
      this.labelRenderer.domElement.style.position = 'absolute'
      this.labelRenderer.domElement.style.bottom = '4em'
      this.labelRenderer.domElement.style.left = '7em'
      document.getElementById('container').appendChild(this.labelRenderer.domElement)
      //设置渲染器
      this.renderer.domElement.style.position = 'absolute'
      this.renderer.setSize(this.$refs.container.clientWidth, this.$refs.container.clientHeight) //画布尺寸
      // this.renderer.setClearColor('#39609B') //背景色
      this.renderer.setClearAlpha(0)
      document.getElementById('container').appendChild(this.renderer.domElement)
      //配置相机
      this.camera = new THREE.PerspectiveCamera(50, this.renderer.domElement.width / this.renderer.domElement.height, 0.1, 20000)
      this.camera.position.set(0, 500, 500) //左右，上下、前后视角
      //配置光源
      this.initLight()
      // 初始化视角控制器
      this.initOrbitControls()

      this.initModel()
      TWEEN.update()

      document.addEventListener('contextmenu', (e) => {
     
        let tweena = this.cameraCon({
      x: 0, y: 500, z: 1050 }, 1000)
        tweena.start()
      })
      document.addEventListener('mousemove', (e) => {
     
        this.onDocumentMouseMove(e)
      })

      document.addEventListener('click', (e) => {
     
        window.clearTimeout(this.timer)
        this.timer = window.setTimeout(() => {
     
          this.onDocumentMouseClick(e)
        }, <