@realsee/dnalogel 0.1.1 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@realsee/dnalogel",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Realsee Components(React) & Plugins(Five).",
   "author": "BEIKE REALSEE TECHNOLOGY (HK) LIMITED",
   "peerDependencies": {

package/plugins/CSS3DRenderPlugin/index.d.ts

@@ -1,36 +1,35 @@
 import { FivePlugin } from '@realsee/five';
 import { Vector3 } from 'three';
 import { CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer';
-export interface CSS3DRenderPluginParameterType {
-}
+export declare type CSS3DRenderPluginParameterType = undefined;
 export interface CSS3DRenderPluginExportType {
     /**
      * @description: 根据传入的四个点位创建一个3d dom容器，可以通过ReactDom.render()的方式将react组件放到容器中
      * @param {Five} five
      * @param {Vector3[]} points: 矩形四个点坐标
-     * @param {HTMLElement} container: HTMLElement
      * @param {number} config.ratio: 1px对应多少米，默认为 0.002，即1px对应2mm
      * @param {number} config.dpr: dpr, 默认为1
+     * @param {HTMLElement} config.container: HTMLElement
      * @param {number} config.autoRender: 默认为true，如果需要手动render则传false
      * @param {'front' | 'behind'} config.mode: 两种模式
-     * @param {HTMLElement} config.behindFiveContainer: 如果config.mode为'behind'，需要传入容器，并确保此容器的层级小于five层级
+     * @param {HTMLElement} config.behindFiveContainer: 如果config.mode为'behind'，需要传入容器，并确保此容器位five下方，且中间没有其他dom元素遮挡
      * @return {{ container: HTMLElement; dispose: () => void }}: container: dom容器, dispose: 清理函数
      */
-    create3DDomContainer: (points: [Vector3, Vector3, Vector3, Vector3], container?: HTMLElement, config?: {
+    create3DDomContainer: (points: Vector3[], config?: {
         ratio?: number;
         dpr?: number;
         autoRender?: boolean;
+        container?: HTMLElement;
+        [key: string]: any;
+    } & ({
         mode?: 'front';
     } | {
-        ratio?: number;
-        dpr?: number;
-        autoRender?: boolean;
         mode: 'behind';
         behindFiveContainer: HTMLElement;
-    }) => {
+    })) => {
         container: HTMLElement;
         dispose: () => void;
-        object: CSS3DObject;
+        css3DObject: CSS3DObject;
         render?: () => void;
     } | void;
     /**

package/plugins/CSS3DRenderPlugin/index.js

@@ -21,55 +21,184 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 _objectDestructuringEmpty(obj) { if (obj == null) throw new TypeError("Cannot destructure undefined"); }
-
 /**
  * **CSS3DRenderPlugin** 提供矩形区域（三维空间四个坐标点），你可以在此矩形区域中渲染 DOM 内容。
  * 实现原理参考[CSS3DRenderer](https://threejs.org/docs/index.html?q=CSS3D#examples/en/renderers/CSS3DRenderer)。
  *
  * @returns
  */
-var CSS3DRenderPlugin = function CSS3DRenderPlugin(five, _ref) {
-  _objectDestructuringEmpty(_ref);
-
+var CSS3DRenderPlugin = function CSS3DRenderPlugin(five) {
   var state = {
     disposeCallbacks: []
   };
 
-  var create3DDomContainer = function create3DDomContainer(points, container, config) {
-    var _five$model;
+  var create3DDomContainer = function create3DDomContainer() {
+    var _five$model, _five$model2, _config$autoRender;
 
-    if ((points === null || points === void 0 ? void 0 : points.length) < 3) {
-      return console.error('points must be equal or greater than than 3');
+    for (var _len = arguments.length, params = new Array(_len), _key = 0; _key < _len; _key++) {
+      params[_key] = arguments[_key];
     }
 
-    if (!(five !== null && five !== void 0 && (_five$model = five.model) !== null && _five$model !== void 0 && _five$model.loaded)) {
-      var _five$model2;
+    var points = params[0],
+        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'); // 获取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;
+
+    var render = function render() {};
 
-      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);
+    if (behindModeUnInited) {
+      state.behindMode = {
+        scene: new THREE.Scene(),
+        css3DRenderer: new _CSS3DRenderer.CSS3DRenderer()
+      };
     }
 
-    var fiveElement = five.getElement();
+    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;
+
+    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);
+      };
+
+      render = function render() {
+        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 {
+      render = function render() {
+        scene.add(css3DObject);
+      };
+    }
 
-    if (!fiveElement) {
-      return console.error('five.getElement() is ' + fiveElement);
+    if (frontModeUnInited) {
+      var wrapper = fiveElement.parentElement || document.body;
+      wrapper.appendChild(css3DRenderer.domElement);
     }
 
-    var disposers = [];
-    var ratio = (config === null || config === void 0 ? void 0 : config.ratio) || 0.002; // 0.72 / 354   0.72m宽的窗户，UI稿上是354像素
+    if (behindModeUnInited) {
+      var _wrapper = behindFiveContainer;
 
-    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 === null || config === void 0 ? void 0 : config.autoRender) || true;
-    var behindFiveContainer = (config === null || config === void 0 ? void 0 : config.behindFiveContainer) || fiveElement.parentElement || document.body;
+      _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 css3DScene = new THREE.Scene();
-    var element = container || document.createElement('div');
-    var object = new _CSS3DRenderer.CSS3DObject(element);
-    object.scale.set(ratio, ratio, ratio);
+    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';
@@ -91,14 +220,13 @@ var CSS3DRenderPlugin = function CSS3DRenderPlugin(five, _ref) {
     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;
-    object.rotateOnWorldAxis(new THREE.Vector3(1, 0, 0), rolateX); // x
+    css3DObject.rotateOnWorldAxis(new THREE.Vector3(1, 0, 0), rolateX); // x
 
-    object.rotateOnWorldAxis(new THREE.Vector3(0, 1, 0), rolateY); // y
+    css3DObject.rotateOnWorldAxis(new THREE.Vector3(0, 1, 0), rolateY); // y
 
-    object.rotateOnWorldAxis(new THREE.Vector3(0, 0, 1), rolateZ); // z
+    css3DObject.rotateOnWorldAxis(new THREE.Vector3(0, 0, 1), rolateZ); // z
 
-    object.position.set(centerPosition.x, centerPosition.y, centerPosition.z);
-    css3DScene.add(object);
+    css3DObject.position.set(centerPosition.x, centerPosition.y, centerPosition.z);
     var mesh;
 
     if (mode === 'behind') {
@@ -110,105 +238,22 @@ var CSS3DRenderPlugin = function CSS3DRenderPlugin(five, _ref) {
       var geometry = new THREE.PlaneGeometry(domWidthPx, domHeightPx);
       mesh = new THREE.Mesh(geometry, material);
       mesh.name = 'CSS3DRenderPlugin-mesh';
-      mesh.position.copy(object.position);
-      mesh.rotation.copy(object.rotation);
-      mesh.scale.copy(object.scale);
-    }
-
-    var css3DRenderer = new _CSS3DRenderer.CSS3DRenderer();
-
-    var css3DRendererSetSize = function css3DRendererSetSize() {
-      var rendererWidth = (0, _evenNumber["default"])(fiveElement.clientWidth);
-      var rendererHeight = (0, _evenNumber["default"])(fiveElement.clientHeight);
-      css3DRenderer.setSize(rendererWidth, rendererHeight);
-    };
-
-    css3DRendererSetSize();
-    var resizeObserver = new ResizeObserver(css3DRendererSetSize);
-    css3DRenderer.domElement.style.position = 'absolute';
-    css3DRenderer.domElement.style.top = '0';
-    css3DRenderer.domElement.style.userSelect = 'none';
-    css3DRenderer.domElement.style.pointerEvents = 'none';
-
-    if (mode === 'front') {
-      var wrapper = fiveElement.parentElement || document.body;
-      wrapper.appendChild(css3DRenderer.domElement);
-    } else {
-      var _wrapper = behindFiveContainer;
-
-      _wrapper.appendChild(css3DRenderer.domElement);
-    }
-
-    var stopRenderFlag = false;
-    var requestAnimationFrameId = null;
-
-    var dispose = function dispose() {
-      stopRenderFlag = true;
-
-      try {
-        disposers.forEach(function (d) {
-          return d === null || d === void 0 ? void 0 : d();
-        });
-        element.remove();
-
-        if (typeof requestAnimationFrameId === 'number') {
-          cancelAnimationFrame(requestAnimationFrameId);
-        }
-
-        css3DScene.remove(object);
-        css3DScene.dispose();
-        css3DRenderer.domElement.remove();
-        resizeObserver.unobserve(fiveElement);
-        return true;
-      } catch (e) {
-        console.warn('error:', e);
-      }
-
-      return false;
-    };
-
-    var idx = state.disposeCallbacks.findIndex(function (item) {
-      return item === dispose;
-    });
-
-    if (idx !== -1) {
-      state.disposeCallbacks.splice(idx, 1);
-    } else {
-      state.disposeCallbacks.push(dispose);
+      mesh.position.copy(css3DObject.position);
+      mesh.rotation.copy(css3DObject.rotation);
+      mesh.scale.copy(css3DObject.scale);
     }
 
-    var renderEveryFrame = function renderEveryFrame() {
-      if (stopRenderFlag) return;
-      requestAnimationFrameId = requestAnimationFrame(renderEveryFrame);
-      css3DRenderer.render(css3DScene, five.camera);
-    };
-
-    var render = function render() {
-      resizeObserver.observe(fiveElement);
-      renderEveryFrame();
-
-      if (mode === 'behind' && mesh) {
-        five.scene.add(mesh);
-        disposers.push(function () {
-          return mesh && five.scene.remove(mesh);
-        });
-      }
-    };
-
-    if (autoRender) render();
     return {
-      container: element,
-      dispose: dispose,
-      object: object,
-      render: autoRender ? undefined : render
+      css3DObject: css3DObject,
+      mesh: mesh
     };
   };
 
   return {
     create3DDomContainer: create3DDomContainer,
     disposeAll: function disposeAll() {
-      state.disposeCallbacks.forEach(function (dispose) {
-        return dispose === null || dispose === void 0 ? void 0 : dispose();
+      state.disposeCallbacks.forEach(function (d) {
+        return d === null || d === void 0 ? void 0 : d();
       });
       state.disposeCallbacks = [];
     }

package/plugins/TreasurePlugin/Controller.d.ts

@@ -1,6 +1,7 @@
 import * as THREE from 'three';
 import { Five, Subscribe } from '@realsee/five';
 import { TREASURE_TYPE } from './constants';
+import { TreasureObject } from './TreasureObject';
 export declare type TreasureObjectAssetMap = Map<string, Promise<THREE.Group>>;
 /** 对每个宝箱实例的配置 */
 export interface TreasurePluginItemConfigData {
@@ -37,29 +38,36 @@ export interface TreasurePluginData {
 export declare type TreasurePluginParameterType = undefined;
 export declare type TreasurePluginEvents = {
     /** 点击宝箱事件
-     * @param id: 宝箱 ID
+     * @param params.id: 宝箱 ID
      */
     tap: (params: {
         id: string;
     }) => void;
-    /** 宝箱打开的动画执行完毕 */
+    /** 宝箱打开的动画执行完毕
+     * @param params.id: 宝箱 ID
+     */
     openAnimationEnded: (params: {
         id: string;
     }) => void;
 };
 export declare class TreasurePluginController {
-    hooks: Subscribe<TreasurePluginEvents>;
+    readonly hooks: Subscribe<TreasurePluginEvents>;
+    readonly treasures: TreasureObject[];
     private five;
     private selfGroup;
-    private treasures;
     private textureLoader;
     private modelLoader;
     constructor(five: Five);
-    load(data: TreasurePluginData): Promise<boolean>;
-    dispose(): void;
+    load(data: TreasurePluginData, options?: {
+        appendTreasuresAfterLoaded?: boolean;
+    }): Promise<TreasureObject[]>;
+    dispose: () => void;
+    appendChild(child: TreasureObject): TreasurePluginController;
+    appendChildByID(childID: string): TreasurePluginController;
+    getTreasureByID(id: string): TreasureObject | undefined;
     removeTreasureByID(id: string): boolean;
     private onTreasureClick;
-    private getTextureObjectParams;
+    private getTreasureObjectParams;
     private onTreasureOpenAnimationEnded;
     private getConfig;
 }

package/plugins/TreasurePlugin/Controller.js

@@ -75,13 +75,25 @@ var TreasurePluginController = /*#__PURE__*/function () {
 
     _defineProperty(this, "modelLoader", (0, _getExtraModelLoader.getExtraModelLoader)());
 
+    _defineProperty(this, "dispose", function () {
+      _this.modelLoader.dispose();
+
+      _this.textureLoader.dispose();
+
+      _this.five.scene.remove(_this.selfGroup);
+
+      _this.treasures.forEach(function (treasure) {
+        return treasure.dispose();
+      });
+    });
+
     _defineProperty(this, "onTreasureClick", function (id) {
       _this.hooks.emit('tap', {
         id: id
       });
     });
 
-    _defineProperty(this, "getTextureObjectParams", function (data) {
+    _defineProperty(this, "getTreasureObjectParams", function (data) {
       var config = _this.getConfig(data);
 
       var position = new THREE.Vector3().fromArray(Object.values(data.position));
@@ -108,22 +120,23 @@ var TreasurePluginController = /*#__PURE__*/function () {
     this.selfGroup = new THREE.Group();
     this.selfGroup.name = 'treasure-plugin-group';
     this.five.scene.add(this.selfGroup);
+    this.five.once('dispose', this.dispose);
   }
 
   _createClass(TreasurePluginController, [{
     key: "load",
     value: function () {
-      var _load = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(data) {
-        var _this$selfGroup;
+      var _load = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(data, options) {
+        var _this$treasures;
 
-        var _yield$to, _yield$to2, error, treasures;
+        var _yield$to, _yield$to2, error, treasures, appendTreasuresAfterLoaded, _this$selfGroup;
 
         return regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) {
             switch (_context.prev = _context.next) {
               case 0:
                 _context.next = 2;
-                return (0, _to["default"])(Promise.all(data.treasures.map(this.getTextureObjectParams).filter(_isNil.notNil).map(function (params) {
+                return (0, _to["default"])(Promise.all(data.treasures.map(this.getTreasureObjectParams).filter(_isNil.notNil).map(function (params) {
                   return new _TreasureObject.TreasureObject(params).load();
                 })));
 
@@ -141,12 +154,19 @@ var TreasurePluginController = /*#__PURE__*/function () {
                 throw error;
 
               case 8:
-                (_this$selfGroup = this.selfGroup).add.apply(_this$selfGroup, _toConsumableArray(treasures));
+                (_this$treasures = this.treasures).push.apply(_this$treasures, _toConsumableArray(treasures));
 
-                this.treasures = treasures;
-                return _context.abrupt("return", true);
+                appendTreasuresAfterLoaded = (options === null || options === void 0 ? void 0 : options.appendTreasuresAfterLoaded) || true;
 
-              case 11:
+                if (appendTreasuresAfterLoaded) {
+                  (_this$selfGroup = this.selfGroup).add.apply(_this$selfGroup, _toConsumableArray(treasures));
+
+                  this.five.needsRender = true;
+                }
+
+                return _context.abrupt("return", treasures);
+
+              case 12:
               case "end":
                 return _context.stop();
             }
@@ -154,19 +174,32 @@ var TreasurePluginController = /*#__PURE__*/function () {
         }, _callee, this);
       }));
 
-      function load(_x) {
+      function load(_x, _x2) {
         return _load.apply(this, arguments);
       }
 
       return load;
     }()
   }, {
-    key: "dispose",
-    value: function dispose() {
-      this.modelLoader.dispose();
-      this.textureLoader.dispose();
-      this.treasures.forEach(function (treasure) {
-        return treasure.dispose();
+    key: "appendChild",
+    value: function appendChild(child) {
+      this.selfGroup.add(child);
+      this.five.needsRender = true;
+      return this;
+    }
+  }, {
+    key: "appendChildByID",
+    value: function appendChildByID(childID) {
+      var treasure = this.getTreasureByID(childID);
+      if (!treasure) throw new Error('can not find treasure which has ID ' + childID);
+      this.appendChild(treasure);
+      return this;
+    }
+  }, {
+    key: "getTreasureByID",
+    value: function getTreasureByID(id) {
+      return this.treasures.find(function (treasure) {
+        return treasure.treasureID === id;
       });
     }
   }, {

package/plugins/TreasurePlugin/TreasureObject.d.ts

@@ -30,14 +30,24 @@ export declare class TreasureObject extends THREE.Object3D {
     private params;
     private faceAnime?;
     private openAnime?;
+    private modelGroupPromise;
     constructor(params: TreasureObjectParams);
+    load(): Promise<TreasureObject>;
+    show(params?: {
+        duration?: number;
+    }): Promise<boolean>;
+    hide(params?: {
+        duration?: number;
+    }): Promise<boolean>;
     /** 销毁当前宝箱实例
      * @description 注意 dispose 并不会销毁所使用的贴图，因为贴图会有共用关系，需要在最外层销毁
      */
     dispose(): void;
+    /** 旋转宝箱朝向用户 */
     rotateToCamera(): void;
-    private open;
-    load(): Promise<TreasureObject>;
+    /** 打开宝箱 */
+    open(): boolean;
+    private getModelPromise;
     private onFiveWantsTapGesture;
     private onFivePanoArrived;
 }

package/plugins/TreasurePlugin/TreasureObject.js

@@ -9,6 +9,8 @@ exports.TreasureObject = void 0;
 
 var THREE = _interopRequireWildcard(require("three"));
 
+var TWEEN = _interopRequireWildcard(require("@tweenjs/tween.js"));
+
 var _TreasureFaceAnime = require("./TreasureFaceAnime");
 
 var _TreasureOpenAnime = require("./TreasureOpenAnime");
@@ -86,6 +88,11 @@ var TreasureObject = /*#__PURE__*/function (_THREE$Object3D) {
 
     _defineProperty(_assertThisInitialized(_this), "opened", false);
 
+    _defineProperty(_assertThisInitialized(_this), "modelGroupPromise", Promise.resolve({
+      modelGroup: new THREE.Group(),
+      originGroup: new THREE.Group()
+    }));
+
     _defineProperty(_assertThisInitialized(_this), "onFiveWantsTapGesture", function (raycaster) {
       var _this$params$clickCal, _this$params;
 
@@ -117,12 +124,158 @@ var TreasureObject = /*#__PURE__*/function (_THREE$Object3D) {
 
     return _this;
   }
-  /** 销毁当前宝箱实例
-   * @description 注意 dispose 并不会销毁所使用的贴图，因为贴图会有共用关系，需要在最外层销毁
-   */
-
 
   _createClass(TreasureObject, [{
+    key: "load",
+    value: function () {
+      var _load = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+        var _this2 = this;
+
+        var _yield$this$modelGrou, modelGroup, originGroup;
+
+        return regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                this.modelGroupPromise = this.getModelPromise();
+                _context.next = 3;
+                return this.modelGroupPromise;
+
+              case 3:
+                _yield$this$modelGrou = _context.sent;
+                modelGroup = _yield$this$modelGrou.modelGroup;
+                originGroup = _yield$this$modelGrou.originGroup;
+                this.add(modelGroup); // ========== openAnime ==========
+
+                this.openAnime = new _TreasureOpenAnime.TreasurePluginOpenAnime({
+                  five: this.five,
+                  treasureGroup: modelGroup,
+                  onComplete: function onComplete() {
+                    var _this2$params$onOpenA, _this2$params;
+
+                    return (_this2$params$onOpenA = (_this2$params = _this2.params).onOpenAnimationEnded) === null || _this2$params$onOpenA === void 0 ? void 0 : _this2$params$onOpenA.call(_this2$params, _this2.treasureID);
+                  },
+                  animationClip: originGroup.animations[0]
+                }); // ========== faceAnime ==========
+
+                this.faceAnime = new _TreasureFaceAnime.TreasureFaceAnime({
+                  five: this.five,
+                  treasureGroup: modelGroup,
+                  loadTexture: this.params.loadTexture,
+                  textureUrls: this.params.config.faceAnimeTextureUrls
+                });
+                this.faceAnime.play(); // ========== addEventListener ==========
+
+                this.five.on('panoArrived', this.onFivePanoArrived);
+                this.five.on('wantsTapGesture', this.onFiveWantsTapGesture);
+                this.five.needsRender = true;
+                return _context.abrupt("return", this);
+
+              case 14:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee, this);
+      }));
+
+      function load() {
+        return _load.apply(this, arguments);
+      }
+
+      return load;
+    }()
+  }, {
+    key: "show",
+    value: function () {
+      var _show = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(params) {
+        var _params$duration,
+            _this3 = this;
+
+        var _yield$this$modelGrou2, modelGroup;
+
+        return regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                _context2.next = 2;
+                return this.modelGroupPromise;
+
+              case 2:
+                _yield$this$modelGrou2 = _context2.sent;
+                modelGroup = _yield$this$modelGrou2.modelGroup;
+                (0, _BetterTween.tweenProgress)().duration((_params$duration = params === null || params === void 0 ? void 0 : params.duration) !== null && _params$duration !== void 0 ? _params$duration : 300).easing(TWEEN.Easing.Quadratic.InOut).onUpdate(function (_ref) {
+                  var progress = _ref.progress;
+                  modelGroup.children.forEach(function (child) {
+                    var obj = child;
+                    obj.material && (obj.material.opacity = progress);
+                    _this3.five.needsRender = true;
+                  });
+                }).play();
+                return _context2.abrupt("return", true);
+
+              case 6:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2, this);
+      }));
+
+      function show(_x) {
+        return _show.apply(this, arguments);
+      }
+
+      return show;
+    }()
+  }, {
+    key: "hide",
+    value: function () {
+      var _hide = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3(params) {
+        var _params$duration2,
+            _this4 = this;
+
+        var _yield$this$modelGrou3, modelGroup;
+
+        return regeneratorRuntime.wrap(function _callee3$(_context3) {
+          while (1) {
+            switch (_context3.prev = _context3.next) {
+              case 0:
+                _context3.next = 2;
+                return this.modelGroupPromise;
+
+              case 2:
+                _yield$this$modelGrou3 = _context3.sent;
+                modelGroup = _yield$this$modelGrou3.modelGroup;
+                (0, _BetterTween.tweenProgress)().duration((_params$duration2 = params === null || params === void 0 ? void 0 : params.duration) !== null && _params$duration2 !== void 0 ? _params$duration2 : 300).easing(TWEEN.Easing.Quadratic.InOut).onUpdate(function (_ref2) {
+                  var progress = _ref2.progress;
+                  modelGroup.children.forEach(function (child) {
+                    var obj = child;
+                    obj.material && (obj.material.opacity = 1 - progress);
+                    _this4.five.needsRender = true;
+                  });
+                }).play();
+                return _context3.abrupt("return", true);
+
+              case 6:
+              case "end":
+                return _context3.stop();
+            }
+          }
+        }, _callee3, this);
+      }));
+
+      function hide(_x2) {
+        return _hide.apply(this, arguments);
+      }
+
+      return hide;
+    }()
+    /** 销毁当前宝箱实例
+     * @description 注意 dispose 并不会销毁所使用的贴图，因为贴图会有共用关系，需要在最外层销毁
+     */
+
+  }, {
     key: "dispose",
     value: function dispose() {
       var _this$faceAnime, _this$openAnime;
@@ -132,10 +285,12 @@ var TreasureObject = /*#__PURE__*/function (_THREE$Object3D) {
       this.five.off('panoArrived', this.onFivePanoArrived);
       this.five.off('wantsTapGesture', this.onFiveWantsTapGesture);
     }
+    /** 旋转宝箱朝向用户 */
+
   }, {
     key: "rotateToCamera",
     value: function rotateToCamera() {
-      var _this2 = this;
+      var _this5 = this;
 
       if (this.opened) return; // 宝箱朝向
 
@@ -150,11 +305,13 @@ var TreasureObject = /*#__PURE__*/function (_THREE$Object3D) {
       var speed = 8;
       var duration = Math.ceil(deltaRadY / speed * 1000);
       var rotationStartY = this.rotation.y;
-      (0, _BetterTween.tweenProgress)(duration).onUpdate(function (_ref) {
-        var progress = _ref.progress;
-        _this2.rotation.y = rotationStartY + progress * deltaRadY * rotateDirection;
+      (0, _BetterTween.tweenProgress)(duration).onUpdate(function (_ref3) {
+        var progress = _ref3.progress;
+        _this5.rotation.y = rotationStartY + progress * deltaRadY * rotateDirection;
       }).play();
     }
+    /** 打开宝箱 */
+
   }, {
     key: "open",
     value: function open() {
@@ -169,36 +326,22 @@ var TreasureObject = /*#__PURE__*/function (_THREE$Object3D) {
       return true;
     }
   }, {
-    key: "load",
+    key: "getModelPromise",
     value: function () {
-      var _load = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-        var _this3 = this;
-
-        var _yield$to, _yield$to2, loadError, orginModelGroup, group, _yield$to3, _yield$to4, boxTextureError, boxTexture;
+      var _getModelPromise = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4() {
+        var originGroup, modelGroup, _yield$to, _yield$to2, boxTextureError, boxTexture;
 
-        return regeneratorRuntime.wrap(function _callee$(_context) {
+        return regeneratorRuntime.wrap(function _callee4$(_context4) {
           while (1) {
-            switch (_context.prev = _context.next) {
+            switch (_context4.prev = _context4.next) {
               case 0:
-                _context.next = 2;
-                return (0, _to["default"])(this.params.loadModelGroup(this.params.config.objectUrl));
+                _context4.next = 2;
+                return this.params.loadModelGroup(this.params.config.objectUrl);
 
               case 2:
-                _yield$to = _context.sent;
-                _yield$to2 = _slicedToArray(_yield$to, 2);
-                loadError = _yield$to2[0];
-                orginModelGroup = _yield$to2[1];
-
-                if (!(loadError || !orginModelGroup)) {
-                  _context.next = 8;
-                  break;
-                }
-
-                throw loadError;
-
-              case 8:
-                group = orginModelGroup.clone();
-                group.traverse(function (obj) {
+                originGroup = _context4.sent;
+                modelGroup = originGroup.clone();
+                modelGroup.traverse(function (obj) {
                   if (!(obj instanceof THREE.Mesh)) return;
                   obj.material = copyMaterial(obj.material);
                   if (obj.material.map) obj.material.map.encoding = THREE.sRGBEncoding;
@@ -206,71 +349,50 @@ var TreasureObject = /*#__PURE__*/function (_THREE$Object3D) {
                 });
 
                 if (!this.params.config.boxTextureUrl) {
-                  _context.next = 22;
+                  _context4.next = 17;
                   break;
                 }
 
-                _context.next = 13;
+                _context4.next = 8;
                 return (0, _to["default"])(this.params.loadTexture(this.params.config.boxTextureUrl));
 
-              case 13:
-                _yield$to3 = _context.sent;
-                _yield$to4 = _slicedToArray(_yield$to3, 2);
-                boxTextureError = _yield$to4[0];
-                boxTexture = _yield$to4[1];
+              case 8:
+                _yield$to = _context4.sent;
+                _yield$to2 = _slicedToArray(_yield$to, 2);
+                boxTextureError = _yield$to2[0];
+                boxTexture = _yield$to2[1];
 
                 if (!(boxTextureError || !boxTexture)) {
-                  _context.next = 19;
+                  _context4.next = 14;
                   break;
                 }
 
                 throw new Error('加载盒子贴图失败');
 
-              case 19:
+              case 14:
                 boxTexture.encoding = THREE.sRGBEncoding;
-                group.getObjectByName('box').material.map = boxTexture;
-                group.getObjectByName('box2').material.map = boxTexture;
+                modelGroup.getObjectByName('box').material.map = boxTexture;
+                modelGroup.getObjectByName('box2').material.map = boxTexture;
 
-              case 22:
-                this.add(group); // ========== openAnime ==========
-
-                this.openAnime = new _TreasureOpenAnime.TreasurePluginOpenAnime({
-                  five: this.five,
-                  treasureGroup: group,
-                  onComplete: function onComplete() {
-                    var _this3$params$onOpenA, _this3$params;
-
-                    return (_this3$params$onOpenA = (_this3$params = _this3.params).onOpenAnimationEnded) === null || _this3$params$onOpenA === void 0 ? void 0 : _this3$params$onOpenA.call(_this3$params, _this3.treasureID);
-                  },
-                  animationClip: orginModelGroup.animations[0]
-                }); // ========== faceAnime ==========
-
-                this.faceAnime = new _TreasureFaceAnime.TreasureFaceAnime({
-                  five: this.five,
-                  treasureGroup: group,
-                  loadTexture: this.params.loadTexture,
-                  textureUrls: this.params.config.faceAnimeTextureUrls
+              case 17:
+                return _context4.abrupt("return", {
+                  modelGroup: modelGroup,
+                  originGroup: originGroup
                 });
-                this.faceAnime.play(); // ========== addEventListener ==========
-
-                this.five.on('panoArrived', this.onFivePanoArrived);
-                this.five.on('wantsTapGesture', this.onFiveWantsTapGesture);
-                this.five.needsRender = true;
-                return _context.abrupt("return", this);
 
-              case 30:
+              case 18:
               case "end":
-                return _context.stop();
+                return _context4.stop();
             }
           }
-        }, _callee, this);
+        }, _callee4, this);
       }));
 
-      function load() {
-        return _load.apply(this, arguments);
+      function getModelPromise() {
+        return _getModelPromise.apply(this, arguments);
       }
 
-      return load;
+      return getModelPromise;
     }()
   }]);
 

package/plugins/floorplan/utils/formatPosition.d.ts

@@ -1,14 +1,14 @@
 import { Five } from '@realsee/five';
-import { Vector2 } from '../../../typings/math.type';
+import { Vector2Position } from '../../../typings/math.type';
 import { FloorplanData } from '../typings/floorplanData';
 import { FloorplanBounding } from '../typings/floorplanData';
-export declare function pathD(points: Vector2[], options?: {
+export declare function pathD(points: Vector2Position[], options?: {
     needZ?: boolean;
     needA?: Record<number, string>;
-    format?: (vector: Vector2) => Vector2;
+    format?: (vector: Vector2Position) => Vector2Position;
 }): string;
 /** 把户型图上点点位转换到 SVG 上的点位 */
-export default function formatFloorplanPoint({ x, y }: Vector2, pxmm: number, bounding: FloorplanBounding): {
+export default function formatFloorplanPoint({ x, y }: Vector2Position, pxmm: number, bounding: FloorplanBounding): {
     x: number;
     y: number;
 };

package/shared-utils/three/transformPositionToVector3.d.ts

@@ -0,0 +1,7 @@
+import { Vector3 } from 'three';
+declare const transformPositionToVector3: ({ x, y, z }: {
+    x: number;
+    y: number;
+    z: number;
+}) => Vector3;
+export default transformPositionToVector3;

package/{plugins/PanoCursorRaycasterPlugin/utils/vecror3.js → shared-utils/three/transformPositionToVector3.js}

@@ -7,12 +7,12 @@ exports["default"] = void 0;
 
 var _three = require("three");
 
-var vector3 = function vector3(_ref) {
+var transformPositionToVector3 = function transformPositionToVector3(_ref) {
   var x = _ref.x,
       y = _ref.y,
       z = _ref.z;
   return new _three.Vector3(x, y, z);
 };
 
-var _default = vector3;
+var _default = transformPositionToVector3;
 exports["default"] = _default;

package/typedoc/typings.d.ts

@@ -1,3 +1,3 @@
 export type { FloorplanData, FloorplanOutlineItem, FloorplanEntrance, FloorplanBounding, FloorplanObserver, FloorplanRoomItem, FloorplanRoomLabelItem, FloorplanPosition, FloorplanImagePosition, } from '../plugins/floorplan/typings/floorplanData';
-export type { Vector3, Vector3WithArray, Vector2, Vector2WithArray, Matrix4_4 } from '../typings/math.type';
+export type { Vector3Position, Vector3WithArray, Vector2Position, Vector2WithArray, Matrix4_4, } from '../typings/math.type';
 export type { Omit, Overwrite } from '../typings/utils.type';

package/typings/math.type.d.ts

@@ -1,7 +1,7 @@
 /**
  * 三维向量
  */
-export interface Vector3 {
+export interface Vector3Position {
     x: number;
     y: number;
     z: number;
@@ -13,7 +13,7 @@ export declare type Vector3WithArray = [number, number, number];
 /**
  * 二维向量
  */
-export interface Vector2 {
+export interface Vector2Position {
     x: number;
     y: number;
 }

package/plugins/PanoCursorRaycasterPlugin/utils/vecror3.d.ts

@@ -1,7 +0,0 @@
-import { Vector3 } from 'three';
-declare const vector3: ({ x, y, z }: {
-    x: number;
-    y: number;
-    z: number;
-}) => Vector3;
-export default vector3;

package/shared-utils/three/vecror3.d.ts

@@ -1,7 +0,0 @@
-import { Vector3 } from 'three';
-declare const vector3: ({ x, y, z }: {
-    x: number;
-    y: number;
-    z: number;
-}) => Vector3;
-export default vector3;

package/shared-utils/three/vecror3.js

@@ -1,18 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _three = require("three");
-
-var vector3 = function vector3(_ref) {
-  var x = _ref.x,
-      y = _ref.y,
-      z = _ref.z;
-  return new _three.Vector3(x, y, z);
-};
-
-var _default = vector3;
-exports["default"] = _default;