前端解决方案——Vite 2.9.9 + vue 3.2 + panolens 实现全景看车，切换视角

众所周知，three.js是一个前端3D库，凡虚拟现实、增强现实、元宇宙的web项目，无一不涉及。 但如果仅仅是VR全景展示的话，就有点杀鸡用牛刀的感觉了。基于three.js的封装也有很多库，但我目前发现最简单的要属panolens.js

panolens是来自中国台湾省的一位陈姓小哥的封装库。毕竟是中国人，使用起来易于理解，下面就是我的实现：

<template>
  <div class="container">
    <div class="pano" ref="pano"></div>
  </div>
</template>

<script lang="ts" setup>
import * as PANOLENS from 'panolens'
import { Viewer } from 'panolens'
import { Vector3 } from 'three'
import { onMounted, ref } from 'vue'

const pano = ref()

const setPano = (panoObj, text, points) => {
  const infospot = new PANOLENS.Infospot(350, PANOLENS.DataImage.Info)
  infospot.position.set(...points)
  infospot.setText(text)
  infospot.addHoverText(text)
  infospot.addEventListener('click', () => { })
  panoObj.add(infospot)
}

onMounted(() => {
  const viewer_main = new Viewer({
    container: pano.value, // 传入父容器dom
    output: 'console',  // 为了后面打印位置信息
    controlBar: false, // 下方的控件
    cameraFov: 120, // 初始视场角
    autoRotate: true, // 自动旋转
    autoRotateSpeed: 1 // 自动旋转速度
  })

  const panoObj1 = new PANOLENS.ImagePanorama('/pano081903/R0010033_20220820181312.JPG') // 主驾驶室
  const panoObj2 = new PANOLENS.ImagePanorama('/pano081903/R0010031_20220820180808.JPG') // 副驾驶室
  const panoObj3 = new PANOLENS.ImagePanorama('/pano081903/R0010026_20220820175933.JPG') // 后排

  viewer_main.add(panoObj1) // 主驾驶室
  viewer_main.add(panoObj2) // 副驾驶室
  viewer_main.add(panoObj3) // 后排
  // 给主驾驶室添加两个点——切换至 副驾驶室、后排
  setPano(panoObj1, '副驾驶室视角', [-1225.56, -3335.67, 3509.05])
  panoObj1.link(panoObj2, new Vector3(-1225.56, -3335.67, 3509.05))

  setPano(panoObj1, '后排视角', [3108.11, -2615.26, 2910.09])
  panoObj1.link(panoObj3, new Vector3(3108.11, -2615.26, 2910.09))

  // 给副驾驶室添加两个点——切换至 主驾驶室、后排
  setPano(panoObj2, '主驾驶室视角', [-655.99, -3685.82, -3306.42])
  panoObj2.link(panoObj1, new Vector3(-655.99, -3685.82, -3306.42))

  setPano(panoObj2, '后排视角', [3125.83, -2905.47, -2594.29])
  panoObj2.link(panoObj3, new Vector3(3125.83, -2905.47, -2594.29))

  // 给后排添加两个点——切换至 主驾驶室、副驾驶室
  setPano(panoObj3, '主驾驶室视角', [-4083.69, -2667.01, -1068.10])
  panoObj3.link(panoObj1, new Vector3(-4083.69, -2667.01, -1068.10))

  setPano(panoObj3, '副驾驶室视角', [-3510.51, -2557.13, 2467.97])
  panoObj3.link(panoObj2, new Vector3(-3510.51, -2557.13, 2467.97))
})
</script>

<style lang="scss" scoped>
.pano {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  border: 0;
}
</style>

以上代码，在本地上跑没问题（效果见第一张动图），但打包部署后，访问时报错如下：

Uncaught TypeError: Cannot read properties of null (reading 'response')
    at c.<anonymous> (panolens.module.js:192:38)
    at c.dispatchEvent (mock.js:8472:25)
    at XMLHttpRequest.f (mock.js:8304:19)

求解！！！