Three.js实现简易版VR全景看房

涉及知识点：
1、对于网格模型的rotation、scale、position的控制
2、对于精灵模型的创建
3、对于光线透视Raycaster的使用，光线投射用于在三维空间中鼠标移过了什么物体
4、修改相机Camera的控制之后，需要使用 updateProjectionMatrix 方法更新后 才会生效。
5、TextureLoader 纹理贴图的使用
6、控制器Control 需要在每次循环中使用.update()进行更新后 才会生效

注意事项： 不同的室内图片的名称可以规则统一，通过一个变量来公用一个渲染方法。

<template>
  <div>
    <div ref="vrHouseRef"></div>
  </div>
</template>

<script>
import * as Three from 'three';
// 弹力球控制器
import {
   TrackballControls} from 'three/examples/jsm/controls/TrackballControls.js'
// 引入需要的图片
import F1 from '../../../assets/img/0_f.jpg';
import B1 from '../../../assets/img/0_b.jpg';
import L1 from '../../../assets/img/0_l.jpg';
import R1 from '../../../assets/img/0_r.jpg';
import U1 from '../../../assets/img/0_u.jpg';
import D1 from '../../../assets/img/0_d.jpg';
import F2 from '../../../assets/img/2_f.jpg';
import B2 from '../../../assets/img/2_b.jpg';
import L2 from '../../../assets/img/2_l.jpg';
import R2 from '../../../assets/img/2_r.jpg';
import U2 from '../../../assets/img/2_u.jpg';
import D2 from '../../../assets/img/2_d.jpg';
import spritePic from '../../../assets/img/icon.png';

export default {
   
  data() {
   
    return {
   
      width: window.innerWidth,
      height: window.innerHeight,
      scene: null,
      camera: null,
      renderer: null,
      raycaster: null,
      sprite: null,
      controls: null,
      // 存储当前渲染的平面对象数组
      currentPlaneBox: [],
      // 每一个imgs 都表示一组立方体展示，顺序不能变，更好的方式是做成对象，这里简化了
      imgs1: [
        F1,
        B1,
        L1,
        R1,
        U1,
        D1
      ],
      imgs2: [
        F2,
        B2,
        L2,
        R2,
        U2,
        D2
      ]
    }
  },
  mounted() {
   
    this.initScene()
    this.initCamera()
    this.initRenderer()
    this.initControls()
    this.initMesh()
    this.initSprite()
    this.initRaycaster()
    this.animate()
  },
  methods: {
   
    // 初始化场景
    initScene() {
   
      this.scene = new Three.Scene();