react-xrplayer/lib/manager/XRPlayerManager.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.default = void 0;

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

var _InnerViewControls = _interopRequireDefault(require("../controls/InnerViewControls"));

var _SpriteShapeHelper = _interopRequireDefault(require("../display/SpriteShapeHelper"));

var _CenterModelHelper = _interopRequireDefault(require("../display/CenterModelHelper"));

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

var _ViewConvertHelper = _interopRequireDefault(require("../action/ViewConvertHelper"));

var _TextureHelper = _interopRequireDefault(require("../texture/TextureHelper"));

var _SpriteParticleHelper = _interopRequireDefault(require("../display/SpriteParticleHelper"));

var _VRHelper = _interopRequireDefault(require("./VRHelper"));

var _TextHelper = _interopRequireDefault(require("./content_Insert_Helper/TextHelper"));

var _CameraMoveAction = _interopRequireDefault(require("../action/CameraMoveAction"));

var _HotSpotHelper = _interopRequireDefault(require("../display/HotSpotHelper"));

var _CameraTween = require("../controls/CameraTween");

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 XRPlayerManager = function XRPlayerManager(mount, initProps, handler) {
  var _this = this;

  _classCallCheck(this, XRPlayerManager);

  _defineProperty(this, "init", function () {
    _this.initCamera();

    _this.initScene();

    _this.initRenderer();

    _this.initVR();

    _this.animate(0);
  });

  _defineProperty(this, "initCamera", function () {
    var _this$props = _this.props,
        camera_fov = _this$props.camera_fov,
        camera_far = _this$props.camera_far,
        camera_near = _this$props.camera_near,
        position = _this$props.camera_position,
        target = _this$props.camera_target;
    var camera = new THREE.PerspectiveCamera(camera_fov, _this.mount.clientWidth / _this.mount.clientHeight, camera_near, camera_far);
    var renderer = new THREE.WebGLRenderer({
      antialias: true
    });
    _this.renderer = renderer;
    camera.position.set(position.x, position.y, position.z);
    camera.target = new THREE.Vector3(target.x, target.y, target.z);
    _this.camera = camera;
    _this.innerViewControls = new _InnerViewControls.default(_this.camera);
  });

  _defineProperty(this, "initScene", function () {
    var _this$props2 = _this.props,
        textureResource = _this$props2.scene_texture_resource,
        isAxesHelperDisplay = _this$props2.axes_helper_display;
    var _textureResource$pano = textureResource.panoramic_type,
        panoramic_type = _textureResource$pano === void 0 ? '360' : _textureResource$pano,
        _textureResource$radi = textureResource.radius,
        radius = _textureResource$radi === void 0 ? 500 : _textureResource$radi,
        _textureResource$heig = textureResource.height,
        height = _textureResource$heig === void 0 ? 1000 : _textureResource$heig;
    _this.sceneContainer = document.getElementById('video');
    var geometry;

    if (panoramic_type === '180') {
      geometry = new THREE.CylinderGeometry(radius, radius, height, 40, 40, true); // 球体
    } else {
      geometry = new THREE.SphereBufferGeometry(radius, 80, 40); // 球体
    }

    geometry.scale(-1, 1, 1);
    _this.sceneTextureHelper = new _TextureHelper.default(_this.sceneContainer);

    _this.sceneTextureHelper.onCanPlayHandler = function (resUrl) {
      return _this.handler('sence_res_ready', {
        resUrl: resUrl
      });
    };

    var texture = _this.sceneTextureHelper.loadTexture(textureResource);

    var material = new THREE.MeshBasicMaterial({
      map: texture
    });
    _this.sceneMesh = new THREE.Mesh(geometry, material);
    _this.scene = new THREE.Scene();

    _this.scene.add(_this.sceneMesh);

    if (isAxesHelperDisplay) {
      var axisHelper = new THREE.AxesHelper(1000); //每个轴的长度

      _this.scene.add(axisHelper);
    }

    _this.scene.add(_this.camera);
  });

  _defineProperty(this, "initRenderer", function () {
    var renderer = _this.renderer;
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(_this.mount.clientWidth, _this.mount.clientHeight);
    renderer.sortObjects = false;
    renderer.autoClear = false;

    _this.mount.appendChild(renderer.domElement);
  });

  _defineProperty(this, "initVR", function () {
    _this.vrHelper = new _VRHelper.default(_this.renderer, _this.camera);

    _this.vrHelper.setObjectInteractionHandler(function (pickedObject) {
      if (!!pickedObject) {
        var key = pickedObject.name;

        _this.emitEvent(key, function () {
          _this.closeEffectContainer();
        });
      }
    });
  });

  _defineProperty(this, "animate", function (time) {
    requestAnimationFrame(_this.animate);
    if (_this.cameraTweenStatus.num === 0) _this.innerViewControls && _this.innerViewControls.update();

    if (_this.centerModelHelper) {
      _this.centerModelHelper.update();
    }

    if (_this.spriteParticleHelper) {
      _this.spriteParticleHelper.update();
    }

    if (_this.cameraTweenStatus.paused === false) _tween.default.update(); // 不要轻易去掉，渐变动画依赖该库

    if (_this.vrHelper.vrStatus) {
      time *= 0.001;

      if (_this.spriteShapeHelper) {
        var objects = _this.spriteShapeHelper.getPointObjects();

        _this.vrHelper.updateInteractionObjects(objects, time);
      }

      _this.vrHelper.render(_this.scene, _this.camera);
    } else {
      _this.renderer.render(_this.scene, _this.camera);
    }

    if (_this.hotSpotHelper) {
      _this.hotSpotHelper.update();
    }

    if (_this.spriteShapeHelper) {
      _this.spriteShapeHelper.update();
    }
  });

  _defineProperty(this, "setGlobalMuted", function (muted) {
    _this.handler('global_muted', {
      muted: muted
    });
  });

  _defineProperty(this, "setGlobalVolume", function (volume) {
    _this.handler('global_volume', {
      volume: volume
    });
  });

  _defineProperty(this, "setSenceResource", function (res) {
    _this.sceneTextureHelper && _this.sceneTextureHelper.unloadResource();
    _this.sceneTextureHelper = new _TextureHelper.default(_this.sceneContainer);

    var texture = _this.sceneTextureHelper.loadTexture(res);

    var material = new THREE.MeshBasicMaterial({
      map: texture
    });
    _this.sceneMesh.material = material;
  });

  _defineProperty(this, "startDisplaySenceResource", function () {
    if (_this.sceneTextureHelper) {
      _this.sceneTextureHelper.startDisplay();
    }
  });

  _defineProperty(this, "pauseDisplaySenceResource", function () {
    if (_this.sceneTextureHelper) {
      _this.sceneTextureHelper.pauseDisplay();
    }
  });

  _defineProperty(this, "getEnableAutoRotate", function () {
    return _this.innerViewControls.getEnableAutoRotate();
  });

  _defineProperty(this, "setEnableAutoRotate", function (enable) {
    _this.innerViewControls.setEnableAutoRotate(enable);
  });

  _defineProperty(this, "setAutoRotateSpeed", function (speed) {
    _this.innerViewControls.setAutoRotateSpeed(speed);
  });

  _defineProperty(this, "setAutoRotateDirection", function (direction) {
    _this.innerViewControls.setAutoRotateDirection(direction);
  });

  _defineProperty(this, "resetHotSpotsData", function () {
    if (!_this.spriteShapeHelper) {
      _this.spriteEventList = new Map();
      _this.spriteShapeHelper = new _SpriteShapeHelper.default(_this.scene, _this.camera, _this.renderer, _this.mount);
    } else {
      _this.spriteEventList.clear();
    }
  });

  _defineProperty(this, "setHotSpots", function (hot_spot_list, event_list) {
    _this.resetHotSpotsData();

    _this.spriteEventList = new Map(event_list);

    _this.spriteShapeHelper.setHotSpotList(hot_spot_list);

    _this.spriteShapeHelper.objectClickHandler = function (intersects) {
      var key = intersects[0].object.name;

      _this.emitEvent(key, function () {
        _this.closeEffectContainer();
      });
    };

    _this.spriteShapeHelper.tagClickHandler = function (key) {
      _this.emitEvent(key, function () {
        _this.closeEffectContainer();
      });
    };
  });

  _defineProperty(this, "addHotSpot", function (hot_spot, event) {
    _this.spriteShapeHelper.addHotSpot(hot_spot);

    if (event != null && !_this.spriteEventList.has(event.key)) {
      _this.spriteEventList.set(event.key, event.value);
    }
  });

  _defineProperty(this, "removeHotSpot", function (hot_spot_key) {
    _this.spriteShapeHelper.removeHotSpot(hot_spot_key);
  });

  _defineProperty(this, "setIsTipVisible", function (enable) {
    _this.spriteShapeHelper.setIsTipVisible(enable);
  });

  _defineProperty(this, "setHotSpotClickable", function (enable) {
    _this.spriteShapeHelper.setHotSpotClickable(enable);
  });

  _defineProperty(this, "resetModels", function () {
    if (!_this.centerModelHelper) {
      _this.centerModelHelper = new _CenterModelHelper.default(_this.scene);
    }
  });

  _defineProperty(this, "setModels", function (model_list) {
    _this.resetModels();

    _this.centerModelHelper.loadModelList(model_list);
  });

  _defineProperty(this, "addModel", function (model_key, model) {
    _this.centerModelHelper.loadModel(model_key, model);
  });

  _defineProperty(this, "removeModel", function (model_key) {
    _this.centerModelHelper.removeModel(model_key);
  });

  _defineProperty(this, "removeAllModel", function () {
    _this.centerModelHelper.removeAllModel();
  });

  _defineProperty(this, "toNormalView", function () {
    var durtime = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 8000;
    var delay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;

    if (!_this.viewConvertHelper) {
      _this.viewConvertHelper = new _ViewConvertHelper.default(_this.camera, _this.innerViewControls);
    }

    _this.innerViewControls.disConnect();

    _this.viewConvertHelper.toNormalView(durtime, delay);
  });

  _defineProperty(this, "toPlanetView", function () {
    var durtime = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 8000;
    var delay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;

    if (!_this.viewConvertHelper) {
      _this.viewConvertHelper = new _ViewConvertHelper.default(_this.camera, _this.innerViewControls);
    }

    _this.innerViewControls.disConnect();

    _this.viewConvertHelper.toPlanetView(durtime, delay);
  });

  _defineProperty(this, "moveCameraTo", function (descPos, onStart, onEnd) {
    var duration = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 5000;
    var cameraMoveAction = new _CameraMoveAction.default(_this.camera, descPos, duration, 0);

    cameraMoveAction.onStartHandler = function () {
      _this.innerViewControls && _this.innerViewControls.disConnect();
      onStart && onStart();
    };

    cameraMoveAction.onCompleteHandler = function () {
      _this.innerViewControls && _this.innerViewControls.connect();
      onEnd && onEnd();
    };

    cameraMoveAction.start();
  });

  _defineProperty(this, "connectCameraControl", function () {
    _this.innerViewControls.connect();
  });

  _defineProperty(this, "disConnectCameraControl", function () {
    _this.innerViewControls.disConnect();
  });

  _defineProperty(this, "getEnableOrientationControls", function () {
    return _this.innerViewControls.getEnableOrientationControls();
  });

  _defineProperty(this, "enableOrientationControls", function () {
    _this.innerViewControls.enableOrientationControls();
  });

  _defineProperty(this, "disableOrientationControls", function () {
    _this.innerViewControls.disableOrientationControls();
  });

  _defineProperty(this, "getCameraPosition", function () {
    return _this.innerViewControls.getCameraPosition();
  });

  _defineProperty(this, "setCameraPosition", function (x, y, z) {
    _this.innerViewControls.setCameraPosition(x, y, z);
  });

  _defineProperty(this, "setCameraFov", function (fov) {
    _this.innerViewControls.setCameraFov(fov);
  });

  _defineProperty(this, "getCameraFov", function () {
    return _this.innerViewControls.getCameraFov();
  });

  _defineProperty(this, "enableChangeFov", function (enable) {
    _this.innerViewControls.enableChangeFov(enable);
  });

  _defineProperty(this, "setFovVerticalScope", function (bottom, top) {
    _this.innerViewControls.setFovVerticalScope(bottom, top);
  });

  _defineProperty(this, "getFovVerticalScope", function () {
    return _this.innerViewControls.getFovVerticalScope();
  });

  _defineProperty(this, "setFovHorizontalScope", function (left, right) {
    _this.innerViewControls.setFovHorizontalScope(left, right);
  });

  _defineProperty(this, "getFovHorizontalScope", function () {
    return _this.innerViewControls.getFovHorizontalScope();
  });

  _defineProperty(this, "setParticleEffectRes", function (res) {
    if (!_this.spriteParticleHelper) {
      _this.spriteParticleHelper = new _SpriteParticleHelper.default(_this.scene);
    }

    _this.spriteParticleHelper.setResource(res);
  });

  _defineProperty(this, "getEnableParticleDisplay", function () {
    return _this.spriteParticleHelper.getEnableDisplay();
  });

  _defineProperty(this, "enableParticleDisplay", function (enable) {
    if (enable) {
      _this.spriteParticleHelper.enableDisplay();
    } else {
      _this.spriteParticleHelper.disableDisplay();
    }
  });

  _defineProperty(this, "changeVRStatus", function () {
    if (_this.vrHelper.vrStatus) {
      _this.vrHelper.disable();

      _this.renderer.setViewport(0, 0, _this.mount.clientWidth, _this.mount.clientHeight);
    } else {
      _this.vrHelper.enable();
    }
  });

  _defineProperty(this, "createTextBox", function (params) {
    var TextBox = new _TextHelper.default(params);
    TextBox.addTo(_this.scene);
    return TextBox;
  });

  _defineProperty(this, "showTextBox", function (TextBox) {
    if (!!!TextBox) return;
    TextBox.show();
  });

  _defineProperty(this, "hideTextBox", function (TextBox) {
    if (!!!TextBox) return;
    TextBox.hide();
  });

  _defineProperty(this, "changeTextBox", function (TextBox, params) {
    if (!!!TextBox) return;
    TextBox.removeFrom(_this.scene);
    TextBox.setMessage(params);
    TextBox.addTo(_this.scene);
  });

  _defineProperty(this, "removeTextBox", function (TextBox) {
    if (TextBox === undefined) return;
    TextBox.removeFrom(_this.scene);
  });

  _defineProperty(this, "addIcon", function (img, position, name, title, width, height) {
    if (!_this.hotSpotHelper) {
      _this.hotSpotHelper = new _HotSpotHelper.default(_this.scene, _this.mount, _this.camera);
    }

    var x = position.x,
        y = position.y,
        z = position.z;

    _this.hotSpotHelper.markIcon(img, new THREE.Vector3(x, y, z), name, title, width, height);
  });

  _defineProperty(this, "removeIcon", function (name) {
    _this.hotSpotHelper.removeIcon(name);
  });

  _defineProperty(this, "addIcons", function (iconList) {
    _this.hotSpotHelper.addIcons(iconList);
  });

  _defineProperty(this, "removeAllIcons", function () {
    _this.hotSpotHelper.removeAllIcons();
  });

  _defineProperty(this, "initAudio", function () {
    if (!_this.audio) {
      _this.audio = document.createElement("audio");
      _this.audio.preload = "metadata";
      document.body.appendChild(_this.audio);

      _this.audio.onended = function () {
        console.log('audio', "播放结束");
      };
    }
  });

  _defineProperty(this, "setAudioSrc", function (src) {
    _this.audio.setAttribute("src", src);
  });

  _defineProperty(this, "getAudioSrc", function () {
    return _this.audio.currentSrc;
  });

  _defineProperty(this, "setAudioVolume", function (volume) {
    // 0 到 1
    _this.audio.volume = volume;
  });

  _defineProperty(this, "getAudioVolume", function () {
    return _this.audio.volume;
  });

  _defineProperty(this, "setAudioMuted", function (muted) {
    // true 或 false
    _this.audio.muted = muted;
  });

  _defineProperty(this, "getAudioMuted", function () {
    return _this.audio.muted;
  });

  _defineProperty(this, "getAudioPaused", function () {
    return _this.audio.paused;
  });

  _defineProperty(this, "pauseAudio", function () {
    _this.audio.pause();
  });

  _defineProperty(this, "playAudio", function () {
    _this.audio.play();
  });

  _defineProperty(this, "playAudioRes", function (src) {
    _this.setAudioSrc(src);

    _this.audio.play();
  });

  _defineProperty(this, "replayAudio", function () {
    _this.audio.currentTime = 0;
  });

  _defineProperty(this, "endAudio", function () {
    _this.audio.currentTime = _this.audio.duration;
  });

  _defineProperty(this, "createCameraTweenGroup", function (animationList, loop) {
    if (!!!loop) {
      loop = false;
    }

    var cameraTweens = [];
    animationList.forEach(function (item, index) {
      var animation = _this.createCameraAnimation(item);

      cameraTweens.push(animation);
    });
    var cameraTweenGroup = new _CameraTween.CameraTweenGroup(cameraTweens, 100, _this.innerViewControls);

    cameraTweenGroup.onCameraAnimationEnded = function (key) {
      _this.onCameraAnimationEnded && _this.onCameraAnimationEnded(key);
    };

    cameraTweenGroup.onCameraAnimationStart = function (key) {
      _this.onCameraAnimationStart && _this.onCameraAnimationStart(key);
    };

    cameraTweenGroup.onCameraAnimationStop = function (key) {
      _this.onCameraAnimationStop && _this.onCameraAnimationStop(key);
    };

    _this.cameraTweenGroup = cameraTweenGroup;
    return cameraTweenGroup;
  });

  _defineProperty(this, "createCameraAnimation", function (params) {
    //因为存在入场动画，导致设置相机动画时distance是450，这里直接改为100
    var cameraTween = new _CameraTween.CameraTween(params, _this.camera, 100, _this.innerViewControls, _this.cameraTweenStatus);
    cameraTween.key = params.key;
    return cameraTween;
  });

  _defineProperty(this, "setCameraTweenGroup", function (cameraTweenGroup) {
    _this.cameraTweenGroup = cameraTweenGroup;
  });

  _defineProperty(this, "getCameraTweenGroup", function () {
    return _this.cameraTweenGroup;
  });

  _defineProperty(this, "startCameraTweenGroup", function (time) {
    if (!_this.cameraTweenGroup) {
      return;
    }

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

  _defineProperty(this, "stopCameraTweenGroup", function () {
    _this.cameraTweenGroup && _this.cameraTweenGroup.stop();
  });

  _defineProperty(this, "pauseCameraTweenGroup", function () {
    _this.cameraTweenGroup && _this.cameraTweenGroup.pause();
  });

  _defineProperty(this, "playCameraTweenGroup", function () {
    _this.cameraTweenGroup && _this.cameraTweenGroup.play();
  });

  _defineProperty(this, "nextCameraTween", function () {
    _this.cameraTweenGroup && _this.cameraTweenGroup.next();
  });

  _defineProperty(this, "enableCameraTweenGroupAutoNext", function (enable) {
    _this.cameraTweenGroup.enableAutoNext(enable);
  });

  _defineProperty(this, "enableCameraTweenGroupLoop", function (enable) {
    _this.cameraTweenGroup.enableLoop(enable);
  });

  _defineProperty(this, "emitEvent", function (eventKey) {
    var callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {};

    if (_this.spriteEventList && _this.spriteEventList.has(eventKey)) {
      var data = _this.spriteEventList.get(eventKey);

      _this.handler(data.type, {
        data: data
      }, function () {
        callback();
      });
    } else {
      callback();
    }
  });

  _defineProperty(this, "closeEffectContainer", function () {
    _this.handler('close_effect_container');
  });

  _defineProperty(this, "onWindowResize", function (mountWidth, mountHeight) {
    _this.camera.aspect = mountWidth / mountHeight;

    _this.camera.updateProjectionMatrix();

    _this.renderer.setSize(mountWidth, mountHeight);
  });

  _defineProperty(this, "destroy", function () {
    _this.mount.removeChild(_this.renderer.domElement);

    _this.sceneTextureHelper && _this.sceneTextureHelper.unloadResource();
  });

  this.mount = mount; // Threejs渲染挂载节点

  this.props = initProps; // 初始化参数

  this.handler = handler;
  this.scene = null;
  this.sceneMesh = null;
  this.camera = null;
  this.renderer = null;
  this.controls = null;
  this.sceneContainer = null; // 全景背景挂载节点

  this.sceneTextureHelper = null; //全景场景纹理加载控制器

  this.innerViewControls = null;
  this.spriteShapeHelper = null;
  this.spriteParticleHelper = null; // 粒子展示

  this.centerModelHelper = null;
  this.viewConvertHelper = null;
  this.spriteEventList = null;
  this.hotSpotHelper = null;
  this.vrHelper = null; // audio related

  this.audio = document.createElement("audio");
  this.audio.preload = "metadata";
  document.body.appendChild(this.audio); // camera animation related

  this.cameraTweenStatus = {
    num: 0,
    paused: false
  };
  this.cameraTweenGroup = null;
  this.onCameraAnimationEnded = null;
  this.init();
};

var _default = XRPlayerManager;
exports.default = _default;