@realsee/dnalogel 0.1.7 → 2.0.0-alpha.3

package/libs/gltf-viewer/requestAnimationFrame.js

@@ -1,18 +0,0 @@
-"use strict";
-
-require("core-js/modules/es.object.define-property.js");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.requestAnimationFrame = void 0;
-
-require("core-js/modules/web.timers.js");
-
-var _window = window;
-
-var requestAnimationFrame = window.requestAnimationFrame || _window.mozRequestAnimationFrame || _window.webkitRequestAnimationFrame || _window.msRequestAnimationFrame || function (fn) {
-  return setTimeout(fn, 16);
-};
-
-exports.requestAnimationFrame = requestAnimationFrame;

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

@@ -1 +0,0 @@
-export declare function requestAnimationFrameInterval(fn: any, context?: any, args?: any[]): () => void;

package/libs/gltf-viewer/requestAnimationFrameInterval.js

@@ -1,31 +0,0 @@
-"use strict";
-
-require("core-js/modules/es.object.define-property.js");
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.requestAnimationFrameInterval = requestAnimationFrameInterval;
-
-require("core-js/modules/es.array.concat.js");
-
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
-var _requestAnimationFrame = require("./requestAnimationFrame");
-
-function requestAnimationFrameInterval(fn, context) {
-  var args = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
-  var stoped = false;
-
-  var _loop = function loop(time) {
-    if (fn) fn.call.apply(fn, [context, time].concat((0, _toConsumableArray2["default"])(args)));
-    if (!stoped && _loop) (0, _requestAnimationFrame.requestAnimationFrame)(_loop);
-  };
-
-  (0, _requestAnimationFrame.requestAnimationFrame)(_loop);
-  return function () {
-    _loop = null, stoped = true;
-  };
-}

package/libs/gltf-viewer/uuid.js

@@ -1,28 +0,0 @@
-"use strict";
-
-require("core-js/modules/es.object.define-property.js");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = uuid;
-
-require("core-js/modules/es.date.to-string.js");
-
-require("core-js/modules/es.object.to-string.js");
-
-require("core-js/modules/es.regexp.to-string.js");
-
-// uuid
-function S4() {
-  return ((1 + Math.random()) * 0x10000 | 0).toString(16).substring(1);
-}
-/**
- * 随机生成一个uuid值
- */
-
-
-function uuid() {
-  // then to call it, plus stitch in '4' in the third group
-  return (S4() + S4() + '-' + S4() + '-4' + S4().substr(0, 3) + '-' + S4() + '-' + S4() + S4() + S4()).toLowerCase();
-}

package/plugins/AutoPreloadPlugin/index.d.ts

@@ -1,23 +0,0 @@
-import { FivePlugin } from '@realsee/five';
-export declare type AutoPreloadPluginParameterType = {
-    /** 预加载使用的图片质量 */
-    preloadImageSize?: number;
-    /** 走点时，预加载的点位个数 */
-    preloadPanoIndexNumber?: number;
-    /** 走点时，是否使用预加载功能 */
-    shouldPreloadAroundPanoImage?: (panoIndex: number) => boolean | void;
-};
-export interface AutoPreloadPluginReturnType {
-    dispose: () => void;
-}
-/** 优化首点位加载的逻辑
- *
- * 1.进入 VR 时，如果 Five 默认的配置图片像素超过了 1024，先用 1024 加载
- * 第一个点位加载完成之后，再使用业务上配置的图片像素重复加载一遍当前点位
- *
- * 2.在走点时，会预载距离当前点位最近的 preloadPanoIndexNumber 个数的点
- * @description
- * 预载周围的点时，不会一次性全部预载。而是每隔1s，预载其中的一个点
- */
-declare const AutoPreloadPlugin: FivePlugin<AutoPreloadPluginParameterType, AutoPreloadPluginReturnType>;
-export default AutoPreloadPlugin;

package/plugins/AutoPreloadPlugin/index.js

