@realsee/dnalogel 0.1.0 → 0.1.4

package/plugins/ModelRoomLabelPlugin/typings.d.ts

@@ -0,0 +1,35 @@
+export declare type ModelRoomLabelPluginData = {
+    model_room_labels: Readonly<{
+        id: string;
+        name: string;
+        longitude: number;
+        pano_index: number;
+        floor_index: number;
+        position: {
+            x: number;
+            y: number;
+            z: number;
+        };
+    }>[];
+};
+export interface RoomLabel {
+    /** 房屋 ID */
+    readonly id: string;
+    /** 房屋名 */
+    readonly name: string;
+    /** 走到对应 panoIndex 时 five 的水平角度 */
+    readonly longitude: number;
+    /** 点击标签会走到的 panoIndex */
+    readonly panoIndex: number;
+    /** 所处楼层 */
+    readonly floorIndex: number;
+    /** 引导标签的三维坐标，一般是房屋中心点 */
+    readonly position: {
+        x: number;
+        y: number;
+        z: number;
+    };
+    zIndex: number;
+    visible: boolean;
+    transform: string;
+}

package/plugins/ModelRoomLabelPlugin/typings.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/plugins/ModelRoomLabelPlugin/utils/parseData.d.ts

@@ -0,0 +1,3 @@
+import { ModelRoomLabelPluginData, RoomLabel } from '../typings';
+/** @description 下划线转驼峰 */
+export declare function parseModelRoomLabelPluginData(data: ModelRoomLabelPluginData): RoomLabel[];

package/plugins/ModelRoomLabelPlugin/utils/parseData.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.parseModelRoomLabelPluginData = parseModelRoomLabelPluginData;
+
+/** @description 下划线转驼峰 */
+function parseModelRoomLabelPluginData(data) {
+  return data.model_room_labels.map(function (_ref) {
+    var id = _ref.id,
+        pano_index = _ref.pano_index,
+        floor_index = _ref.floor_index,
+        name = _ref.name,
+        position = _ref.position,
+        longitude = _ref.longitude;
+    return {
+      id: id,
+      name: name,
+      position: position,
+      longitude: longitude,
+      panoIndex: pano_index,
+      floorIndex: floor_index,
+      zIndex: 0,
+      visible: false,
+      transform: ''
+    };
+  });
+}

package/plugins/PanoMaskSelectorPlugin/compare.d.ts

@@ -0,0 +1 @@
+export declare function compare(c1: THREE.Color, c2: THREE.Color, threshold?: number): boolean;

package/plugins/PanoMaskSelectorPlugin/compare.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.compare = compare;
+
+// 判断两个颜色是否相似
+function compare(c1, c2) {
+  var threshold = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0.025;
+  var r = Math.abs(c1.r - c2.r);
+  var g = Math.abs(c1.g - c2.g);
+  var b = Math.abs(c1.b - c2.b);
+  return r < threshold && g < threshold && b < threshold;
+}

package/plugins/PanoMaskSelectorPlugin/createBox.d.ts

@@ -0,0 +1,7 @@
+import * as THREE from 'three';
+import { WorkObserver } from '@realsee/five';
+export declare function createBox(textures: THREE.Texture[], observer: WorkObserver, _config?: {
+    opacity?: boolean;
+    maskColor?: THREE.Color;
+    thickness?: number;
+}): THREE.Mesh<THREE.BoxBufferGeometry, THREE.ShaderMaterial[]>;

package/plugins/PanoMaskSelectorPlugin/createBox.js

@@ -0,0 +1,61 @@
+"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.createBox = createBox;
+
+var THREE = _interopRequireWildcard(require("three"));
+
+var _vertexShader = require("./vertexShader");
+
+var _fragmentShader = require("./fragmentShader");
+
+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 createBox(textures, observer, _config) {
+  var config = Object.assign({
+    opacity: true,
+    thickness: 0.005,
+    maskColor: new THREE.Color(1, 0, 0)
+  }, _config || {});
+  var materials = textures.map(function (texture) {
+    return new THREE.ShaderMaterial({
+      uniforms: {
+        map: {
+          value: texture
+        },
+        enable: {
+          value: 1
+        },
+        opacity: {
+          value: config.opacity ? 0.0 : 1
+        },
+        selectedColor: {
+          value: new THREE.Color(0, 0, 0)
+        },
+        maskColor: {
+          value: config.maskColor
+        },
+        thickness: {
+          value: config.thickness
+        }
+      },
+      vertexShader: _vertexShader.vertexShader,
+      fragmentShader: _fragmentShader.fragmentShader,
+      transparent: true,
+      depthTest: false,
+      side: THREE.DoubleSide
+    });
+  });
+  var boxBufferGeometry = new THREE.BoxBufferGeometry(1, 1, 1);
+  var box = new THREE.Mesh(boxBufferGeometry, materials);
+  box.geometry.scale(-1, 1, 1);
+  box.position.set(observer.position.x, observer.position.y, observer.position.z);
+  box.quaternion.multiply(observer.quaternion);
+  return box;
+}

