@realsee/dnalogel 0.1.7-alpha.3 → 0.1.7-alpha.4

package/libs/gltf-viewer/index.js

@@ -67,8 +67,6 @@ var _coordsMoveByOffset = require("./coordsMoveByOffset");
 
 var _getFrameTime = require("./getFrameTime");
 
-var _formatRad = require("./formatRad");
-
 var _coordsToDirection = require("./coordsToDirection");
 
 var _mouseWheel = require("./mouseWheel");
@@ -89,8 +87,8 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 var defaultPos = {
   longitude: 0,
-  latitude: -0.3,
-  fov: 35
+  latitude: 0,
+  fov: 0
 };
 var ERROR_NO_CONTROLLER = 'GLTFViewer 实例丢失';
 var loader = new _GLTFLoader.GLTFLoader();
@@ -100,7 +98,7 @@ var Controller = /*#__PURE__*/function () {
     var _this = this;
 
     (0, _classCallCheck2["default"])(this, Controller);
-    (0, _defineProperty2["default"])(this, "fov", 35);
+    (0, _defineProperty2["default"])(this, "fov", 0);
     (0, _defineProperty2["default"])(this, "longitude", 0);
     (0, _defineProperty2["default"])(this, "latitude", 0);
     (0, _defineProperty2["default"])(this, "needsRender", false);
@@ -135,8 +133,11 @@ var Controller = /*#__PURE__*/function () {
       alpha: true
     });
     this.renderer.outputEncoding = THREE.sRGBEncoding;