@@ -1,111 +0,0 @@
-"use strict";
-
-require("core-js/modules/es.object.define-property.js");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-require("core-js/modules/web.timers.js");
-
-require("core-js/modules/es.array.splice.js");
-
-require("core-js/modules/es.array.from.js");
-
-require("core-js/modules/es.string.iterator.js");
-
-require("core-js/modules/es.array.iterator.js");
-
-require("core-js/modules/es.object.to-string.js");
-
-require("core-js/modules/es.set.js");
-
-require("core-js/modules/web.dom-collections.iterator.js");
-
-require("core-js/modules/es.array.map.js");
-
-require("core-js/modules/es.array.slice.js");
-
-require("core-js/modules/es.array.sort.js");
-
-require("core-js/modules/es.array.filter.js");
-
-var _nextFrame = require("../../shared-utils/nextFrame");
-
-/** 优化首点位加载的逻辑
- *
- * 1.进入 VR 时，如果 Five 默认的配置图片像素超过了 1024，先用 1024 加载
- * 第一个点位加载完成之后，再使用业务上配置的图片像素重复加载一遍当前点位
- *
- * 2.在走点时，会预载距离当前点位最近的 preloadPanoIndexNumber 个数的点
- * @description
- * 预载周围的点时，不会一次性全部预载。而是每隔1s，预载其中的一个点
- */
-var AutoPreloadPlugin = function AutoPreloadPlugin(five, parameters) {
-  var _parameters$preloadIm, _parameters$preloadPa;
-
-  var preloadImageSize = (_parameters$preloadIm = parameters === null || parameters === void 0 ? void 0 : parameters.preloadImageSize) !== null && _parameters$preloadIm !== void 0 ? _parameters$preloadIm : 1024;
-  var preloadPanoIndexNumber = (_parameters$preloadPa = parameters === null || parameters === void 0 ? void 0 : parameters.preloadPanoIndexNumber) !== null && _parameters$preloadPa !== void 0 ? _parameters$preloadPa : 4;
-  var lastSize = five.imageOptions.size;
-  var timer = void 0;
-
-  var doPreload = function doPreload(quene) {
-    if (quene.length === 0) return;
-    five.preloadPano(quene[0]);
-    if (quene.length === 1) return;
-    timer = setTimeout(function () {
-      return doPreload(quene.splice(1));
-    }, 1000);
-  };
-
-  var onPanoArrived = function onPanoArrived(panoIndex) {
-    if (parameters !== null && parameters !== void 0 && parameters.shouldPreloadAroundPanoImage) {
-      var shouldPreload = parameters.shouldPreloadAroundPanoImage(panoIndex);
-      if (!shouldPreload) return;
-    }
-
-    if (timer) clearTimeout(timer);
-    var currentIndex = panoIndex;
-    var currentObserver = five.work.observers[currentIndex];
-    var preloadIndexArray = Array.from(new Set(five.work.observers.filter(function (observer) {
-      return observer.floorIndex === currentObserver.floorIndex;
-    }).map(function (observer) {
-      var distance = observer.standingPosition.clone().distanceTo(currentObserver.standingPosition);
-      return {
-        observer: observer,
-        distance: distance
-      };
-    }).sort(function (a, b) {
-      return a.distance - b.distance;
-    }).slice(0, preloadPanoIndexNumber).map(function (_ref) {
-      var observer = _ref.observer;
-      return observer.panoIndex;
-    })));
-    doPreload(preloadIndexArray);
-  };
-
-  var onFirstPanoArrived = function onFirstPanoArrived(panoIndex) {
-    // 在第一次点位加载之后再做周围点位的预载，防止第一个点位周围的点预载两次
-    // 同时也防止阻塞第一个点的低分辨率图快速加载
-    five.on('panoArrived', onPanoArrived);
-    var shouldPreloadFirstPanoImage = five.imageOptions.size !== lastSize;
-    if (!shouldPreloadFirstPanoImage) return;
-    (0, _nextFrame.nextFrame)(function () {
-      five.imageOptions.size = lastSize;
-      five.moveToPano(panoIndex);
-    }, 5);
-  };
-
-  five.imageOptions.size = lastSize && lastSize > preloadImageSize ? preloadImageSize : lastSize;
-  if (five.imageOptions.size !== lastSize) five.once('panoArrived', onFirstPanoArrived);
-  return {
-    dispose: function dispose() {
-      five.off('panoArrived', onFirstPanoArrived);
-      five.off('panoArrived', onPanoArrived);
-    }
-  };
-};
-
-var _default = AutoPreloadPlugin;
-exports["default"] = _default;