package/plugins/PanoMaskSelectorPlugin/createTextures.d.ts

@@ -0,0 +1,3 @@
+import * as THREE from 'three';
+import { WorkImage } from '@realsee/five';
+export declare function createTextures(imgs: Omit<WorkImage, 'depth' | 'tiles'>): THREE.Texture[];

package/plugins/PanoMaskSelectorPlugin/createTextures.js

@@ -0,0 +1,29 @@
+"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.createTextures = createTextures;
+
+var THREE = _interopRequireWildcard(require("three"));
+
+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 createTextures(imgs) {
+  var loader = new THREE.ImageLoader();
+  var keys = ['up', 'down', 'right', 'left', 'front', 'back'];
+  var textures = keys.map(function (key) {
+    var url = imgs[key];
+    var texture = new THREE.Texture();
+    loader.load(url, function (image) {
+      texture.image = image;
+      texture.needsUpdate = true;
+    });
+    return texture;
+  });
+  return textures;
+}

package/plugins/PanoMaskSelectorPlugin/fragmentShader.d.ts

@@ -0,0 +1 @@
+export declare const fragmentShader = "\nconst float PI = 3.1415926535897932384626433832795;\nuniform int enable;\nuniform sampler2D map;\nvarying vec2 vUv;\n\nuniform vec3 selectedColor;\nuniform vec3 maskColor;\nuniform float opacity;\nuniform float thickness;\n\n\n// \u5224\u65AD\u4E24\u4E2A\u989C\u8272\u662F\u5426\u76F8\u4F3C\nbool compare(vec3 c1, vec3 c2, float threshold) {\n  // \u8272\u503C\u8BEF\u5DEE 0.05\n  float diff = threshold;\n\n  float r = abs(c1.x - c2.x);\n  float g = abs(c1.y - c2.y);\n  float b = abs(c1.z - c2.z);\n\n  return r < diff && g < diff && b < diff;\n}\n\nvoid main(void) {\n  vec3 color = texture2D(map, vUv).xyz;\n  float alpha = texture2D(map, vUv).a;\n\n  gl_FragColor = vec4(color, opacity);\n\n  // \u5F00\u5173\n  if (enable != 1) {\n    gl_FragColor = vec4(color, opacity);\n    return;\n  }\n\n  // \u9ED8\u8BA4\u503C\uFF1A\u672A\u63D0\u4F9B \u9009\u4E2D\u8272\u503C\n  if (selectedColor.x == 0.0 && selectedColor.y == 0.0 && selectedColor.z == 0.0) {\n    gl_FragColor = vec4(color, opacity);\n    return;\n  }\n\n  bool similar = compare(color, selectedColor, 0.025);\n\n  // \u4E0D\u76F8\u4F3C\n  if (similar == false) {\n    gl_FragColor = vec4(color, opacity);\n    return;\n  }\n\n  // \u5BF9\u6BD4\u534A\u5F84\u5E45\u5EA6\n  float offset1 = thickness;\n  float offset2 = offset1 * sin(PI/4.0);\n\n  vec3 top = texture2D(map, vec2(vUv.x, vUv.y + offset1)).xyz;\n  vec3 right = texture2D(map, vec2(vUv.x + offset1, vUv.y)).xyz;\n  vec3 bottom = texture2D(map, vec2(vUv.x, vUv.y - offset1)).xyz;\n  vec3 left = texture2D(map, vec2(vUv.x - offset1, vUv.y)).xyz;\n  \n  vec3 topRight = texture2D(map, vec2(vUv.x + offset2, vUv.y + offset2)).xyz;\n  vec3 rightBottom = texture2D(map, vec2(vUv.x + offset2, vUv.y - offset2)).xyz;\n  vec3 bottomLeft = texture2D(map, vec2(vUv.x - offset2, vUv.y - offset2)).xyz;\n  vec3 leftTop = texture2D(map, vec2(vUv.x - offset2, vUv.y + offset2)).xyz;\n\n  float threshold = 0.0025;\n  bool a1 = compare(color, top, threshold);\n  bool b1 = compare(color, right, threshold);\n  bool c1 = compare(color, bottom, threshold);\n  bool d1 = compare(color, left, threshold);\n\n\n  bool a2 = compare(color, topRight, threshold);\n  bool b2 = compare(color, rightBottom, threshold);\n  bool c2 = compare(color, bottomLeft, threshold);\n  bool d2 = compare(color, leftTop, threshold);\n\n  if (a1 == true && b1 == true && c1 == true && d1 == true && a2 == true && b2 == true && c2 == true && d2 == true) {\n    gl_FragColor = vec4(color, opacity);\n    return;\n  }\n\n  gl_FragColor =  vec4(maskColor.x, maskColor.y, maskColor.z, 1.0);\n  // gl_FragColor =  vec4(154.0 / 255.0, 205.0 / 255.0, 50.0 / 255.0, 1.0) ;\n  // gl_FragColor =  vec4(139.0 / 255.0, 0.0 / 255.0, 0.0 / 255.0, 1.0) ;\n  // gl_FragColor =  vec4(255.0 / 255.0, 235.0 / 255.0, 59.0 / 255.0, 1.0) ;\n\n}\n";

