react-xrplayer/lib/controls/CameraTween.js

An excellent xr player for react

"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.CameraTweenGroup = exports.CameraTween = void 0;

var THREE = _interopRequireWildcard(require("three"));

var _tween = _interopRequireDefault(require("@tweenjs/tween.js"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var CameraTween = function CameraTween(tweenParams, camera, cameraDistance, cameraControl) {
  var _this = this;

  _classCallCheck(this, CameraTween);

  _defineProperty(this, "init", function (params) {
    _this.duration = params.duration;
    _this.easing = params.easing;
    _this.pos0 = {};
    _this.pos1 = {};
    Object.assign(_this.pos0, params.pos0);
    Object.assign(_this.pos1, params.pos1);
    _this.tween = new _tween.default.Tween(_this.pos0).to(_this.pos1, params.duration);

    _this.tween.onStart(function () {
      _this.started = true;
      _this.startTime = new Date().getTime();
      _this.onCameraAnimationStart && _this.onCameraAnimationStart(_this.key);
    });

    _this.tween.onComplete(function () {
      _this.onCameraAnimationEnded && _this.onCameraAnimationEnded(_this.key);

      _this.reset();

      _this.started = false;
    });

    _this.tween.onStop(function () {
      _this.onCameraAnimationStop && _this.onCameraAnimationStop(_this.key);

      _this.reset();

      _this.started = false;
    });

    if (params.hasOwnProperty("easing")) {
      var easing = _this.getEasingFunc(params.easing);

      _this.tween.easing(easing);
    }

    if (_this.pos0.hasOwnProperty("x")) {
      _this.posType = 1;
    }

    if (_this.pos0.hasOwnProperty("fov")) {
      _this.fovChange = true;
    }

    if (_this.pos0.hasOwnProperty("distance")) {
      _this.disChange = true;
    }

    var cameraTween = _this;

    _this.tween.onUpdate(function (pos) {
      if (cameraTween.posType === 0) {
        if (!_this.disChange) {
          pos.distance = _this.distance;
        }

        var newPos = cameraTween.spherical2Cartesian(pos.lat, pos.lon, pos.distance);
        cameraTween.camera.position.x = newPos.x;
        cameraTween.camera.position.y = newPos.y;
        cameraTween.camera.position.z = newPos.z;
      } else {
        cameraTween.camera.position.x = pos.x;
        cameraTween.camera.position.y = pos.y;
        cameraTween.camera.position.z = pos.z;
      }

      if (cameraTween.fovChange) {
        cameraTween.camera.fov = pos.fov;

        _this.camera.updateProjectionMatrix();
      }

      cameraTween.camera.lookAt(cameraTween.camera.target);
    });
  });

  _defineProperty(this, "getEasingFunc", function (name) {
    switch (name) {
      case 'InOut':
        return _tween.default.Easing.Sinusoidal.InOut;

      case 'In':
        return _tween.default.Easing.Sinusoidal.In;

      case 'Out':
        return _tween.default.Easing.Sinusoidal.Out;

      default:
        return _tween.default.Easing.Sinusoidal.InOut;
    }
  });

  _defineProperty(this, "spherical2Cartesian", function (lat, lon, distance) {
    var pos = {
      x: 0,
      y: 0,
      z: 0
    };
    lat = Math.max(_this.fovDownEdge, Math.min(_this.fovTopEdge, lat));
    var phi = THREE.Math.degToRad(90 - lat);
    var theta = THREE.Math.degToRad(lon);
    pos.x = distance * Math.sin(phi) * Math.cos(theta);
    pos.y = distance * Math.cos(phi);
    pos.z = distance * Math.sin(phi) * Math.sin(theta);
    return pos;
  });

  _defineProperty(this, "start", function (time) {
    if (_this.started) {
      return;
    }

    if (!!!time) _this.tween.start();else {
      _this.tween.start(time);
    }
  });

  _defineProperty(this, "stop", function () {
    _this.tween.stop();
  });

  _defineProperty(this, "chain", function (cameraTween) {
    _this.tween.chain(cameraTween.tween);
  });

  this.key = 0;
  this.pos0 = null;
  this.pos1 = null;
  this.duration = null;
  this.easing = null;
  this.tween = null;
  this.camera = camera;
  this.distance = cameraDistance;
  this.fovDownEdge = cameraControl.fovDownEdge;
  this.fovTopEdge = cameraControl.fovTopEdge;
  this.reset = cameraControl.initSphericalData; //动画结束后视角停在结束的位置，不会回到之前的位置

  this.started = false; //在start之后stop之前调用start会导致不会调用onStop，无法使用相机控制

  this.startTime = 0;
  this.endTime = 0;
  this.posType = 0; // 0 采用经纬度， 1 采用xyz

  this.fovChange = false; //是否涉及fov的改变

  this.disChange = false; //是否涉及distance的改变

  this.onCameraAnimationEnded = null; // 动画结束后回调

  this.onCameraAnimationStop = null;
  this.onCameraAnimationStart = null;
  this.init(tweenParams);
};

exports.CameraTween = CameraTween;

var CameraTweenGroup = function CameraTweenGroup(cameraTweens, distance, cameraControl) {
  var _this2 = this;

  _classCallCheck(this, CameraTweenGroup);

  _defineProperty(this, "init", function () {
    _this2.initCallback();
  });

  _defineProperty(this, "initAutoNext", function () {
    for (var i = 0; i < _this2.len - 1; i++) {
      _this2.cameraTweens[i].chain(_this2.cameraTweens[i + 1]);
    }
  });

  _defineProperty(this, "initCallback", function () {
    _this2.cameraTweens.forEach(function (item, itemIndex) {
      item.onCameraAnimationEnded = function (key) {
        _this2.state = 'ready';
        _this2.onCameraAnimationEnded && _this2.onCameraAnimationEnded(key);
      };

      item.onCameraAnimationStart = function (key) {
        _this2.currentIndex = itemIndex;
        _this2.state = 'running';
        _this2.onCameraAnimationStart && _this2.onCameraAnimationStart(key);
      };

      item.onCameraAnimationStop = function (key) {
        if (_this2.state === 'stoped') {
          _this2.resetState();
        } else {
          _this2.state = 'paused';
        }

        _this2.onCameraAnimationStop && _this2.onCameraAnimationStop(key);
      };
    });
  });

  _defineProperty(this, "cancleAutoNext", function () {
    if (_this2.cameraTweens) {
      _this2.cameraTweens.forEach(function (item) {
        item.chain([]);
      });
    }
  });

  _defineProperty(this, "enableAutoNext", function (enable) {
    if (enable && !_this2.autoNext) {
      _this2.initAutoNext();
    } else if (_this2.autoNext && !enable) {
      _this2.cancleAutoNext();
    }
  });

  _defineProperty(this, "enableLoop", function (enable) {
    if (enable && !_this2.loop) {
      _this2.loop = enable;

      _this2.initLoop();
    } else if (_this2.loop && !enable) {
      _this2.cancleLoop();
    }
  });

  _defineProperty(this, "initLoop", function () {
    if (_this2.autoNext) {
      _this2.cameraTweens[_this2.len - 1].chain(_this2.cameraTweens[0]);
    }
  });

  _defineProperty(this, "cancleLoop", function () {
    if (_this2.autoNext) {
      _this2.cameraTweens[_this2.len - 1].chain([]);
    }
  });

  _defineProperty(this, "start", function () {
    var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;

    _this2.stop();

    _this2.currentIndex = index;

    _this2.cameraTweens[_this2.currentIndex].start();

    _this2.startTime = new Date().getTime();
  });

  _defineProperty(this, "stop", function () {
    if (_this2.state === 'running') {
      _this2.state = 'stoped';

      _this2.cameraTweens[_this2.currentIndex].stop();
    } else {
      _this2.resetState();
    }
  });

  _defineProperty(this, "resetState", function () {
    _this2.currentIndex = 0;
    _this2.state = 'ready';
    _this2.playTween = null;
  });

  _defineProperty(this, "pause", function () {
    if (_this2.state !== 'running') return;
    _this2.pauseTime = new Date().getTime();
    var duration = _this2.cameraTweens[_this2.currentIndex].duration + _this2.startTime - _this2.pauseTime;
    var nowTween = _this2.cameraTweens[_this2.currentIndex]; //当前tween

    if (_this2.playTween) {
      //仍然在原来的PlayTween里面
      var oldPlayTween = _this2.playTween;

      _this2.createPlayTween(oldPlayTween, duration);

      oldPlayTween.stop();
    } else {
      _this2.createPlayTween(_this2.cameraTweens[_this2.currentIndex], duration);

      _this2.outOfPlayTween = false;
      nowTween.stop();
    } //连接后继tween


    if (_this2.currentIndex + 1 < _this2.len) {
      _this2.playTween.chain(_this2.cameraTweens[_this2.currentIndex + 1]);
    } else if (_this2.loop) {
      _this2.playTween.chain(_this2.cameraTweens[0]);
    }
  });

  _defineProperty(this, "createPlayTween", function (Tween, duration) {
    //记录断点信息
    var nowTween = Tween;
    var pos0 = null;

    if (nowTween.posType === 0) {
      //暂停的是经纬度
      pos0 = _this2.cameraControl.initSphericalData();

      while (pos0.lon > 180) {
        pos0.lon -= 360;
      }

      while (pos0.lon < -180) {
        pos0.lon += 360;
      }

      if (nowTween.fovChange) {
        pos0.fov = _this2.cameraControl.camera.fov;
      }

      if (nowTween.disChange) {
        pos0.distance = _this2.cameraControl.distance;
      }
    } else {
      //xyz
      pos0 = {
        x: _this2.cameraControl.camera.position.x,
        y: _this2.cameraControl.camera.position.y,
        z: _this2.cameraControl.camera.position.z
      };

      if (nowTween.fovChange) {
        pos0.fov = _this2.cameraControl.camera.fov;
      }

      if (nowTween.disChange) {
        pos0.distance = _this2.cameraControl.distance;
      }
    } //创建新tween


    _this2.playTween = new CameraTween({
      pos0: pos0,
      pos1: nowTween.pos1,
      duration: duration,
      easing: nowTween.easing
    }, _this2.cameraControl.camera, 100, _this2.cameraControl);

    _this2.playTween.onCameraAnimationEnded = function () {
      nowTween.onCameraAnimationEnded();
      _this2.playTween = null;
    };

    _this2.playTween.onCameraAnimationStart = nowTween.onCameraAnimationStart;

    _this2.playTween.onCameraAnimationStop = function () {
      nowTween.onCameraAnimationStop();
    };
  });

  _defineProperty(this, "play", function () {
    if (_this2.state === 'paused') {
      _this2.playTween && _this2.playTween.start();
      _this2.startTime = new Date().getTime() + _this2.startTime - _this2.pauseTime;
    }
  });

  _defineProperty(this, "next", function () {
    _this2.currentIndex++;

    if (_this2.currentIndex >= _this2.cameraTweens.length) {
      _this2.currentIndex = 0;
    }

    _this2.start(_this2.currentIndex);
  });

  _defineProperty(this, "prev", function () {
    _this2.currentIndex--;

    if (_this2.currentIndex < 0) {
      _this2.currentIndex = _this2.cameraTweens.length - 1;
    }

    _this2.start(_this2.currentIndex);
  });

  this.cameraTweens = cameraTweens;
  this.cameraControl = cameraControl;
  this.distance = distance;
  this.autoNext = false;
  this.playTween = null;
  this.loop = false;
  this.len = cameraTweens.length;
  this.state = 'ready'; // ready, running, stop, paused

  this.currentIndex = 0;
  this.onCameraAnimationEnded = null;
  this.onCameraAnimationStart = null;
  this.onCameraAnimationStop = null;
  this.startTime = 0;
  this.pauseTime = 0;
  this.init();
};

exports.CameraTweenGroup = CameraTweenGroup;