package/plugins/CSS3DRenderPlugin/components/Marker/index.d.ts

@@ -1,12 +0,0 @@
-/// <reference types="react" />
-import './index.css';
-import { Vector3 } from 'three';
-declare type MarkerProps = {
-    color?: string;
-    point: Vector3;
-    face?: {
-        normal: Vector3;
-    } | null;
-};
-export default function Marker(props: MarkerProps): JSX.Element;
-export {};

package/plugins/CSS3DRenderPlugin/components/Marker/index.js

@@ -1,121 +0,0 @@
-"use strict";
-
-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["default"] = Marker;
-
-require("core-js/modules/es.date.to-string.js");
-
-require("core-js/modules/es.object.to-string.js");
-
-require("core-js/modules/es.regexp.to-string.js");
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _react = require("@realsee/five/react");
-
-var React = _interopRequireWildcard(require("react"));
-
-var THREE = _interopRequireWildcard(require("three"));
-
-require("./index.css");
-
-var _getRandomColor = _interopRequireDefault(require("../../../../shared-utils/getRandomColor"));
-
-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 Marker(props) {
-  var color = React.useRef(props.color || (0, _getRandomColor["default"])());
-  var intersectMeshRef = React.useRef(new THREE.Mesh(new THREE.RingGeometry(0.04, 0.08, 32), new THREE.MeshBasicMaterial({
-    color: 0x12fffb,
-    opacity: 0,
-    side: THREE.DoubleSide,
-    transparent: true
-  })));
-  (0, _react.useFiveSceneEffect)(function (scene) {
-    scene.add(intersectMeshRef.current);
-    return function () {
-      return scene.remove(intersectMeshRef.current);
-    };
-  }, []);
-  var preject2d = (0, _react.useFiveProject2d)();
-
-  var _React$useState = React.useState({
-    left: 0,
-    top: 0,
-    matrix: '[1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]'
-  }),
-      _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
-      state = _React$useState2[0],
-      setState = _React$useState2[1];
-
-  var fresh = React.useCallback(function () {
-    var _props$point = props.point,
-        x = _props$point.x,
-        y = _props$point.y,
-        z = _props$point.z;
-    var vector2 = preject2d(new THREE.Vector3(x, y, z), false);
-    if (!vector2) return;
-    var left = vector2.x,
-        top = vector2.y;
-    var matrix;
-
-    if (props.face) {
-      var normal = props.face.normal.clone();
-      var positionVector = normal.clone().multiplyScalar(0.05);
-      var position = props.point.clone().add(positionVector);
-      intersectMeshRef.current.position.copy(position);
-      var lookAtVector = position.clone().add(positionVector);
-      intersectMeshRef.current.lookAt(lookAtVector);
-      matrix = intersectMeshRef.current.modelViewMatrix.clone().toArray().toString();
-    }
-
-    setState({
-      left: left,
-      top: top,
-      matrix: matrix
-    });
-  }, [props.point]);
-  React.useEffect(function () {
-    return fresh();
-  }, [props]);
-  (0, _react.useFiveEventCallback)('stateChange', function () {
-    return fresh();
-  });
-  (0, _react.useFiveEventCallback)('initAnimationEnded', function () {
-    return fresh();
-  });
-  return /*#__PURE__*/React.createElement("div", {
-    className: "Marker",
-    style: {
-      position: 'absolute',
-      left: state.left + 'px',
-      top: state.top + 'px',
-      borderColor: color.current
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "Marker-inner",
-    style: {
-      backgroundColor: color.current
-    }
-  }));
-}