package/plugins/PanoMaskSelectorPlugin/fragmentShader.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.fragmentShader = void 0;
+var fragmentShader = "\nconst float PI = 3.1415926535897932384626433832795;\nuniform int enable;\nuniform sampler2D map;\nvarying vec2 vUv;\n\nuniform vec3 selectedColor;\nuniform vec3 maskColor;\nuniform float opacity;\nuniform float thickness;\n\n\n// \u5224\u65AD\u4E24\u4E2A\u989C\u8272\u662F\u5426\u76F8\u4F3C\nbool compare(vec3 c1, vec3 c2, float threshold) {\n  // \u8272\u503C\u8BEF\u5DEE 0.05\n  float diff = threshold;\n\n  float r = abs(c1.x - c2.x);\n  float g = abs(c1.y - c2.y);\n  float b = abs(c1.z - c2.z);\n\n  return r < diff && g < diff && b < diff;\n}\n\nvoid main(void) {\n  vec3 color = texture2D(map, vUv).xyz;\n  float alpha = texture2D(map, vUv).a;\n\n  gl_FragColor = vec4(color, opacity);\n\n  // \u5F00\u5173\n  if (enable != 1) {\n    gl_FragColor = vec4(color, opacity);\n    return;\n  }\n\n  // \u9ED8\u8BA4\u503C\uFF1A\u672A\u63D0\u4F9B \u9009\u4E2D\u8272\u503C\n  if (selectedColor.x == 0.0 && selectedColor.y == 0.0 && selectedColor.z == 0.0) {\n    gl_FragColor = vec4(color, opacity);\n    return;\n  }\n\n  bool similar = compare(color, selectedColor, 0.025);\n\n  // \u4E0D\u76F8\u4F3C\n  if (similar == false) {\n    gl_FragColor = vec4(color, opacity);\n    return;\n  }\n\n  // \u5BF9\u6BD4\u534A\u5F84\u5E45\u5EA6\n  float offset1 = thickness;\n  float offset2 = offset1 * sin(PI/4.0);\n\n  vec3 top = texture2D(map, vec2(vUv.x, vUv.y + offset1)).xyz;\n  vec3 right = texture2D(map, vec2(vUv.x + offset1, vUv.y)).xyz;\n  vec3 bottom = texture2D(map, vec2(vUv.x, vUv.y - offset1)).xyz;\n  vec3 left = texture2D(map, vec2(vUv.x - offset1, vUv.y)).xyz;\n  \n  vec3 topRight = texture2D(map, vec2(vUv.x + offset2, vUv.y + offset2)).xyz;\n  vec3 rightBottom = texture2D(map, vec2(vUv.x + offset2, vUv.y - offset2)).xyz;\n  vec3 bottomLeft = texture2D(map, vec2(vUv.x - offset2, vUv.y - offset2)).xyz;\n  vec3 leftTop = texture2D(map, vec2(vUv.x - offset2, vUv.y + offset2)).xyz;\n\n  float threshold = 0.0025;\n  bool a1 = compare(color, top, threshold);\n  bool b1 = compare(color, right, threshold);\n  bool c1 = compare(color, bottom, threshold);\n  bool d1 = compare(color, left, threshold);\n\n\n  bool a2 = compare(color, topRight, threshold);\n  bool b2 = compare(color, rightBottom, threshold);\n  bool c2 = compare(color, bottomLeft, threshold);\n  bool d2 = compare(color, leftTop, threshold);\n\n  if (a1 == true && b1 == true && c1 == true && d1 == true && a2 == true && b2 == true && c2 == true && d2 == true) {\n    gl_FragColor = vec4(color, opacity);\n    return;\n  }\n\n  gl_FragColor =  vec4(maskColor.x, maskColor.y, maskColor.z, 1.0);\n  // gl_FragColor =  vec4(154.0 / 255.0, 205.0 / 255.0, 50.0 / 255.0, 1.0) ;\n  // gl_FragColor =  vec4(139.0 / 255.0, 0.0 / 255.0, 0.0 / 255.0, 1.0) ;\n  // gl_FragColor =  vec4(255.0 / 255.0, 235.0 / 255.0, 59.0 / 255.0, 1.0) ;\n\n}\n";
+exports.fragmentShader = fragmentShader;