-    this.renderer.toneMapping = THREE.ReinhardToneMapping;
-    this.renderer.toneMappingExposure = 1.5;
+
+    if (config.toneMapping) {
+      this.renderer.toneMapping = THREE.ReinhardToneMapping;
+      this.renderer.toneMappingExposure = 1.5;
+    }
 
     if (config.backgroundColor) {
       this.renderer.setClearColor(config.backgroundColor, 0);
@@ -148,10 +149,10 @@ var Controller = /*#__PURE__*/function () {
     } // 相机
 
 
-    this.camera = new THREE.PerspectiveCamera(this.fov, 1, 0.1, 10000); // 光照
+    this.camera = new THREE.PerspectiveCamera(this.fov, 1, 0.1, 1000); // 光照
 
     if (config.pointLight !== false) {
-      this.pointLight = config.pointLight || new THREE.PointLight(0xfffffff, 1, 100000);
+      this.pointLight = config.pointLight || new THREE.PointLight(0xfffffff, 1, 10000);
       this.scene.add(this.pointLight);
     }
 
@@ -219,7 +220,7 @@ var Controller = /*#__PURE__*/function () {
   (0, _createClass2["default"])(Controller, [{
     key: "minFov",
     get: function get() {
-      return this.config.minFov || 20;
+      return this.config.minFov || 1;
     }
   }, {
     key: "maxFov",
@@ -266,30 +267,13 @@ var Controller = /*#__PURE__*/function () {
 
       this.target = object;
       this.target.scene.visible = false;
-      this.scene.add(this.target.scene); // ==== 调试逻辑 =====
-
-      {// const boxHelper = new THREE.BoxHelper(this.target.scene, 0x2bb8aa)
-        // this.scene.add(boxHelper)
-        // const axesHelper = new THREE.AxesHelper(300)
-        // this.scene.add(axesHelper)
-        // const boundingSphere = boxHelper.geometry.boundingSphere
-        // if (boundingSphere) {
-        //   const { center, radius } = boundingSphere
-        //   const fov = Math.PI / 2 - Math.asin(this.renderer.domElement.offsetWidth / 2 / radius)
-        //   console.log('fov', fov, this.renderer.domElement.offsetWidth / 2, radius)
-        // }
-        // const VFov = 45
-        // const aspect = this.camera.aspect
-        // // // 计算水平 fov
-        // const HFov = (2 * Math.atan(Math.tan((VFov * Math.PI) / 180 / 2) * aspect) * 180) / Math.PI
-        // const zEye = Math.abs(radius) / Math.sin(((HFov / 2) * Math.PI) / 180)
-        // console.log('HFOV', HFov, zEye)
-        // const lookPos = new THREE.Vector3(
-        //   center.x + this.scene.position.x,
-        //   center.x + this.scene.position.y,
-        //   center.x + this.scene.position.z,
-        // )
-      }
+      this.scene.add(this.target.scene); // {
+      //   const boxHelper = new THREE.BoxHelper(this.target.scene, 0x2bb8aa)
+      //   this.scene.add(boxHelper)
+      //   const axesHelper = new THREE.AxesHelper(300)
+      //   this.scene.add(axesHelper)
+      // }
+
       setTimeout(function () {
         if (object === _this3.target) {
           _this3.target.scene.visible = true;
@@ -354,37 +338,84 @@ var Controller = /*#__PURE__*/function () {
         latitude = state.latitude;
       }
 
-      var center = new THREE.Vector3();
-      var box = new THREE.Box3();
+      if (!this.target || !this.target.scene) return;
+      var boxHelper = new THREE.BoxHelper(this.target.scene, 0x2bb8aa);
 
-      if (this.target) {
-        box.expandByObject(this.target.scene);
-        box.getCenter(center);
-      }
+      var _ref = boxHelper.geometry.boundingSphere || {},
+          center = _ref.center,
+          radius = _ref.radius;
+
+      if (!center || !radius) return;
+      var box = new THREE.Box3();
+      box.expandByObject(this.target.scene);
+      box.getCenter(center); // 距离
+
+      var distance = radius / Math.sin(Math.PI / 4) * 3;
+      {// debug
+        // const geometry = new THREE.SphereGeometry(radius, 32, 16)
+        // const material = new THREE.MeshBasicMaterial({ color: 0x0000aa, wireframe: true })
+        // const sphere = new THREE.Mesh(geometry, material)
+        // sphere.position.copy(center.clone())
+        // this.scene.add(sphere)
+      } // 朝向
 
-      longitude = (0, _formatRad.formatRad)(longitude);
-      latitude = Math.max(-Math.PI / 2 + 0.01, Math.min(+Math.PI / 2, latitude));
-      var distance = Math.max(center.distanceTo(box.min), center.distanceTo(box.max));
       var direction = (0, _coordsToDirection.coordsToDirection)({
         longitude: longitude,
         latitude: latitude
       });
-      direction.setLength(distance * 3);
+      direction.setLength(distance);
       this.camera.position.copy(center.clone().add(direction));
       this.camera.lookAt(center);
-      var lightDirection = (0, _coordsToDirection.coordsToDirection)({
-        longitude: longitude,
-        latitude: -Math.PI / 6
-      });
-      lightDirection.setLength(distance * 3);
-      if (this.pointLight) this.pointLight.position.copy(center.clone().add(lightDirection));
+
+      if (this.pointLight) {
+        var lightDirection = (0, _coordsToDirection.coordsToDirection)({
+          longitude: longitude,
+          latitude: -Math.PI / 6
+        });
+        lightDirection.setLength(distance * 3);
+        this.pointLight.position.copy(center.clone().add(lightDirection));
+      }
+
+      var calcFov = function calcFov(distance, width, r) {
+        var vertical = r < 1 ? width / r : width;
+        var fov = Math.atan(vertical / distance / 2) * 2 * (180 / Math.PI);
+        return fov;
+      };
+
+      var d = this.camera.position.distanceTo(center);
+
+      if (fov === 0) {
+        fov = calcFov(d, radius * 2, this.renderer.domElement.offsetWidth / this.renderer.domElement.offsetHeight);
+      }
 
       if (fov !== this.fov) {
-        fov = Math.max(25, Math.min(this.maxFov, fov));
+        fov = Math.max(this.minFov, Math.min(this.maxFov, fov));
         this.camera.fov = fov;
         this.camera.updateProjectionMatrix();
       }
 
+      this.camera.updateProjectionMatrix(); // const center = new THREE.Vector3()
+      // const box = new THREE.Box3()
+      // if (this.target) {
+      //   box.expandByObject(this.target.scene)
+      //   box.getCenter(center)
+      // }
+      // longitude = formatRad(longitude)
+      // latitude = Math.max(-Math.PI / 2 + 0.01, Math.min(+Math.PI / 2, latitude))
+      // const distance = Math.max(center.distanceTo(box.min), center.distanceTo(box.max))
+      // const direction = coordsToDirection({ longitude, latitude })
+      // direction.setLength(distance * 3)
+      // this.camera.position.copy(center.clone().add(direction))
+      // this.camera.lookAt(center)
+      // const lightDirection = coordsToDirection({ longitude, latitude: -Math.PI / 6 })
+      // lightDirection.setLength(distance * 3)
+      // if (this.pointLight) this.pointLight.position.copy(center.clone().add(lightDirection))
+      // if (fov !== this.fov) {
+      //   fov = Math.max(25, Math.min(this.maxFov, fov))
+      //   this.camera.fov = fov
+      //   this.camera.updateProjectionMatrix()
+      // }
+
       var needsRender = this.fov !== fov || this.longitude !== longitude || this.latitude !== latitude;
       Object.assign(this, {
         longitude: longitude,
@@ -483,8 +514,9 @@ var Controller = /*#__PURE__*/function () {
         return;
       }
 
+      var fov = this.__pinchCurrentFov ? this.__pinchCurrentFov / scale : 1;
       this.update({
-        fov: (this.__pinchCurrentFov || 0) / scale
+        fov: fov
       });
     }
   }, {
@@ -526,8 +558,9 @@ var Controller = /*#__PURE__*/function () {
     key: "__onMouseWheel",
     value: function __onMouseWheel(event) {
       this.__interiaMovement = false;
+      var fov = this.fov - event.delta;
       this.update({
-        fov: this.fov - event.delta
+        fov: fov <= 1 ? 1 : fov
       });
     }
   }, {
@@ -602,6 +635,9 @@ var GLTFViewer = /*#__PURE__*/function (_Subscribe) {
         return _this7.emit('loadError', error);
       }
     });
+    Object.assign(window, {
+      $controller: controller
+    });
     caches[_this7.uuid] = controller;
     return _this7;
   }
@@ -636,10 +672,10 @@ var GLTFViewer = /*#__PURE__*/function (_Subscribe) {
       });
       return proxy;
     },
-    set: function set(_ref) {
-      var fov = _ref.fov,
-          latitude = _ref.latitude,
-          longitude = _ref.longitude;
+    set: function set(_ref2) {
+      var fov = _ref2.fov,
+          latitude = _ref2.latitude,
+          longitude = _ref2.longitude;
       var controller = caches[this.uuid];
       if (!controller) throw new Error(ERROR_NO_CONTROLLER);
       controller.update({
@@ -651,11 +687,15 @@ var GLTFViewer = /*#__PURE__*/function (_Subscribe) {
     /**
      *
      * @param url glTF 模型CDN地址
+     * @param options adaptive 是否开启自适应fov
      */
 
   }, {
     key: "load",
     value: function load(url) {
+      var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+        adaptive: true
+      };
       var controller = caches[this.uuid];
       if (!controller) throw new Error(ERROR_NO_CONTROLLER);
       controller.load(url);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@realsee/dnalogel",
-  "version": "0.1.7-alpha.3",
+  "version": "0.1.7-alpha.4",
   "description": "如视前端 Components、Plugins 兼部分 SDKs \"Dnalogel\" 库。",
   "author": "BEIKE REALSEE TECHNOLOGY (HK) LIMITED",
   "peerDependencies": {

package/plugins/ModelEntryDoorGuidePlugin/index.d.ts

@@ -19,4 +19,8 @@ export interface ModelEntryDoorGuidePluginExportType {
  * 模型入户门引导插件
  */
 declare const ModelEntryDoorGuidePlugin: FivePlugin<ModelEntryDoorGuidePluginParameterType, ModelEntryDoorGuidePluginExportType>;
+export declare const modelEntryDoorGuidePluginServerParams: {
+    name: string;
+    version: number;
+};
 export default ModelEntryDoorGuidePlugin;

package/plugins/ModelEntryDoorGuidePlugin/index.js

@@ -19,7 +19,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.modelEntryDoorGuidePluginServerParams = exports["default"] = void 0;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
@@ -243,5 +243,10 @@ var ModelEntryDoorGuidePlugin = function ModelEntryDoorGuidePlugin(five, params)
   };
 };
 
+var modelEntryDoorGuidePluginServerParams = {
+  name: 'ModelEntryDoorGuidePlugin',
+  version: 0
+};
+exports.modelEntryDoorGuidePluginServerParams = modelEntryDoorGuidePluginServerParams;
 var _default = ModelEntryDoorGuidePlugin;
 exports["default"] = _default;

package/plugins/ModelRoomLabelPlugin/index.d.ts

@@ -2,6 +2,10 @@ import { FivePlugin } from '@realsee/five';
 import { ModelRoomLabelController, ModelRoomLabelPluginParameters } from './Controller';
 export declare const ModelRoomLabelPlugin: FivePlugin<ModelRoomLabelPluginParameters, ModelRoomLabelPluginReturnType>;
 export default ModelRoomLabelPlugin;
+export declare const modelRoomLabelPluginServerParams: {
+    name: string;
+    version: number;
+};
 export type { ModelRoomLabelController } from './Controller';
 export type { ModelRoomLabelPluginData, RoomLabel } from './typings';
 export declare type ModelRoomLabelPluginReturnType = ModelRoomLabelController;

package/plugins/ModelRoomLabelPlugin/index.js

@@ -5,7 +5,7 @@ require("core-js/modules/es.object.define-property.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.ModelRoomLabelPlugin = void 0;
+exports.modelRoomLabelPluginServerParams = exports["default"] = exports.ModelRoomLabelPlugin = void 0;
 
 var _Controller = require("./Controller");
 
@@ -15,4 +15,9 @@ var ModelRoomLabelPlugin = function ModelRoomLabelPlugin(five) {
 
 exports.ModelRoomLabelPlugin = ModelRoomLabelPlugin;
 var _default = ModelRoomLabelPlugin;
-exports["default"] = _default;
+exports["default"] = _default;
+var modelRoomLabelPluginServerParams = {
+  name: 'ModelRoomLabelPlugin',
+  version: 0
+};
+exports.modelRoomLabelPluginServerParams = modelRoomLabelPluginServerParams;

package/plugins/PanoMeasurePlugin/Controller/BaseController.d.ts

@@ -0,0 +1,36 @@
+import Line from '../Model/line';
+import Magnifier from '../Modules/Magnifier';
+import FiveHelper from '../Modules/FiveHelper';
+import { Group } from 'three';
+import { Model } from '../Model';
+import { PluginEvent } from '../typings/event.type';
+import { Five, Intersection, IntersectMeshInterface, Subscribe } from '@realsee/five';
+import { UserDistanceItem } from '../utils/distanceDom';
+export interface IControllerParams {
+    five: Five;
+    group: Group;
+    model: Model;
+    mouseGroup: Group;
+    container: Element;
+    magnifier: Magnifier;
+    fiveHelper: FiveHelper;
+    hook: Subscribe<PluginEvent>;
+    userDistanceItemCreator?: () => UserDistanceItem;
+}
+export default abstract class BaseController {
+    protected five: Five;
+    protected group: Group;
+    protected model: Model;
+    protected disposed: boolean;
+    protected mouseGroup: Group;
+    protected container: Element;
+    protected fiveHelper: FiveHelper;
+    protected hook: IControllerParams['hook'];
+    protected magnifier: IControllerParams['magnifier'];
+    protected userDistanceItemCreator: IControllerParams['userDistanceItemCreator'];
+    constructor(params: IControllerParams);
+    protected removeLine(line: Line): void;
+    protected updateDistanceUI: () => void;
+    protected updateMouseGroup(intersection: Intersection, mesh?: IntersectMeshInterface): Group;
+    protected dispose(): void;
+}

package/plugins/PanoMeasurePlugin/Controller/BaseController.js

@@ -0,0 +1,103 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+require("core-js/modules/es.array.for-each.js");
+
+require("core-js/modules/web.dom-collections.for-each.js");
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _ironbox = require("../utils/ironbox");
+
+var BaseController = /*#__PURE__*/function () {
+  function BaseController(params) {
+    var _this = this;
+
+    (0, _classCallCheck2["default"])(this, BaseController);
+    (0, _defineProperty2["default"])(this, "disposed", false);
+    (0, _defineProperty2["default"])(this, "updateDistanceUI", function () {
+      _this.model.lines.forEach(function (line) {
+        return line.distanceItem.update(_this.five);
+      });
+    });
+    // ==================== Params ====================
+    this.five = params.five;
+    this.hook = params.hook;
+    this.model = params.model;
+    this.magnifier = params.magnifier;
+    this.container = params.container;
+    this.fiveHelper = params.fiveHelper;
+    this.userDistanceItemCreator = params.userDistanceItemCreator; // ==================== Groups ====================
+
+    this.group = params.group;
+    this.mouseGroup = params.mouseGroup;
+    var fiveElement = this.five.getElement();
+
+    if (fiveElement) {
+      fiveElement.addEventListener('touchstart', _ironbox.preventDefault);
+      fiveElement.addEventListener('contextmenu', _ironbox.preventDefault);
+    }
+  }
+
+  (0, _createClass2["default"])(BaseController, [{
+    key: "removeLine",
+    value: function removeLine(line) {
+      this.group.remove(line.mesh, line.lightMesh);
+      line.distanceItem.remove();
+      this.five.needsRender = true;
+    }
+  }, {
+    key: "updateMouseGroup",
+    value: function updateMouseGroup(intersection, mesh) {
+      if (!intersection) return this.mouseGroup; // ============ update mouseGroup position ============
+
+      var adsorbentPoint = this.fiveHelper.getAdsorbentPoint(intersection);
+      var viewPosition = adsorbentPoint ? adsorbentPoint : intersection.point;
+      this.mouseGroup.position.copy(viewPosition); // ============ update mouseGroup quaternion ============
+
+      if (mesh) {
+        this.mouseGroup.quaternion.copy(mesh.quaternion);
+      } else if (intersection.face) {
+        var normal = intersection.face.normal;
+        var positionVector = normal.clone().multiplyScalar(0.05);
+        var position = intersection.point.clone().add(positionVector);
+        var lookAtVector = position.clone().add(positionVector);
+        this.mouseGroup.lookAt(lookAtVector);
+      }
+
+      return this.mouseGroup;
+    }
+  }, {
+    key: "dispose",
+    value: function dispose() {
+      var _this2 = this;
+
+      this.disposed = true;
+      this.magnifier.dispose();
+      this.model.lines.forEach(function (line) {
+        return _this2.removeLine(line);
+      });
+      var fiveElement = this.five.getElement();
+
+      if (fiveElement) {
+        fiveElement.removeEventListener('touchstart', _ironbox.preventDefault);
+        fiveElement.removeEventListener('contextmenu', _ironbox.preventDefault);
+      }
+    }
+  }]);
+  return BaseController;
+}();
+
+exports["default"] = BaseController;

package/plugins/PanoMeasurePlugin/Controller/EditController.d.ts

@@ -0,0 +1,52 @@
+import { Model } from '../Model';
+import Line from '../Model/line';
+import { LineJson } from '../typings/data';
+import BaseController, { IControllerParams } from './BaseController';
+export interface EditEvent {
+    editedLineChange: (lines: LineJson[]) => void;
+}
+export default class EditController extends BaseController {
+    type: string;
+    model: Model;
+    private pressPoint?;
+    private hasAppendDashed;
+    private hasAppendMouseGroup;
+    private fiveElement?;
+    /** 上一个端点位置 */
+    private lastPoint;
+    /** 鼠标点到上一个端点连接的虚线 */
+    private dashed;
+    private hammer?;
+    /** 根据 intersection 更新放大镜和吸附点 */
+    private onIntersectionUpdate;
+    constructor(params: IControllerParams);
+    dispose(): void;
+    getEditingLines(): Line[];
+    /** 撤销编辑 */
+    revoke: () => void;
+    private onMouseLeave;
+    /** 编辑线条发生改变时通知外部 */
+    private onLineChanged;
+    private onPress;
+    /**
+     * 1. 如果之前没有长按行为「即没有长按点时」-> 滑动全景
+     * 2. 如果有长按点，把长按点位置更新为当前位置
+     */
+    private onPan;
+    private onPanEnd;
+    /**
+     * 1. 如果存在上一个点，需要绘制当前点到上一个点的连线
+     * 2. 把上一个点的位置更新为当前点的位置
+     * 3. 清除 mouseGroup 和 magnifier
+     */
+    private onTap;
+    private onWantsTapGesture;
+    /** 编辑时取消走点 */
+    private onWantsToMoveToPano;
+    /** 存在长按点时不能移动全景 */
+    private onWantsPanGesture;
+    /** 移动全景时更新 distanceItem 在屏幕上的位置 */
+    private onCameraUpdate;
+    /** 更新虚线 */
+    private updateDashed;
+}