@realsee/dnalogel 0.1.1 → 0.1.5

package/plugins/ModelEntryDoorGuidePlugin/index.js

@@ -1,15 +1,243 @@
 "use strict";
 
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/es.string.iterator.js");
+
+require("core-js/modules/es.weak-map.js");
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+require("core-js/modules/es.object.define-property.js");
+
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
 
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.promise.js");
+
+require("core-js/modules/es.array.for-each.js");
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+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 _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; }
+
 /**
  * 模型入户门引导插件
  */
-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 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].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 _regenerator["default"].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/ModelExtrudeWallsPlugin/index.d.ts

@@ -0,0 +1,16 @@
+import { FivePlugin } from '@realsee/five';
+export interface ExtrudeWallsDataModel {
+    height: number;
+    exterior: Array<[number, number]>;
+    interior: Array<[number, number]>;
+}
+export interface ModelExtrudeWallsPluginParameterType {
+    data?: ExtrudeWallsDataModel;
+}
+export interface ModelExtrudeWallsPluginPluginReturnType {
+    enable: () => void;
+    disable: () => void;
+    dispose: () => void;
+    load: (data: ExtrudeWallsDataModel) => void;
+}
+export declare const ModelExtrudeWallsPlugin: FivePlugin<ModelExtrudeWallsPluginParameterType, ModelExtrudeWallsPluginPluginReturnType>;

package/plugins/ModelExtrudeWallsPlugin/index.js