package/plugins/PanoMaskSelectorPlugin/index.d.ts

@@ -0,0 +1,49 @@
+import * as THREE from 'three';
+import { FivePlugin, WorkImage } from '@realsee/five';
+export interface PanoMaskObject {
+    color: {
+        r: number;
+        g: number;
+        b: number;
+    };
+    name?: string;
+    id: string;
+}
+export interface PanoMaskSelectorPluginData {
+    panoramaImgs: Omit<WorkImage, 'depth' | 'tiles'>[];
+    colorMaps: PanoMaskObject[];
+    config?: {
+        maskColor?: THREE.Color;
+        thickness?: number;
+    };
+}
+export interface PanoMaskSelectorPluginParameterType {
+    data?: PanoMaskSelectorPluginData;
+}
+export interface PanoMaskSelectorPluginReturnType {
+    /**
+     * 加载数据
+     */
+    load: (data: PanoMaskSelectorPluginData) => Promise<boolean>;
+    /**
+     * @returns 返回值为 选中的 物体信息；如果选中失败 则 返回 false。
+     */
+    select: (x: number, y: number) => Promise<false | PanoMaskObject>;
+    /**
+     * 擦除选中物体的 Mask（不可还原）。
+     */
+    erase: () => void;
+    /**
+     * 隐藏 选中物体的 Mask。
+     */
+    hide: () => void;
+    /**
+     * 展示 选中物体的 Mask。
+     */
+    show: () => void;
+    /**
+     * 销毁函数。
+     */
+    dispose: () => void;
+}
+export declare const PanoMaskSelectorPlugin: FivePlugin<PanoMaskSelectorPluginParameterType, PanoMaskSelectorPluginReturnType>;

package/plugins/PanoMaskSelectorPlugin/index.js

