panolensjs实现全景场景切换

<template>
    <div>
        <div id="container" ref="container" style="width: 1000px; height: 500px;"></div>
    </div>
  </template>
  
  <script>
  import * as THREE from 'three'
  import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
  import * as PANOLENS from 'panolens'
  export default {
    name: "Index",
    data() {
      return {
        // 版本号
        version: "3.8.5",
        scene:'',
        allScenes:[],
        camera:'',
        renderer:'',
        cube:'',
        container:'',
        urls: [
          'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
          'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
          'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
          'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
          'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
          'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
          'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
        ],
        container:'',
        panorama_main_image:'',
        light:'',
        camera:'',
        controls:'',
        renderer:'',
        object:[],
        objLoader:null,
        mtlLoader:null,
      };
    },
    mounted(){
         this.initContainer() //初始化全景容器
        this.createScence(require('@/views/vr.jpg')) //本地图片引入方式
        this.createScence(this.urls[6])
        // this.createScence(require('@/assets/images/s1.jpg'))
        // console.log('this.container.OrbitControls',this.container.OrbitControls)
        this.addTipMarker(this.allScenes[0],PANOLENS.DataImage.Info,[4870.22, 104.73, 1100.27])
        this.allScenes[0].link(this.allScenes[1], new THREE.Vector3(4401.39, 1027.04, 2117.59))
        this.allScenes[1].link(this.allScenes[0], new THREE.Vector3(4898.90, 128.76, 955.73))

    },
    methods: {
      generateDocument() {
        // 读取模板文件
        const templateContent = fs.readFileSync('./template.docx', 'binary');
        const template = new Docxtemplater(templateContent);
  
        // 准备要填充的数据
        const data = {
          t1: '这是要插入的数据1',
          t2: '这是要插入的数据2',
          t3: '这是要插入的数据3',
          // 更多数据...
        };
  
        // 将数据填充到模板中
        template.setData(data);
  
        // 进行模板渲染
        template.render();
  
        // 生成最终的 Word 文档内容
        const generatedDocument = template.getZip().generate({ type: 'nodebuffer' });
  
        // 保存文档为 Blob 对象，以便下载
        const blob = new Blob([generatedDocument], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' });
        const url = URL.createObjectURL(blob);
  
        // 创建一个链接用于下载文档
        const link = document.createElement('a');
        link.href = url;
        link.download = 'output.docx';
        link.click();
  
        // 释放 Blob 对象
        URL.revokeObjectURL(url);
      },
      //初始化DOM容器
      initContainer(){
        // 初始化场景
        this.container = new PANOLENS.Viewer({
        container: document.getElementById('container'), // 传入父容器dom
        output: 'console'  // 为了后面打印位置信息
        })
        // this.container.OrbitControls.noZoom = true
        this.container.OrbitControls.maxPolarAngle = (2/3) * Math.PI
        this.container.OrbitControls.minPolarAngle = (1/3) * Math.PI
     },
      /**
       * @name 创建场景
       * @param {url} sceneImageUrl 360度全景的图片地址
       */
      createScence(sceneImageUrl){
          // 传入官方案例的全景图片，初始化一个球形的全景
         const scene = new PANOLENS.ImagePanorama(sceneImageUrl)
         // 添加到场景中
         this.container.add(scene)
         this.allScenes.push(scene)
         // 2.开启方法，因为此方法本质是射线捕捉物体，所以要放到this.container.add()之后，不然会因为没物体而报错
         this.container.outputPosition()
       },
       /**
        * 场景中添加标识点
        * @param {ImagePanorama} scene 要的添加场景
        * @param {PANOLENS.DataImage} tipImage 图标采用自带的图标
        * @param {Array} position 提示图片添加位置,ctrl+鼠标点击图片位置获得，控制台查看
        * @param {String} hoverText 
        */
       addTipMarker(scene,tipImage,position,hoverText){
         // 初始化标识点, 因为本质是精灵模型，需要传入scale缩放来控制大小
         // 图标采用自带的图标PANOLENS.DataImage.Info
         const infospot = new PANOLENS.Infospot(350, tipImage)
         // 根据前面获取的位置来设置标识点的位置
         infospot.position.set(position[0],position[1],position[2])
         if(hoverText){
            // 给标识点添加文字
            infospot.addHoverText(hoverText)
         }
         infospot.addEventListener('click',()=>{
            this.allScenes[0].click()
         })
         // 标识点添加入场景
         scene.add(infospot)
      },
    }
  };
  </script>