基于threejs，完成一个简单的全景图播放器

直接上代码

CameraControls.js相机控制器

import * as THREE from 'three';

function CameraControls(object, domElement, cb, update) {
  this.object = object;

  this.domElement = domElement !== undefined ? domElement : document;

  this.enabled = true;

  this.lookSpeed = 0.1;

  this.activeLook = true;

  this.cameraFov = object.fov;

  this.minPolarAngle = 0; // radians

  this.maxPolarAngle = Math.PI; // radians

  this.minAzimuthAngle = -Infinity; // radians

  this.maxAzimuthAngle = Infinity; // radians

  const lookDirection = new THREE.Vector3();

  const target = new THREE.Vector3();

  const near = 40; //最小范围

  const far = object.fov; //最大范围

  // 只要无状态和旋转的两个状态。

  const STATE = {
    NONE: -1,

    ROTATE: 0,
  };

  let state = STATE.NONE;

  const rotateStart = new THREE.Vector2();

  const rotateEnd = new THREE.Vector2();

  const rotateDelta = new THREE.Vector2();

  const spherical = new THREE.Spherical();

  const sphericalDelta = new THREE.Spherical(); // 球面

  function rotateLeft(angle) {
    sphericalDelta.theta -= angle;
  }

  function rotateUp(angle) {
    sphericalDelta.phi += angle;
  }

  this.handleMouseDownRotate = function (event) {
    rotateStart.set(event.clientX, event.clientY);
  };

  this.handleMouseMoveRotate = function (event) {
    rotateEnd.set(event.clientX, event.clientY);

    rotateDelta

      .subVectors(rotateEnd, rotateStart)

      .multiplyScalar(this.lookSpeed);

    const element = this.domElement === document ? this.domElement.body : this.domElement;

    rotateLeft((2 * Math.PI * rotateDelta.x) / element.clientHeight); // yes, height

    rotateUp((2 * Math.PI * rotateDelta.y) / element.clientHeight);

    rotateStart.copy(rotateEnd);

    if (cb) cb();

    this.update();
  };

  //鼠标按下执行的事件

  this.onMouseDown = function (event) {
    if (this.enabled === false) return;

    event.preventDefault();

    event.stopPropagation();

    if (this.domElement !== d