@realsee/dnalogel 0.1.0 → 0.1.4

package/plugins/ModelEntryDoorGuidePlugin/index.js

@@ -1,15 +1,225 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
 
+var THREE = _interopRequireWildcard(require("three"));
+
+var _FBXLoader = require("three/examples/jsm/loaders/FBXLoader");
+
+var _createCanvasTextTexture = _interopRequireDefault(require("../../shared-utils/createCanvasTextTexture"));
+
+var _transformPositionToVector = _interopRequireDefault(require("../../shared-utils/three/transformPositionToVector3"));
+
+var _transfromToMeshBasicMaterial = _interopRequireDefault(require("../../shared-utils/three/transfromToMeshBasicMaterial"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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 ModelEntryDoorGuidePlugin = function ModelEntryDoorGuidePlugin() {
-  return {};
+var ModelEntryDoorGuidePlugin = function ModelEntryDoorGuidePlugin(five, params) {
+  var _params$animationEnab, _params$position, _params$rad;
+
+  // 局部状态
+  var state = {};
+  var defaultAnimationEnable = (_params$animationEnab = params.animationEnabled) !== null && _params$animationEnab !== void 0 ? _params$animationEnab : true;
+  var defaultModelPosition = (_params$position = params.position) !== null && _params$position !== void 0 ? _params$position : undefined;
+  var defaultRad = (_params$rad = params.rad) !== null && _params$rad !== void 0 ? _params$rad : undefined;
+  var defaultFbxUrl = params.fbx_url || '//vrlab-image4.ljcdn.com/release/web/entryDoorMini/Anim_Door1.fbx';
+  var mixers = [];
+
+  var load = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(data) {
+      var _data$position, _data$position2, _data$rad, _data$fbx_url, _object$children, _object$children$, _object$children$$chi, _object$children$$chi2;
+
+      var modelPosition, rad, fbxUrl, object, textMesh;
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              if (!(((_data$position = data === null || data === void 0 ? void 0 : data.position) !== null && _data$position !== void 0 ? _data$position : defaultModelPosition) === undefined)) {
+                _context.next = 2;
+                break;
+              }
+
+              return _context.abrupt("return", Promise.reject("ModelEntryDoorGuidePlugin.load(): position is undefined"));
+
+            case 2:
+              modelPosition = (0, _transformPositionToVector["default"])((_data$position2 = data === null || data === void 0 ? void 0 : data.position) !== null && _data$position2 !== void 0 ? _data$position2 : defaultModelPosition);
+              rad = (_data$rad = data === null || data === void 0 ? void 0 : data.rad) !== null && _data$rad !== void 0 ? _data$rad : defaultRad;
+              fbxUrl = (_data$fbx_url = data === null || data === void 0 ? void 0 : data.fbx_url) !== null && _data$fbx_url !== void 0 ? _data$fbx_url : defaultFbxUrl;
+              state.rad = rad;
+
+              if (!(rad === undefined)) {
+                _context.next = 8;
+                break;
+              }
+
+              return _context.abrupt("return", Promise.reject("ModelEntryDoorGuidePlugin.load(): rad is ".concat(rad)));
+
+            case 8:
+              _context.next = 10;
+              return new _FBXLoader.FBXLoader().loadAsync(fbxUrl);
+
+            case 10:
+              object = _context.sent;
+              // 设置位置
+              object.position.copy(modelPosition);
+              object.rotation.z = rad;
+              object.scale.set(0.8, 0.8, 0.8);
+              (0, _transfromToMeshBasicMaterial["default"])(object, {
+                transparent: true,
+                side: THREE.DoubleSide
+              });
+              textMesh = (_object$children = object.children) === null || _object$children === void 0 ? void 0 : (_object$children$ = _object$children[0]) === null || _object$children$ === void 0 ? void 0 : (_object$children$$chi = _object$children$.children) === null || _object$children$$chi === void 0 ? void 0 : (_object$children$$chi2 = _object$children$$chi[3]) === null || _object$children$$chi2 === void 0 ? void 0 : _object$children$$chi2.clone();
+
+              if (textMesh) {
+                _context.next = 18;
+                break;
+              }
+
+              return _context.abrupt("return", Promise.reject("ModelEntryDoorGuidePlugin.load(): textMesh is ".concat(textMesh)));
+
+            case 18:
+              textMesh.material = new THREE.MeshBasicMaterial({
+                transparent: true,
+                map: (0, _createCanvasTextTexture["default"])('入户门')
+              });
+              textMesh.renderOrder = 3;
+              object.children[0].add(textMesh);
+              state.object = object;
+              return _context.abrupt("return", true);
+
+            case 23:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function load(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+
+  var initAnimation = function initAnimation() {
+    if (state.animation) return;
+    if (!state.object) return console.error('ModelEntryDoorGuidePlugin.initAnimation(): state.object is ', state.object); // action
+
+    var animationSpeed = 1;
+    var mixer = new THREE.AnimationMixer(state.object);
+    mixers.push(mixer);
+    var action = mixer.clipAction(state.object.animations[0]);
+    action.timeScale = animationSpeed;
+    var stopAnimation;
+
+    var requestAnimationFrameLoop = function requestAnimationFrameLoop() {
+      var index = 0;
+      var oldTime = 0;
+      var minDeltaTime = 1000 / 30;
+
+      var animation = function animation(time) {
+        index = requestAnimationFrame(animation);
+        var deltaTime = time - oldTime;
+        if (deltaTime < minDeltaTime) return;
+        oldTime = time;
+        mixers.forEach(function (mixer) {
+          return mixer.update(deltaTime / 1000);
+        });
+        five.needsRender = true;
+      };
+
+      index = requestAnimationFrame(animation);
+      return function () {
+        cancelAnimationFrame(index);
+      };
+    };
+
+    var play = function play() {
+      if (stopAnimation) return;
+      action.play();
+      stopAnimation = requestAnimationFrameLoop(); // 开始播动画时，rotation可能会还原
+
+      requestAnimationFrame(function () {
+        if (state.object && state.object.rotation.z !== state.rad) state.object.rotation.z = state.rad;
+      });
+    };
+
+    var stop = function stop() {
+      var _stopAnimation;
+
+      action.stop();
+      (_stopAnimation = stopAnimation) === null || _stopAnimation === void 0 ? void 0 : _stopAnimation();
+      stopAnimation = undefined;
+    };
+
+    var animation = {
+      play: play,
+      stop: stop
+    };
+    state.animation = animation;
+  };
+
+  var show = function show(config) {
+    var _config$animationEnab;
+
+    if (!state.object) return console.error('ModelEntryDoorGuidePlugin.enable(): object is ', state.object);
+    var animationEnable = (_config$animationEnab = config === null || config === void 0 ? void 0 : config.animationEnable) !== null && _config$animationEnab !== void 0 ? _config$animationEnab : defaultAnimationEnable;
+
+    if (animationEnable) {
+      if (!state.animation) initAnimation();
+      state.animation.play();
+    }
+
+    five.scene.add(state.object);
+    five.needsRender = true;
+  };
+
+  var hide = function hide() {
+    if (!state.object) return;
+    if (state.animation) state.animation.stop();
+    five.scene.remove(state.object);
+    five.needsRender = true;
+  };
+
+  var modeChangeHandler = function modeChangeHandler(mode) {
+    return mode === 'Floorplan' ? show() : hide();
+  };
+
+  var enable = function enable(config) {
+    if (state.enabled) return true;
+    state.enabled = true;
+    five.on('modeChange', modeChangeHandler);
+    show(config);
+    return true;
+  };
+
+  var disable = function disable() {
+    if (!state.enabled) return true;
+    state.enabled = false;
+    five.off('modeChange', modeChangeHandler);
+    return true;
+  };
+
+  return {
+    load: load,
+    enable: enable,
+    disable: disable
+  };
 };
 
 var _default = ModelEntryDoorGuidePlugin;

package/plugins/ModelRoomLabelPlugin/Controller.d.ts

@@ -0,0 +1,35 @@
+import { Five } from '@realsee/five';
+import { ModelRoomLabelPluginData } from './typings';
+export declare type ModelRoomLabelPluginParameters = undefined;
+export declare class ModelRoomLabelController {
+    private five;
+    private enabled;
+    private fiveModeEnabled;
+    private wrapper?;
+    private roomLabels;
+    private container;
+    constructor(five: Five);
+    dispose(): void;
+    /** 加载数据 */
+    load(data: ModelRoomLabelPluginData): void;
+    /** 设置插件容器 */
+    appendTo(wrapper: Element): this;
+    /** 禁用插件功能
+     * @description
+     * - 如果当前正在展示中，会清除所有展示的 DOM
+     * - 如果当前未展示，即使后续 Five 状态满足展示要求，也不会展示
+     * */
+    disable(): this;
+    /** 启用插件功能
+     * @description
+     * - 如果当前符合展示条件，会立刻展示
+     * - 如果不符合展示条件，会等待 Five 状态满足条件后再展示
+     */
+    enable(): this;
+    /** 监听 Five Mode 变化
+     * @description
+     * Mode 不符合要求时，立刻消失，满足要求时，需要等待动画结束再展示
+     */
+    private onFiveModeChange;
+    private render;
+}

package/plugins/ModelRoomLabelPlugin/Controller.js

@@ -0,0 +1,147 @@
+"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.ModelRoomLabelController = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+var ReactDOM = _interopRequireWildcard(require("react-dom"));
+
+var _RoomLabelItems = _interopRequireDefault(require("./RoomLabelItems"));
+
+var _parseData = require("./utils/parseData");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var ModelRoomLabelController = /*#__PURE__*/function () {
+  function ModelRoomLabelController(five) {
+    var _this = this;
+
+    _classCallCheck(this, ModelRoomLabelController);
+
+    _defineProperty(this, "enabled", true);
+
+    _defineProperty(this, "roomLabels", []);
+
+    _defineProperty(this, "container", document.createElement('div'));
+
+    _defineProperty(this, "onFiveModeChange", function (mode) {
+      if (mode !== 'Floorplan') {
+        _this.fiveModeEnabled = false;
+
+        _this.render();
+
+        return;
+      }
+
+      _this.five.once('initAnimationEnded', function () {
+        _this.fiveModeEnabled = _this.five.currentMode === 'Floorplan';
+
+        _this.render();
+      });
+    });
+
+    this.five = five;
+    this.fiveModeEnabled = this.five.currentMode === 'Floorplan'; // init container style
+
+    this.container.classList.add('model-room-label-plugin-container');
+    this.container.style.width = '100%';
+    this.container.style.height = '100%';
+    this.container.style.position = 'absolute';
+    this.container.style.left = '0';
+    this.container.style.top = '0'; // five lisenter
+
+    this.five.once('dispose', function () {
+      return _this.dispose();
+    });
+    this.five.on('modeChange', this.onFiveModeChange);
+    this.render();
+  }
+
+  _createClass(ModelRoomLabelController, [{
+    key: "dispose",
+    value: function dispose() {
+      this.five.off('modeChange', this.onFiveModeChange);
+      ReactDOM.unmountComponentAtNode(this.container);
+      this.container.remove();
+    }
+    /** 加载数据 */
+
+  }, {
+    key: "load",
+    value: function load(data) {
+      this.roomLabels = (0, _parseData.parseModelRoomLabelPluginData)(data);
+      this.render();
+    }
+    /** 设置插件容器 */
+
+  }, {
+    key: "appendTo",
+    value: function appendTo(wrapper) {
+      this.wrapper = wrapper;
+      wrapper.appendChild(this.container);
+      this.render();
+      return this;
+    }
+    /** 禁用插件功能
+     * @description
+     * - 如果当前正在展示中，会清除所有展示的 DOM
+     * - 如果当前未展示，即使后续 Five 状态满足展示要求，也不会展示
+     * */
+
+  }, {
+    key: "disable",
+    value: function disable() {
+      this.enabled = false;
+      this.render();
+      return this;
+    }
+    /** 启用插件功能
+     * @description
+     * - 如果当前符合展示条件，会立刻展示
+     * - 如果不符合展示条件，会等待 Five 状态满足条件后再展示
+     */
+
+  }, {
+    key: "enable",
+    value: function enable() {
+      this.enabled = true;
+      this.render();
+      return this;
+    }
+    /** 监听 Five Mode 变化
+     * @description
+     * Mode 不符合要求时，立刻消失，满足要求时，需要等待动画结束再展示
+     */
+
+  }, {
+    key: "render",
+    value: function render() {
+      if (!this.wrapper) return;
+      ReactDOM.render(this.enabled && this.fiveModeEnabled ? /*#__PURE__*/React.createElement(_RoomLabelItems["default"], {
+        five: this.five,
+        roomLabels: this.roomLabels
+      }) : /*#__PURE__*/React.createElement(React.Fragment, null), this.container);
+    }
+  }]);
+
+  return ModelRoomLabelController;
+}();
+
+exports.ModelRoomLabelController = ModelRoomLabelController;

package/plugins/ModelRoomLabelPlugin/RoomLabelItem.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { Five } from '@realsee/five';
+import { RoomLabel } from './typings';
+declare const RefRoomLabelItem: React.ForwardRefExoticComponent<{
+    five: Five;
+    item: RoomLabel;
+} & React.RefAttributes<HTMLDivElement>>;
+export default RefRoomLabelItem;

package/plugins/ModelRoomLabelPlugin/RoomLabelItem.js

@@ -0,0 +1,48 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _px2rem = _interopRequireDefault(require("../../shared-utils/px2rem"));
+
+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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function RoomLabelItem(props, ref) {
+  var five = props.five;
+  var roomName = props.item.name;
+  var handleClick = React.useCallback(function () {
+    five.setState({
+      panoIndex: props.item.panoIndex,
+      mode: 'Panorama',
+      longitude: props.item.longitude
+    });
+  }, [props.five]);
+  return /*#__PURE__*/React.createElement("div", {
+    onClick: handleClick,
+    ref: ref,
+    className: _style["default"].dynamic([["3619298579", [(0, _px2rem["default"])(roomName.length > 3 ? 8 : 10), (0, _px2rem["default"])(-64), (0, _px2rem["default"])(20), (0, _px2rem["default"])(32), (0, _px2rem["default"])(6), (0, _px2rem["default"])(-44), (0, _px2rem["default"])(48), (0, _px2rem["default"])(1)]]]) + " " + "room-guid-label-plugin__item"
+  }, /*#__PURE__*/React.createElement(_style["default"], {
+    id: "3619298579",
+    dynamic: [(0, _px2rem["default"])(roomName.length > 3 ? 8 : 10), (0, _px2rem["default"])(-64), (0, _px2rem["default"])(20), (0, _px2rem["default"])(32), (0, _px2rem["default"])(6), (0, _px2rem["default"])(-44), (0, _px2rem["default"])(48), (0, _px2rem["default"])(1)]
+  }, [".room-guid-label-plugin__item.__jsx-style-dynamic-selector{position:absolute;z-index:0;font-size:".concat((0, _px2rem["default"])(roomName.length > 3 ? 8 : 10), ";-webkit-transform:'';-ms-transform:'';transform:'';cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}"), ".room-guid-label-plugin__item-text.__jsx-style-dynamic-selector{position:absolute;left:0;top:".concat((0, _px2rem["default"])(-64), ";-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:").concat((0, _px2rem["default"])(20), ";min-width:").concat((0, _px2rem["default"])(32), ";padding:0 ").concat((0, _px2rem["default"])(6), ";pointer-events:all;background:url('//vrlab-static.ljcdn.com/release/web/room-label-bg.23e9d038.png') no-repeat;background-size:100% 100%;white-space:nowrap;}"), ".room-guid-label-plugin__item-bar.__jsx-style-dynamic-selector{position:absolute;top:".concat((0, _px2rem["default"])(-44), ";height:").concat((0, _px2rem["default"])(48), ";width:").concat((0, _px2rem["default"])(1), ";background-image:linear-gradient(to bottom,rgba(255,255,255,1),rgba(255,255,255,0));}")]), /*#__PURE__*/React.createElement("span", {
+    className: _style["default"].dynamic([["3619298579", [(0, _px2rem["default"])(roomName.length > 3 ? 8 : 10), (0, _px2rem["default"])(-64), (0, _px2rem["default"])(20), (0, _px2rem["default"])(32), (0, _px2rem["default"])(6), (0, _px2rem["default"])(-44), (0, _px2rem["default"])(48), (0, _px2rem["default"])(1)]]]) + " " + "room-guid-label-plugin__item-text"
+  }, roomName), /*#__PURE__*/React.createElement("div", {
+    className: _style["default"].dynamic([["3619298579", [(0, _px2rem["default"])(roomName.length > 3 ? 8 : 10), (0, _px2rem["default"])(-64), (0, _px2rem["default"])(20), (0, _px2rem["default"])(32), (0, _px2rem["default"])(6), (0, _px2rem["default"])(-44), (0, _px2rem["default"])(48), (0, _px2rem["default"])(1)]]]) + " " + "room-guid-label-plugin__item-bar"
+  }));
+}
+
+var RefRoomLabelItem = /*#__PURE__*/React.forwardRef(RoomLabelItem);
+var _default = RefRoomLabelItem;
+exports["default"] = _default;

package/plugins/ModelRoomLabelPlugin/RoomLabelItems.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { Five } from '@realsee/five';
+import { RoomLabel } from './typings';
+export default function RoomLabelItems(props: {
+    five: Five;
+    roomLabels: RoomLabel[];
+}): JSX.Element;

package/plugins/ModelRoomLabelPlugin/RoomLabelItems.js

@@ -0,0 +1,149 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = RoomLabelItems;
+
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _three = require("three");
+
+var _RoomLabelItem = _interopRequireDefault(require("./RoomLabelItem"));
+
+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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _construct(Parent, args, Class) { if (_isNativeReflectConstruct()) { _construct = Reflect.construct; } else { _construct = function _construct(Parent, args, Class) { var a = [null]; a.push.apply(a, args); var Constructor = Function.bind.apply(Parent, a); var instance = new Constructor(); if (Class) _setPrototypeOf(instance, Class.prototype); return instance; }; } return _construct.apply(null, arguments); }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function getLabelVisible(five, roomLabelItem) {
+  // 先看是不是在当前展示的楼层上
+  var isLabelInFloor = five.model.shownFloor === null || roomLabelItem.floorIndex === five.model.shownFloor;
+  if (!isLabelInFloor) return false; // 再看是不是被模型遮挡
+
+  var raycaster = new _three.Raycaster();
+  var cameraPosition = five.camera.position.clone();
+  var position = new _three.Vector3(roomLabelItem.position.x, roomLabelItem.position.y, roomLabelItem.position.z);
+  var vectorDistance = position.distanceTo(cameraPosition);
+  raycaster.set(cameraPosition.clone(), position.clone().sub(cameraPosition).normalize());
+
+  var _five$model$intersect = five.model.intersectRaycaster(raycaster),
+      _five$model$intersect2 = _slicedToArray(_five$model$intersect, 1),
+      intersection = _five$model$intersect2[0];
+
+  if (intersection && intersection.distance + 1 < vectorDistance) return false;
+  return true;
+}
+
+function getLabelTransform(five, roomLabelItem, containerWidth, containerHeight) {
+  var position = new _three.Vector3(roomLabelItem.position.x, roomLabelItem.position.y, roomLabelItem.position.z);
+  var mouse = position.clone().project(five.camera);
+  var xOffset = Math.ceil((mouse.x + 1) / 2 * containerWidth);
+  var yOffset = Math.ceil((-mouse.y + 1) / 2 * containerHeight);
+  return "translate(".concat(xOffset, "px, ").concat(yOffset, "px)");
+}
+
+function updateFormatData(five, labels, containerWidth, containerHeight) {
+  labels.forEach(function (roomLabelItem) {
+    // 计算是否可见，入股不可见，不会更新位置
+    roomLabelItem.visible = getLabelVisible(five, roomLabelItem);
+    if (!roomLabelItem.visible) return roomLabelItem; // 更新位置
+
+    roomLabelItem.transform = getLabelTransform(five, roomLabelItem, containerWidth, containerHeight);
+    return true;
+  });
+  labels.filter(function (_ref) {
+    var visible = _ref.visible;
+    return visible;
+  }).map(function (roomLabelItem) {
+    return {
+      roomLabelItem: roomLabelItem,
+      distance: _construct(_three.Vector3, _toConsumableArray(Object.values(roomLabelItem.position))).clone().distanceTo(five.camera.position)
+    };
+  }).sort(function (a, b) {
+    return a.distance - b.distance;
+  }).forEach(function (_ref2, index) {
+    var roomLabelItem = _ref2.roomLabelItem;
+    roomLabelItem.zIndex = index * 10;
+  });
+  return labels;
+}
+
+function RoomLabelItems(props) {
+  var five = props.five;
+  var itemRefs = React.useRef([]);
+  var contentRef = React.useRef(null);
+  var roomLabels = props.roomLabels;
+
+  function onFiveCameraDirectionUpdate() {
+    if (!contentRef.current) return;
+    updateFormatData(five, roomLabels, contentRef.current.clientWidth, contentRef.current.clientHeight).forEach(function (item, index) {
+      var ref = itemRefs.current[index];
+      if (!ref) return;
+
+      if (!item.visible) {
+        ref.style.opacity = '0';
+        ref.style.pointerEvents = 'none';
+        return;
+      }
+
+      ref.style.opacity = '1';
+      ref.style.pointerEvents = 'all';
+      ref.style.transform = item.transform;
+    });
+  }
+
+  React.useEffect(function () {
+    five.on('cameraDirectionUpdate', onFiveCameraDirectionUpdate);
+    onFiveCameraDirectionUpdate();
+    return function () {
+      five.off('cameraDirectionUpdate', onFiveCameraDirectionUpdate);
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: contentRef,
+    className: "jsx-2859587460" + " " + "room-guid-label-plugin__content"
+  }, /*#__PURE__*/React.createElement(_style["default"], {
+    id: "2859587460"
+  }, [".room-guid-label-plugin__content.jsx-2859587460{width:100%;height:100%;position:relative;color:#fff;}"]), roomLabels.map(function (item) {
+    return /*#__PURE__*/React.createElement(_RoomLabelItem["default"], {
+      key: item.id,
+      item: item,
+      five: props.five,
+      ref: function ref(_ref3) {
+        return itemRefs.current.push(_ref3);
+      }
+    });
+  }));
+}

package/plugins/ModelRoomLabelPlugin/index.d.ts

@@ -0,0 +1,8 @@
+import { FivePlugin } from '@realsee/five';
+import { ModelRoomLabelController, ModelRoomLabelPluginParameters } from './Controller';
+export declare const ModelRoomLabelPlugin: FivePlugin<ModelRoomLabelPluginParameters, ModelRoomLabelPluginReturnType>;
+export default ModelRoomLabelPlugin;
+export type { ModelRoomLabelController } from './Controller';
+export type { ModelRoomLabelPluginData, RoomLabel } from './typings';
+export declare type ModelRoomLabelPluginReturnType = ModelRoomLabelController;
+export type { ModelRoomLabelPluginParameters } from './Controller';

package/plugins/ModelRoomLabelPlugin/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.ModelRoomLabelPlugin = void 0;
+
+var _Controller = require("./Controller");
+
+var ModelRoomLabelPlugin = function ModelRoomLabelPlugin(five) {
+  return new _Controller.ModelRoomLabelController(five);
+};
+
+exports.ModelRoomLabelPlugin = ModelRoomLabelPlugin;
+var _default = ModelRoomLabelPlugin;
+exports["default"] = _default;