@@ -0,0 +1,272 @@
+"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.PanoMaskSelectorPlugin = void 0;
+
+var THREE = _interopRequireWildcard(require("three"));
+
+var _five = require("@realsee/five");
+
+var _createBox = require("./createBox");
+
+var _createTextures = require("./createTextures");
+
+var _compare = require("./compare");
+
+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 asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+var PanoMaskSelectorPlugin = function PanoMaskSelectorPlugin(five) {
+  var parameters = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var state = {
+    data: parameters.data
+  };
+
+  var dispose = function dispose() {
+    if (state.box) {
+      five.scene.remove(state.box);
+    }
+
+    five.off('panoArrived', wrapper);
+    five.off('modeChange', modeChangeListener);
+  };
+
+  var wrapper = function wrapper() {
+    var _state$data$config, _state$data$config2;
+
+    if (five.panoIndex === undefined) {
+      return;
+    }
+
+    if (five.panoIndex === state.currentLoadedIndex) {
+      return;
+    }
+
+    if (!state.data) {
+      return;
+    }
+
+    if (state.box) {
+      five.scene.remove(state.box);
+    }
+
+    var panoramaImgs = state.data.panoramaImgs[five.panoIndex];
+
+    if (!panoramaImgs) {
+      state.textures = undefined;
+      return false;
+    }
+
+    state.textures = (0, _createTextures.createTextures)(panoramaImgs);
+    state.box = (0, _createBox.createBox)(state.textures, five.work.observers[five.panoIndex], {
+      opacity: true,
+      maskColor: ((_state$data$config = state.data.config) === null || _state$data$config === void 0 ? void 0 : _state$data$config.maskColor) || new THREE.Color(1, 0, 0),
+      thickness: ((_state$data$config2 = state.data.config) === null || _state$data$config2 === void 0 ? void 0 : _state$data$config2.thickness) || 0.005
+    });
+    five.scene.add(state.box);
+    state.currentLoadedIndex = five.panoIndex;
+    return true;
+  };
+
+  var load = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(data) {
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              state.data = data;
+              wrapper();
+              return _context.abrupt("return", true);
+
+            case 3:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function load(_x2) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+
+  var select = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(_x, _y) {
+      var _state$data;
+
+      var element, pixel, x, y, renderTarget, pickingBuffer, camera, renderer, newScence, observer, newBox, unit8ArrayGroup, i, selectedColor, colorMaps, object;
+      return regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              if (state.textures) {
+                _context2.next = 2;
+                break;
+              }
+
+              return _context2.abrupt("return", false);
+
+            case 2:
+              if (state.box) {
+                _context2.next = 4;
+                break;
+              }
+
+              return _context2.abrupt("return", false);
+
+            case 4:
+              if (!(five.panoIndex === undefined)) {
+                _context2.next = 6;
+                break;
+              }
+
+              return _context2.abrupt("return", false);
+
+            case 6:
+              if (!(five.currentMode !== _five.Five.Mode.Panorama)) {
+                _context2.next = 8;
+                break;
+              }
+
+              return _context2.abrupt("return", false);
+
+            case 8:
+              if (five.renderer) {
+                _context2.next = 10;
+                break;
+              }
+
+              return _context2.abrupt("return", false);
+
+            case 10:
+              element = five.getElement();
+
+              if (element) {
+                _context2.next = 13;
+                break;
+              }
+
+              return _context2.abrupt("return", false);
+
+            case 13:
+              pixel = 1;
+              x = _x * five.renderer.getPixelRatio();
+              y = _y * five.renderer.getPixelRatio();
+              renderTarget = new THREE.WebGLRenderTarget(pixel, pixel);
+              pickingBuffer = new Uint8Array(4 * pixel * pixel);
+              camera = five.camera.clone();
+              renderer = five.renderer;
+              newScence = new THREE.Scene();
+              observer = five.work.observers[five.panoIndex];
+              newBox = (0, _createBox.createBox)(state.textures, observer, {
+                opacity: false
+              });
+              newScence.add(newBox);
+              camera.setViewOffset(element.width, element.height, x, y, pixel, pixel);
+              renderer.setRenderTarget(renderTarget);
+              renderer.render(newScence, camera);
+              pickingBuffer.fill(0);
+              renderer.readRenderTargetPixels(renderTarget, 0, 0, pixel, pixel, pickingBuffer);
+              camera.clearViewOffset();
+              renderer.setRenderTarget(null);
+              unit8ArrayGroup = [];
+
+              for (i = 0; i < pickingBuffer.length; i += 4 * pixel) {
+                unit8ArrayGroup.push(pickingBuffer.slice(i, i + 4 * pixel));
+              }
+
+              selectedColor = new THREE.Color(pickingBuffer[0] / 255, pickingBuffer[1] / 255, pickingBuffer[2] / 255);
+              colorMaps = ((_state$data = state.data) === null || _state$data === void 0 ? void 0 : _state$data.colorMaps) || [];
+              object = colorMaps.find(function (item) {
+                var objectColor = new THREE.Color(item.color.r, item.color.g, item.color.b);
+                return (0, _compare.compare)(objectColor, selectedColor);
+              });
+
+              if (object) {
+                _context2.next = 38;
+                break;
+              }
+
+              return _context2.abrupt("return", false);
+
+            case 38:
+              state.box.material.forEach(function (m) {
+                return m.uniforms.selectedColor.value = selectedColor;
+              });
+              five.needsRender = true;
+              return _context2.abrupt("return", object);
+
+            case 41:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    }));
+
+    return function select(_x3, _x4) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  var erase = function erase() {
+    if (!state.box) return;
+    state.box.material.forEach(function (m) {
+      return m.uniforms.selectedColor.value = new THREE.Color(0.0, 0.0, 0.0);
+    });
+    five.needsRender = true;
+  };
+
+  var hide = function hide() {
+    var _state$box, _state$box$material;
+
+    (_state$box = state.box) === null || _state$box === void 0 ? void 0 : (_state$box$material = _state$box.material) === null || _state$box$material === void 0 ? void 0 : _state$box$material.forEach(function (material) {
+      material.visible = false;
+    });
+    five.needsRender = true;
+  };
+
+  var show = function show() {
+    var _state$box2, _state$box2$material;
+
+    if (five.currentMode !== _five.Five.Mode.Panorama) {
+      return;
+    }
+
+    (_state$box2 = state.box) === null || _state$box2 === void 0 ? void 0 : (_state$box2$material = _state$box2.material) === null || _state$box2$material === void 0 ? void 0 : _state$box2$material.forEach(function (material) {
+      material.visible = true;
+    });
+    five.needsRender = true;
+  };
+
+  var modeChangeListener = function modeChangeListener(mode) {
+    if (mode !== _five.Five.Mode.Panorama) {
+      hide();
+    } else {
+      show();
+    }
+  };
+
+  five.on('panoArrived', wrapper);
+  five.on('modeChange', modeChangeListener);
+  return {
+    load: load,
+    select: select,
+    erase: erase,
+    dispose: dispose,
+    hide: hide,
+    show: show
+  };
+};
+
+exports.PanoMaskSelectorPlugin = PanoMaskSelectorPlugin;

