@realsee/dnalogel 0.1.5 → 0.1.7

package/libs/gltf-viewer/index.d.ts

@@ -0,0 +1,55 @@
+import * as THREE from 'three';
+import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader';
+import { Subscribe } from './Subscribe';
+export interface GLTFViewerSize {
+    width?: number;
+    height?: number;
+}
+export interface GLTFViewerConfig {
+    antialias?: boolean;
+    backgroundColor?: THREE.Color;
+    backgroundHDR?: string;
+    pixelRatio?: number;
+    initial?: Partial<GLTFViewerState>;
+}
+export interface GLTFViewerState {
+    fov: number;
+    longitude: number;
+    latitude: number;
+}
+export declare type GLTFViewerEventMap = {
+    'stateChange'(state: GLTFViewerState): void;
+    'progressing'(progressing: number): void;
+    'willLoad'(): void;
+    'loaded'(gltf: GLTF): void;
+    'loadError'(error: ErrorEvent): void;
+};
+export declare class GLTFViewer extends Subscribe<GLTFViewerEventMap> {
+    uuid: string;
+    constructor(config: GLTFViewerConfig);
+    get state(): {
+        fov?: number;
+        latitude?: number;
+        longitude?: number;
+    };
+    set state({ fov, latitude, longitude }: {
+        fov?: number;
+        latitude?: number;
+        longitude?: number;
+    });
+    /**
+     *
+     * @param url glTF 模型CDN地址
+     */
+    load(url: string): void;
+    /**
+     * 挂载
+     * @param container
+     * @param size
+     */
+    appendTo(container: HTMLDivElement, size?: GLTFViewerSize): void;
+    /**
+     * 销毁
+     */
+    dispose(): void;
+}

package/libs/gltf-viewer/index.js