package/plugins/CSS3DRenderPlugin/index.js

@@ -1,298 +0,0 @@
-"use strict";
-
-require("core-js/modules/es.array.iterator.js");
-
-require("core-js/modules/es.object.to-string.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["default"] = exports.CSS3DRenderPlugin = void 0;
-
-require("core-js/modules/es.array.map.js");
-
-require("core-js/modules/es.array.for-each.js");
-
-require("core-js/modules/es.array.find-index.js");
-
-require("core-js/modules/es.array.splice.js");
-
-require("core-js/modules/es.string.sub.js");
-
-require("core-js/modules/es.function.name.js");
-
-require("core-js/modules/web.dom-collections.for-each.js");
-
-var THREE = _interopRequireWildcard(require("three"));
-
-var _CSS3DRenderer = require("three/examples/jsm/renderers/CSS3DRenderer");
-
-var _evenNumber = _interopRequireDefault(require("../../shared-utils/math/evenNumber"));
-
-var _centerPoint = _interopRequireDefault(require("../../shared-utils/three/centerPoint"));
-
-var _transformPositionToVector = _interopRequireDefault(require("../../shared-utils/three/transformPositionToVector3"));
-
-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; }
-
-/**
- * **CSS3DRenderPlugin** 提供矩形区域（三维空间四个坐标点），你可以在此矩形区域中渲染 DOM 内容。
- * 实现原理参考[CSS3DRenderer](https://threejs.org/docs/index.html?q=CSS3D#examples/en/renderers/CSS3DRenderer)。
- *
- * @returns
- */
-var CSS3DRenderPlugin = function CSS3DRenderPlugin(five) {
-  var state = {
-    disposeCallbacks: []
-  };
-
-  var create3DDomContainer = function create3DDomContainer() {
-    var _five$model, _five$model2, _config$autoRender;
-
-    for (var _len = arguments.length, params = new Array(_len), _key = 0; _key < _len; _key++) {
-      params[_key] = arguments[_key];
-    }
-
-    var points = params[0].map(function (point) {
-      return point instanceof THREE.Vector3 ? point : (0, _transformPositionToVector["default"])(point);
-    });
-    var config = params[1];
-    if ((points === null || points === void 0 ? void 0 : points.length) < 4) return console.error('points must be equal or greater than than 4');
-    if (!(five !== null && five !== void 0 && (_five$model = five.model) !== null && _five$model !== void 0 && _five$model.loaded)) return console.error('five.model.loaded is: ', five === null || five === void 0 ? void 0 : (_five$model2 = five.model) === null || _five$model2 === void 0 ? void 0 : _five$model2.loaded);
-    var fiveElement = five.getElement();
-    if (!fiveElement) return console.error('five.getElement() is ' + fiveElement);
-    var disposers = [];
-    var ratio = (config === null || config === void 0 ? void 0 : config.ratio) || 0.00216;
-    if (ratio <= 0.00215) console.warn('if you need click css3DElement on safari, ratio must be greater than 0.00215');
-    var dpr = (config === null || config === void 0 ? void 0 : config.dpr) || 1;
-    var mode = (config === null || config === void 0 ? void 0 : config.mode) || 'front';
-    var autoRender = (_config$autoRender = config === null || config === void 0 ? void 0 : config.autoRender) !== null && _config$autoRender !== void 0 ? _config$autoRender : true;
-    var behindFiveContainer = (config === null || config === void 0 ? void 0 : config.behindFiveContainer) || fiveElement.parentElement || document.body;
-    var container = (config === null || config === void 0 ? void 0 : config.container) || document.createElement('div');
-    container.classList.add('__Dnalogel-plugin--CSS3DRenderPlugin'); // 获取css3DObject, 如果mode为behind的话，一起获取mesh
-
-    var _createObject = createObject(points, {
-      ratio: ratio,
-      dpr: dpr,
-      container: container,
-      mode: mode
-    }),
-        css3DObject = _createObject.css3DObject,
-        mesh = _createObject.mesh; // ======= INIT START =======
-
-
-    var resizeObserver;
-    var frontModeUnInited = mode === 'front' && !state.frontMode;
-    var behindModeUnInited = mode === 'behind' && !state.behindMode;
-    var inited = !(frontModeUnInited || behindModeUnInited);
-    var stopRenderFlag = false;
-    var requestAnimationFrameId = null;
-
-    if (behindModeUnInited) {
-      state.behindMode = {
-        scene: new THREE.Scene(),
-        css3DRenderer: new _CSS3DRenderer.CSS3DRenderer()
-      };
-    }
-
-    if (frontModeUnInited) {
-      state.frontMode = {
-        scene: new THREE.Scene(),
-        css3DRenderer: new _CSS3DRenderer.CSS3DRenderer()
-      };
-    }
-
-    var _ref = mode === 'behind' ? state.behindMode : state.frontMode,
-        scene = _ref.scene,
-        css3DRenderer = _ref.css3DRenderer;
-
-    var render = function () {
-      if (!inited) {
-        var css3DRendererSetSize = function css3DRendererSetSize() {
-          var rendererWidth = (0, _evenNumber["default"])(fiveElement.clientWidth);
-          var rendererHeight = (0, _evenNumber["default"])(fiveElement.clientHeight);
-          css3DRenderer.setSize(rendererWidth, rendererHeight);
-        };
-
-        css3DRendererSetSize();
-        resizeObserver = new ResizeObserver(css3DRendererSetSize);
-        css3DRenderer.domElement.style.position = 'absolute';
-        css3DRenderer.domElement.style.top = '0';
-        css3DRenderer.domElement.style.userSelect = 'none';
-        css3DRenderer.domElement.style.pointerEvents = 'none';
-
-        var renderEveryFrame = function renderEveryFrame() {
-          if (stopRenderFlag) return;
-          requestAnimationFrameId = requestAnimationFrame(renderEveryFrame);
-          css3DRenderer.render(scene, five.camera);
-        };
-
-        return function () {
-          var _resizeObserver;
-
-          scene.add(css3DObject);
-          (_resizeObserver = resizeObserver) === null || _resizeObserver === void 0 ? void 0 : _resizeObserver.observe(fiveElement);
-          renderEveryFrame();
-
-          if (mode === 'behind' && mesh) {
-            five.scene.add(mesh);
-            disposers.push(function () {
-              return mesh && five.scene.remove(mesh);
-            });
-          }
-        };
-      } else {
-        return function () {
-          scene.add(css3DObject);
-        };
-      }
-    }();
-
-    if (frontModeUnInited) {
-      var wrapper = fiveElement.parentElement || document.body;
-      wrapper.appendChild(css3DRenderer.domElement);
-    }
-
-    if (behindModeUnInited) {
-      var _wrapper = behindFiveContainer;
-
-      _wrapper.appendChild(css3DRenderer.domElement);
-    } // ======= INIT END =======
-
-
-    var dispose = function dispose() {
-      stopRenderFlag = true;
-      disposers.forEach(function (d) {
-        return d === null || d === void 0 ? void 0 : d();
-      });
-      scene.remove(css3DObject);
-      if (typeof requestAnimationFrameId === 'number') cancelAnimationFrame(requestAnimationFrameId);
-
-      if (scene.children.length === 0) {
-        css3DRenderer.domElement.remove();
-        if (mode === 'front') state.frontMode = undefined;
-        if (mode === 'behind') state.behindMode = undefined;
-
-        if (!state.behindMode && !state.frontMode) {
-          var _resizeObserver2;
-
-          (_resizeObserver2 = resizeObserver) === null || _resizeObserver2 === void 0 ? void 0 : _resizeObserver2.unobserve(fiveElement);
-        }
-      }
-
-      return true;
-    };
-
-    var idx = state.disposeCallbacks.findIndex(function (item) {
-      return item === dispose;
-    });
-
-    if (idx !== -1) {
-      state.disposeCallbacks.splice(idx, 1);
-    } else {
-      state.disposeCallbacks.push(dispose);
-    }
-
-    console.log({
-      autoRender: autoRender
-    });
-    if (autoRender) render();
-    return {
-      container: container,
-      dispose: dispose,
-      css3DObject: css3DObject,
-      render: autoRender ? undefined : render
-    };
-  };
-
-  var createObject = function createObject(points, config) {
-    var ratio = config.ratio,
-        dpr = config.dpr,
-        element = config.container,
-        mode = config.mode;
-    var planeWidth = points[0].distanceTo(points[1]);
-    var planeHeight = points[1].distanceTo(points[2]);
-    var domWidthPx = (0, _evenNumber["default"])(planeWidth / ratio * dpr);
-    var domHeightPx = (0, _evenNumber["default"])(planeHeight / ratio * dpr);
-    var css3DObject = new _CSS3DRenderer.CSS3DObject(element);
-    css3DObject.scale.set(ratio, ratio, ratio);
-    element.style.width = domWidthPx + 'px';
-    element.style.height = domHeightPx + 'px';
-    element.style.pointerEvents = 'none';
-    var centerPosition = (0, _centerPoint["default"])(points[0], points[2]);
-    var vector01 = points[1].clone().sub(points[0]); // 点0 -> 点1 的向量
-
-    var vector12 = points[2].clone().sub(points[1]); // 点1 -> 点2 的向量
-    // 旋转
-
-    var rotateXAngle = new THREE.Vector3(0, 1, 0).angleTo(new THREE.Vector3(0, vector12.y, vector12.z));
-    var rotateYAngle = new THREE.Vector3(1, 0, 0).angleTo(new THREE.Vector3(vector01.x, 0, vector01.z));
-    var rotateZAngle = vector01.angleTo(new THREE.Vector3(vector01.x, 0, vector01.z));
-    /**
-     * [0,1,0] => [0,0,1]  为rolate Worldx正方向
-     * [0,0,1] => [0,1,0]  为rolate Worldy正方向
-     * [0,1,1] => [-1,0,0] 为rolate Worldz正方向
-     */
-
-    var rolateX = (vector12.z > 0 ? 1 : -1) * rotateXAngle;
-    var rolateY = (vector01.z < 0 ? 1 : -1) * rotateYAngle;
-    var rolateZ = (vector01.x > 0 && vector01.y < 0 || vector01.x < 0 && vector01.y > 0 ? -1 : 1) * rotateZAngle;
-    css3DObject.rotateOnWorldAxis(new THREE.Vector3(1, 0, 0), rolateX); // x
-
-    css3DObject.rotateOnWorldAxis(new THREE.Vector3(0, 1, 0), rolateY); // y
-
-    css3DObject.rotateOnWorldAxis(new THREE.Vector3(0, 0, 1), rolateZ); // z
-
-    css3DObject.position.set(centerPosition.x, centerPosition.y, centerPosition.z);
-    var mesh;
-
-    if (mode === 'behind') {
-      var material = new THREE.MeshBasicMaterial({
-        opacity: 0,
-        transparent: false,
-        side: THREE.DoubleSide
-      });
-      var geometry = new THREE.PlaneGeometry(domWidthPx, domHeightPx);
-      mesh = new THREE.Mesh(geometry, material);
-      mesh.name = 'CSS3DRenderPlugin-mesh';
-      mesh.position.copy(css3DObject.position);
-      mesh.rotation.copy(css3DObject.rotation);
-      mesh.scale.copy(css3DObject.scale);
-    }
-
-    return {
-      css3DObject: css3DObject,
-      mesh: mesh
-    };
-  };
-
-  return {
-    create3DDomContainer: create3DDomContainer,
-    disposeAll: function disposeAll() {
-      state.disposeCallbacks.forEach(function (d) {
-        return d === null || d === void 0 ? void 0 : d();
-      });
-      state.disposeCallbacks = [];
-    }
-  };
-};
-
-exports.CSS3DRenderPlugin = CSS3DRenderPlugin;
-var _default = CSS3DRenderPlugin;
-exports["default"] = _default;