package/plugins/PanoMaskSelectorPlugin/vertexShader.d.ts

@@ -0,0 +1 @@
+export declare const vertexShader = "\nvarying vec2 vUv;\n\nvoid main() {\n  vUv = uv;\n\n  vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);\n  gl_Position = projectionMatrix * mvPosition;\n}\n\n";

package/plugins/PanoMaskSelectorPlugin/vertexShader.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.vertexShader = void 0;
+var vertexShader = "\nvarying vec2 vUv;\n\nvoid main() {\n  vUv = uv;\n\n  vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);\n  gl_Position = projectionMatrix * mvPosition;\n}\n\n";
+exports.vertexShader = vertexShader;

package/plugins/TreasurePlugin/Controller.d.ts

@@ -1,13 +1,36 @@
-import { Five } from '@realsee/five';
-import { TreasureType } from './constants';
+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 {
+    scale?: number;
+    /** 宝箱模型地址 */
+    object_url?: string;
+    /** 宝箱盒子使用的贴图
+     * @description
+     * * 默认使用 object_url 文件中的盒子贴图
+     * * 如果传了 box_texture_url 会替换默认贴图
+     */
+    box_texture_url?: string;
+    /** 宝箱表情动画使用的贴图列表 */
+    face_anime_texture_urls?: string[];
+}
 /** 宝箱数据 */
 export interface TreasurePluginItemData {
     /** 宝箱 ID */
     id: string;
-    /** 宝箱位置：[x, y, z] */
-    position: number[];
-    /** 宝箱类型 */
-    type: TreasureType;
+    /** 宝箱位置 */
+    position: {
+        x: number;
+        y: number;
+        z: number;
+    };
+    /** 使用预设的宝箱类型 */
+    type?: TREASURE_TYPE;
+    /** 如果不想使用预设的宝箱，可以传入自定义的宝箱配置 */
+    config?: TreasurePluginItemConfigData;
 }
 export interface TreasurePluginData {
     treasures: TreasurePluginItemData[];
@@ -15,18 +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
      */
-    tap: (id: string) => void;
+    openAnimationEnded: (params: {
+        id: string;
+    }) => void;
 };
 export declare class TreasurePluginController {
+    readonly hooks: Subscribe<TreasurePluginEvents>;
+    readonly treasures: TreasureObject[];
     private five;
     private selfGroup;
-    private hooks;
-    private fbxLoader;
-    private treasures;
+    private textureLoader;
+    private modelLoader;
     constructor(five: Five);
-    load(data: TreasurePluginData): Promise<boolean>;
+    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 getTreasureObjectParams;
+    private onTreasureOpenAnimationEnded;
+    private getConfig;
 }