@@ -0,0 +1,650 @@
+"use strict";
+
+require("core-js/modules/es.reflect.construct.js");
+
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/es.string.iterator.js");
+
+require("core-js/modules/es.weak-map.js");
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+require("core-js/modules/es.object.define-property.js");
+
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GLTFViewer = void 0;
+
+require("core-js/modules/es.function.bind.js");
+
+require("core-js/modules/web.timers.js");
+
+require("core-js/modules/es.object.assign.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.promise.js");
+
+require("core-js/modules/es.date.to-string.js");
+
+require("core-js/modules/es.regexp.to-string.js");
+
+require("core-js/modules/es.number.is-integer.js");
+
+require("core-js/modules/es.number.constructor.js");
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var THREE = _interopRequireWildcard(require("three"));
+
+var _hammerjs = _interopRequireDefault(require("hammerjs"));
+
+var _GLTFLoader = require("three/examples/jsm/loaders/GLTFLoader");
+
+var _RGBELoader = require("three/examples/jsm/loaders/RGBELoader");
+
+var _coordsMoveByOffset = require("./coordsMoveByOffset");
+
+var _getFrameTime = require("./getFrameTime");
+
+var _formatRad = require("./formatRad");
+
+var _coordsToDirection = require("./coordsToDirection");
+
+var _mouseWheel = require("./mouseWheel");
+
+var _requestAnimationFrameInterval = require("./requestAnimationFrameInterval");
+
+var _uuid = _interopRequireDefault(require("./uuid"));
+
+var _Subscribe2 = require("./Subscribe");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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 _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+var defaultPos = {
+  longitude: 0,
+  latitude: -0.3,
+  fov: 35
+};
+var ERROR_NO_CONTROLLER = 'GLTFViewer 实例丢失';
+var loader = new _GLTFLoader.GLTFLoader();
+
+var Controller = /*#__PURE__*/function () {
+  function Controller(config, callbacks) {
+    var _this = this;
+
+    (0, _classCallCheck2["default"])(this, Controller);
+    (0, _defineProperty2["default"])(this, "fov", 35);
+    (0, _defineProperty2["default"])(this, "longitude", 0);
+    (0, _defineProperty2["default"])(this, "latitude", -0.3);
+    (0, _defineProperty2["default"])(this, "needsRender", false);
+    // 异步事件回调
+    this.callbacks = callbacks; // 默认状态参数
+
+    var initial = config.initial || {};
+
+    if (initial.fov !== undefined) {
+      this.fov = initial.fov;
+    }
+
+    if (initial.latitude !== undefined) {
+      this.latitude = initial.latitude;
+    }
+
+    if (initial.longitude !== undefined) {
+      this.longitude = initial.longitude;
+    } // 场景
+
+
+    this.scene = new THREE.Scene(); // 背景色值
+
+    if (config.backgroundColor) {
+      this.scene.background = config.backgroundColor;
+    } // 渲染器
+
+
+    this.renderer = new THREE.WebGLRenderer({
+      antialias: config.antialias,
+      alpha: true
+    });
+    this.renderer.outputEncoding = THREE.sRGBEncoding;
+    this.renderer.toneMapping = THREE.ReinhardToneMapping;
+    this.renderer.toneMappingExposure = 1.5;
+
+    if (config.backgroundColor) {
+      this.renderer.setClearColor(config.backgroundColor, 0);
+    } // 像素比
+
+
+    if (config.pixelRatio) {
+      this.renderer.setPixelRatio(config.pixelRatio);
+    } // 相机
+
+
+    this.camera = new THREE.PerspectiveCamera(this.fov, 1, 0.1, 10000); // 光照
+
+    this.pointLight = new THREE.PointLight(0xfffffff, 0.9, 10000);
+    this.scene.add(this.pointLight);
+    this.directionLight = new THREE.DirectionalLight(0xfffffff, 0.1);
+    this.directionLight.position.setY(-1);
+    this.scene.add(this.directionLight); // 背景 HDR
+
+    if (config.backgroundHDR) {
+      var pmremGenerator = new THREE.PMREMGenerator(this.renderer);
+      var rgbLoader = new _RGBELoader.RGBELoader();
+      rgbLoader.setDataType(THREE.UnsignedByteType);
+      rgbLoader.load(config.backgroundHDR, function (hdrEquirect) {
+        var hdrCubeRenderTarget = pmremGenerator.fromEquirectangular(hdrEquirect);
+        _this.scene.environment = hdrCubeRenderTarget.texture;
+
+        if (config.backgroundColor) {
+          _this.scene.background = hdrCubeRenderTarget.texture;
+        }
+
+        hdrEquirect.dispose();
+        pmremGenerator.dispose();
+        _this.needsRender = true;
+      });
+      pmremGenerator.compileEquirectangularShader();
+    }
+
+    this.__interiaMovement = false;
+    var hammerManager = new _hammerjs["default"].Manager(this.element);
+    hammerManager.add(new _hammerjs["default"].Pan({
+      threshold: 0,
+      pointers: 0
+    }));
+    hammerManager.add(new _hammerjs["default"].Pinch({
+      threshold: 0,
+      pointers: 2
+    }).recognizeWith(hammerManager.get('pan')));
+    hammerManager.on('panstart pan', this.__onPanGesture.bind(this));
+    hammerManager.on('pinchstart pinch pinchend', this.__onPinchGesture.bind(this));
+
+    var __onMouseWheel = this.__onMouseWheel.bind(this);
+
+    (0, _mouseWheel.addMouseWheel)(this.element, __onMouseWheel);
+
+    this.dispose = function () {
+      hammerManager.destroy();
+      (0, _mouseWheel.removeMouseWheel)(_this.element, __onMouseWheel);
+
+      _this.clear();
+
+      _this.renderer.dispose(); // delete this.dispose
+
+    };
+
+    this.needsRender = true;
+    this.play();
+  }
+
+  (0, _createClass2["default"])(Controller, [{
+    key: "pause",
+    value: function pause() {}
+  }, {
+    key: "clear",
+    value: function clear() {
+      if (this.target) {
+        this.scene.remove(this.target.scene); // disposeObject(this.target)
+
+        this.update(defaultPos);
+        this.target = undefined;
+      }
+    }
+  }, {
+    key: "play",
+    value: function play() {
+      var _this2 = this;
+
+      this.pause();
+
+      var _render = function _render() {
+        if (_this2.needsRender !== false) _this2.render();
+        _this2.needsRender = false;
+      };
+
+      this.pause = (0, _requestAnimationFrameInterval.requestAnimationFrameInterval)(_render);
+
+      _render();
+    }
+  }, {
+    key: "setTarget",
+    value: function setTarget(object) {
+      var _this3 = this;
+
+      if (this.target) {
+        this.scene.remove(this.target.scene);
+      }
+
+      this.target = object;
+      this.target.scene.visible = false;
+      this.scene.add(this.target.scene);
+      setTimeout(function () {
+        if (object === _this3.target) {
+          _this3.target.scene.visible = true;
+
+          _this3.update(defaultPos);
+        }
+      }, 50);
+    }
+  }, {
+    key: "element",
+    get: function get() {
+      return this.renderer.domElement;
+    }
+  }, {
+    key: "appendTo",
+    value: function appendTo(container, size) {
+      container.appendChild(this.element);
+      this.refresh(size);
+      var positionType = window.getComputedStyle(container).position;
+
+      if (positionType !== 'relative' && positionType !== 'absolute' && positionType !== 'fixed' && positionType !== 'sticky') {
+        container.style.position = 'relative';
+      }
+    }
+  }, {
+    key: "refresh",
+    value: function refresh() {
+      var size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      var element = this.element;
+      var container = element.parentElement;
+      if (!container) return;
+
+      if (container && container.tagName && container.nodeName) {
+        var _size$width = size.width,
+            width = _size$width === void 0 ? container.offsetWidth : _size$width,
+            _size$height = size.height,
+            height = _size$height === void 0 ? container.offsetHeight : _size$height;
+        this.renderer.setSize(width, height); // 修改摄像机 aspect 比值
+
+        this.camera.aspect = width / height;
+        this.camera.updateProjectionMatrix();
+      }
+
+      this.needsRender = true;
+    }
+  }, {
+    key: "update",
+    value: function update(state) {
+      var fov = this.fov;
+      var longitude = this.longitude;
+      var latitude = this.latitude;
+
+      if (state.fov !== undefined) {
+        fov = state.fov;
+      }
+
+      if (state.longitude !== undefined) {
+        longitude = state.longitude;
+      }
+
+      if (state.latitude !== undefined) {
+        latitude = state.latitude;
+      }
+
+      var center = new THREE.Vector3();
+      var box = new THREE.Box3();
+
+      if (this.target) {
+        box.expandByObject(this.target.scene);
+        box.getCenter(center);
+      }
+
+      longitude = (0, _formatRad.formatRad)(longitude);
+      latitude = Math.max(-Math.PI / 2 + 0.01, Math.min(+Math.PI / 2, latitude));
+      var distance = Math.max(center.distanceTo(box.min), center.distanceTo(box.max));
+      var direction = (0, _coordsToDirection.coordsToDirection)({
+        longitude: longitude,
+        latitude: latitude
+      });
+      direction.setLength(distance * 3);
+      this.camera.position.copy(center.clone().add(direction));
+      this.camera.lookAt(center);
+      var lightDirection = (0, _coordsToDirection.coordsToDirection)({
+        longitude: longitude,
+        latitude: -Math.PI / 6
+      });
+      lightDirection.setLength(distance * 3);
+      this.pointLight.position.copy(center.clone().add(lightDirection));
+
+      if (fov !== this.fov) {
+        fov = Math.max(25, Math.min(60, fov));
+        this.camera.fov = fov;
+        this.camera.updateProjectionMatrix();
+      }
+
+      var needsRender = this.fov !== fov || this.longitude !== longitude || this.latitude !== latitude;
+      Object.assign(this, {
+        longitude: longitude,
+        latitude: latitude,
+        fov: fov
+      });
+      this.needsRender = true;
+
+      if (needsRender) {
+        this.callbacks.stateChange({
+          longitude: longitude,
+          latitude: latitude,
+          fov: fov
+        });
+      }
+    }
+  }, {
+    key: "__onPanGesture",
+    value: function __onPanGesture(event) {
+      var _this4 = this;
+
+      this.__interiaMovement = false;
+      var longitude = this.longitude,
+          latitude = this.latitude;
+      var center = event.center,
+          isFinal = event.isFinal,
+          velocityX = event.velocityX,
+          velocityY = event.velocityY,
+          pointers = event.pointers;
+
+      var offset = function () {
+        if (!(_this4.__lastPanPoint && _this4.__lastPanPoint.pointerLength === pointers.length)) {
+          return {
+            x: 0,
+            y: 0
+          };
+        }
+
+        return {
+          x: center.x - _this4.__lastPanPoint.x,
+          y: center.y - _this4.__lastPanPoint.y
+        };
+      }();
+
+      if (!isFinal) {
+        var layout = {
+          width: this.element.offsetWidth,
+          height: this.element.offsetHeight
+        };
+        this.update((0, _coordsMoveByOffset.coordsMoveByOffset)({
+          longitude: longitude,
+          latitude: latitude
+        }, offset, layout));
+        this.__lastPanPoint = {
+          pointerLength: pointers.length,
+          x: center.x,
+          y: center.y
+        };
+      } else {
+        delete this.__lastPanPoint;
+        (0, _getFrameTime.getFrameTime)(function (frameTime) {
+          _this4.__interiaMovement = true;
+          var x = velocityX * frameTime;
+          var y = velocityY * frameTime;
+          var distance = Math.sqrt(x * x + y * y);
+
+          if (distance > 100) {
+            x = x / distance * 100;
+            y = y / distance * 100;
+          } // 滑动小于上下15度, 忽略 y 值
+
+
+          if (Math.abs(y / x) < Math.tan(20 / 180 * Math.PI)) y = 0;
+
+          _this4.__requestInteriaMovement({
+            x: x,
+            y: y
+          });
+        });
+      }
+    }
+  }, {
+    key: "__onPinchGesture",
+    value: function __onPinchGesture(event) {
+      this.__interiaMovement = false;
+      var scale = event.scale,
+          type = event.type;
+
+      if (type === 'pinchstart') {
+        this.__pinchCurrentFov = this.fov;
+        return;
+      }
+
+      if (type === 'pinchend') {
+        this.__pinchCurrentFov = undefined;
+        return;
+      }
+
+      this.update({
+        fov: (this.__pinchCurrentFov || 0) / scale
+      });
+    }
+  }, {
+    key: "__requestInteriaMovement",
+    value: function __requestInteriaMovement(offset) {
+      var _this5 = this;
+
+      if (this.__interiaMovement === false) return;
+      var x = offset.x,
+          y = offset.y;
+      var longitude = this.longitude,
+          latitude = this.latitude;
+      var friction = 0.9;
+      var layout = {
+        width: this.element.offsetWidth,
+        height: this.element.offsetHeight
+      };
+      this.update((0, _coordsMoveByOffset.coordsMoveByOffset)({
+        longitude: longitude,
+        latitude: latitude
+      }, {
+        x: x,
+        y: y
+      }, layout));
+      var notFinal = Math.abs(x) > 1 || Math.abs(y) > 1;
+
+      if (notFinal) {
+        requestAnimationFrame(function () {
+          return _this5.__requestInteriaMovement({
+            x: x * friction,
+            y: y * friction * 0.7
+          });
+        });
+      } else {
+        this.__interiaMovement = false;
+      }
+    }
+  }, {
+    key: "__onMouseWheel",
+    value: function __onMouseWheel(event) {
+      this.__interiaMovement = false;
+      this.update({
+        fov: this.fov - event.delta
+      });
+    }
+  }, {
+    key: "load",
+    value: function load(url) {
+      var _this6 = this;
+
+      return new Promise(function (resolve, reject) {
+        _this6.callbacks.willLoad();
+
+        loader.load(url, function (gltf) {
+          _this6.setTarget(gltf);
+
+          _this6.callbacks.loaded(gltf);
+
+          resolve(true);
+        }, function (xhr) {
+          _this6.callbacks.progressing(xhr.loaded / xhr.total * 100);
+        }, function (error) {
+          _this6.callbacks.loadError(error);
+
+          reject(error);
+        });
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      this.renderer.render(this.scene, this.camera);
+    }
+  }]);
+  return Controller;
+}();
+
+var caches = {};
+
+var GLTFViewer = /*#__PURE__*/function (_Subscribe) {
+  (0, _inherits2["default"])(GLTFViewer, _Subscribe);
+
+  var _super = _createSuper(GLTFViewer);
+
+  function GLTFViewer(config) {
+    var _this7;
+
+    (0, _classCallCheck2["default"])(this, GLTFViewer);
+    _this7 = _super.call(this);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this7), "uuid", (0, _uuid["default"])());
+    var controller = new Controller(config, {
+      stateChange: function stateChange(state) {
+        return _this7.emit('stateChange', state);
+      },
+      progressing: function (_progressing) {
+        function progressing(_x) {
+          return _progressing.apply(this, arguments);
+        }
+
+        progressing.toString = function () {
+          return _progressing.toString();
+        };
+
+        return progressing;
+      }(function (progressing) {
+        return _this7.emit('progressing', progressing);
+      }),
+      willLoad: function willLoad() {
+        return _this7.emit('willLoad');
+      },
+      loaded: function loaded(gltf) {
+        return _this7.emit('loaded', gltf);
+      },
+      loadError: function loadError(error) {
+        return _this7.emit('loadError', error);
+      }
+    });
+    caches[_this7.uuid] = controller;
+    controller.appendTo;
+    controller.load;
+    return _this7;
+  }
+
+  (0, _createClass2["default"])(GLTFViewer, [{
+    key: "state",
+    get: function get() {
+      var controller = caches[this.uuid];
+      if (!controller) throw new Error(ERROR_NO_CONTROLLER);
+      var proxy = new Proxy({
+        fov: controller.fov,
+        latitude: controller.latitude,
+        longitude: controller.longitude
+      }, {
+        set: function set(obj, prop, value) {
+          if (prop === 'fov') {
+            if (!Number.isInteger(value)) {
+              throw new TypeError('The fov is not an number');
+            }
+
+            if (value > 60 || value < 20) {
+              throw new RangeError('The fov seems invalid~ fov: [20, 60]');
+            }
+          }
+
+          controller.update((0, _defineProperty2["default"])({}, prop, value));
+          return true;
+        },
+        get: function get(obj, prop) {
+          return controller[prop];
+        }
+      });
+      return proxy;
+    },
+    set: function set(_ref) {
+      var fov = _ref.fov,
+          latitude = _ref.latitude,
+          longitude = _ref.longitude;
+      var controller = caches[this.uuid];
+      if (!controller) throw new Error(ERROR_NO_CONTROLLER);
+      controller.update({
+        fov: fov === undefined ? controller.fov : fov,
+        latitude: latitude === undefined ? controller.latitude : latitude,
+        longitude: longitude === undefined ? controller.longitude : longitude
+      });
+    }
+    /**
+     * 
+     * @param url glTF 模型CDN地址
+     */
+
+  }, {
+    key: "load",
+    value: function load(url) {
+      var controller = caches[this.uuid];
+      if (!controller) throw new Error(ERROR_NO_CONTROLLER);
+      controller.load(url);
+    }
+    /**
+     * 挂载
+     * @param container 
+     * @param size 
+     */
+
+  }, {
+    key: "appendTo",
+    value: function appendTo(container, size) {
+      var controller = caches[this.uuid];
+      if (!controller) throw new Error(ERROR_NO_CONTROLLER);
+      controller.appendTo(container, size);
+    }
+    /**
+     * 销毁
+     */
+
+  }, {
+    key: "dispose",
+    value: function dispose() {
+      var controller = caches[this.uuid];
+      if (!controller) throw new Error(ERROR_NO_CONTROLLER);
+      if (controller.dispose) controller.dispose();
+      delete caches[this.uuid];
+    }
+  }]);
+  return GLTFViewer;
+}(_Subscribe2.Subscribe);
+
+exports.GLTFViewer = GLTFViewer;

package/libs/gltf-viewer/mouseWheel.d.ts

@@ -0,0 +1,2 @@
+export declare function addMouseWheel(element: Element, fn: any): void;
+export declare function removeMouseWheel(element: Element, fn: any): void;