@@ -0,0 +1,252 @@
+"use strict";
+
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.string.iterator.js");
+
+require("core-js/modules/es.weak-map.js");
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+require("core-js/modules/es.object.define-property.js");
+
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ModelExtrudeWallsPlugin = void 0;
+
+require("core-js/modules/es.array.for-each.js");
+
+require("core-js/modules/web.dom-collections.for-each.js");
+
+require("core-js/modules/es.function.name.js");
+
+var _five = require("@realsee/five");
+
+var THREE = _interopRequireWildcard(require("three"));
+
+var _nextFrame = require("../../shared-utils/nextFrame");
+
+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; }
+
+var lineTo = function lineTo(d, s) {
+  return d.forEach(function (p, i) {
+    return s[!i ? 'moveTo' : 'lineTo'](p[0], p[1]);
+  });
+};
+
+var generateSideWallUV = function generateSideWallUV() {
+  return [new THREE.Vector2(1, 1), new THREE.Vector2(0, 1), new THREE.Vector2(0, 0), new THREE.Vector2(1, 0)];
+};
+
+var bezierArcTransition = function bezierArcTransition(t) {
+  return -0.7 * (2.4 * t * t * t - 3.6 * t * t + 0.2 * t);
+};
+
+var ModelExtrudeWallsPlugin = function ModelExtrudeWallsPlugin(five) {
+  var parameters = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var state = {
+    data: parameters.data,
+    walls: {},
+    visible: true
+  };
+
+  var wrapper = function wrapper() {
+    if (!state.data) return;
+    var wallShape = new THREE.Shape();
+    var floorplanShape = new THREE.Shape();
+    lineTo(state.data.exterior, wallShape);
+    lineTo(state.data.exterior, floorplanShape);
+    lineTo(state.data.interior, floorplanShape);
+    var bb = new THREE.Box2();
+    bb.setFromPoints(wallShape.extractPoints(1).shape);
+
+    var generateTopUV = function generateTopUV(geometry, vertices, indexA, indexB, indexC) {
+      var ax = vertices[indexA * 3];
+      var ay = vertices[indexA * 3 + 1];
+      var bx = vertices[indexB * 3];
+      var by = vertices[indexB * 3 + 1];
+      var cx = vertices[indexC * 3];
+      var cy = vertices[indexC * 3 + 1];
+      var bbx = bb.max.x - bb.min.x;
+      var bby = bb.max.y - bb.min.y;
+      return [new THREE.Vector2((ax - bb.min.x) / bbx, 1.0 - (ay - bb.min.y) / bby), new THREE.Vector2((bx - bb.min.x) / bbx, 1.0 - (by - bb.min.y) / bby), new THREE.Vector2((cx - bb.min.x) / bbx, 1.0 - (cy - bb.min.y) / bby)];
+    };
+
+    var extrudeSettings = {
+      steps: 1,
+      depth: Math.abs(state.data.height),
+      bevelEnabled: false,
+      UVGenerator: {
+        generateTopUV: generateTopUV,
+        generateSideWallUV: generateSideWallUV
+      }
+    };
+    var geometry1 = new THREE.ExtrudeGeometry(wallShape, extrudeSettings);
+    var geometry2 = new THREE.ExtrudeGeometry(wallShape, extrudeSettings);
+    var geometry3 = new THREE.ExtrudeGeometry(floorplanShape, extrudeSettings);
+    geometry1.faces.forEach(function (face) {
+      var temp = face.a;
+      face.a = face.c;
+      face.c = temp;
+    });
+    geometry1.faceVertexUvs.forEach(function (faceVertexUvs) {
+      faceVertexUvs.forEach(function (uv) {
+        var temp = uv[0];
+        uv[0] = uv[2];
+        uv[2] = temp;
+      });
+    });
+    geometry1.computeFaceNormals();
+    var material0 = new THREE.MeshBasicMaterial({
+      color: 0xc8c8c8,
+      // color: 0x2bb8aa,
+      wireframe: false,
+      transparent: true,
+      opacity: 0.9
+    });
+    var material1 = new THREE.MeshBasicMaterial({
+      color: 0xffeedf,
+      wireframe: false,
+      transparent: true,
+      opacity: 0.7
+    });
+    var material2 = new THREE.MeshBasicMaterial({
+      color: 0xffffff,
+      wireframe: false,
+      transparent: true,
+      opacity: 0,
+      depthTest: false
+    });
+    var material3 = new THREE.MeshBasicMaterial({
+      color: 0xc8c8c8,
+      // color: 0x2bb8aa,
+      wireframe: false,
+      transparent: true,
+      opacity: 0.2,
+      depthTest: false
+    });
+    var renderOrder = 99;
+
+    var initMesh = function initMesh(m) {
+      m.rotation.x = -Math.PI / 2;
+      m.rotation.y = 0;
+      m.rotation.z = 0; // Math.PI / 2
+
+      m.position.y = five.model.bounding.min.y;
+      m.name = 'extrude-walls' + renderOrder;
+      m.renderOrder = renderOrder++;
+      five.needsRender = true;
+    }; // 内墙
+
+
+    var insideWall = new THREE.Mesh(geometry1, [material2, material0]); // 外墙
+
+    var outsideWall = new THREE.Mesh(geometry2, [material2, material3]); // 内墙
+
+    var lookDownWall = new THREE.Mesh(geometry3, [material1, material2]);
+
+    var append = function append() {
+      initMesh(insideWall);
+      initMesh(lookDownWall);
+      initMesh(outsideWall);
+      five.scene.add(insideWall);
+      five.scene.add(outsideWall);
+      five.scene.add(lookDownWall);
+      state.walls.inside = insideWall;
+      state.walls.outside = outsideWall;
+      state.walls.lookDown = lookDownWall;
+      state.visible = true;
+      visible(five.currentMode === _five.Five.Mode.Floorplan);
+    };
+
+    if (five.model.loaded) {
+      append();
+    } else {
+      five.once('modelLoaded', function () {
+        return append();
+      });
+    }
+  };
+
+  var enable = function enable() {
+    state.visible = true;
+    visible(true);
+  };
+
+  var disable = function disable() {
+    state.visible = false;
+    visible(false);
+  };
+
+  var visible = function visible() {
+    var flag = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+    if (state.walls.inside) state.walls.inside.visible = flag;
+    if (state.walls.outside) state.walls.outside.visible = flag;
+    if (state.walls.lookDown) state.walls.lookDown.visible = flag;
+    five.needsRender = true;
+  };
+
+  var modeChangeListener = function modeChangeListener(mode, prevMode) {
+    if (!state.visible) return;
+
+    if (prevMode === _five.Five.Mode.Floorplan) {
+      five.once('initAnimationEnded', function () {
+        return (0, _nextFrame.nextFrame)(function () {
+          return visible(false);
+        });
+      });
+      return;
+    }
+
+    return visible(mode === _five.Five.Mode.Floorplan);
+  };
+
+  var cameraDirectionUpdateListener = function cameraDirectionUpdateListener(_ref) {
+    var latitude = _ref.latitude;
+    if (state.walls.inside) state.walls.inside.material[1].opacity = bezierArcTransition(latitude / (Math.PI / 2));
+    if (state.walls.outside) state.walls.outside.material[1].opacity = bezierArcTransition(latitude / (Math.PI / 2));
+    if (state.walls.lookDown) state.walls.lookDown.material[0].opacity = bezierArcTransition(latitude / (Math.PI / 2));
+  };
+
+  five.on('modeChange', modeChangeListener);
+  five.on('cameraDirectionUpdate', cameraDirectionUpdateListener);
+
+  var dispose = function dispose() {
+    five.off('modeChange', modeChangeListener);
+    five.off('cameraDirectionUpdate', cameraDirectionUpdateListener);
+    if (state.walls.inside) five.scene.remove(state.walls.inside);
+    if (state.walls.outside) five.scene.remove(state.walls.outside);
+    if (state.walls.lookDown) five.scene.remove(state.walls.lookDown);
+    state.data = undefined;
+    state.walls = {};
+    state.visible = true;
+  };
+
+  wrapper();
+
+  var load = function load(data) {
+    state.data = data;
+    if (state.walls.inside) five.scene.remove(state.walls.inside);
+    if (state.walls.outside) five.scene.remove(state.walls.outside);
+    if (state.walls.lookDown) five.scene.remove(state.walls.lookDown);
+    wrapper();
+  };
+
+  return {
+    enable: enable,
+    disable: disable,
+    dispose: dispose,
+    load: load
+  };
+};
+
+exports.ModelExtrudeWallsPlugin = ModelExtrudeWallsPlugin;

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;
+}