使用three.js 将一段上下的视频做成全景

<template>
    <div>

        <div id="renderer-container">

            <!-- 左侧 -->

            <!-- <div class="left" onmouseover="over" >
                《
              </div> -->
        </div>
      

    </div>
</template>

<script setup lang="ts">
// 引入three.js
import * as THREE from 'three';

import { onMounted, ref, reactive, nextTick } from 'vue';

console.log(THREE);

let video: HTMLVideoElement;
let texture: THREE.VideoTexture;
var renderer: THREE.WebGLRenderer;
let scene: THREE.Scene;
let camera: THREE.PerspectiveCamera;
onMounted(() => {
    
   // 全景设备参数
   const DEVICE_OPTS = {
        width: 12800, // 默认宽度，周界坐标宽度
        height: 1658, // 默认高度，周界坐标高度
        minDistance: 400,
        distance: 2000,
        distanceStep: 340,
        maxDistance: 2100,
        zoomSpeed: 6,
        locateLimitX: 1450, // 标签定位到视图中心,限制X值（因限制移动边界，边界上的标签无法定位到视图中心，故限制了定位中心边界）
        locateLimitY: 120,  // 标签定位到视图中心,限制Y值（因限制移动边界，边界上的标签无法定位到视图中心，故限制了定位中心边界）
        labelShowLevelNum: 5 // 控制标签分级显示的分级数量
    };

    // 要素唯一标识
    const FID_META = {
        perimeter: 'perimeter