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

package/components/GLTFView/index.d.ts

@@ -6,7 +6,7 @@ export declare type GLTFViewPropTypes = {
     refs?: (gltfViewer: GLTFViewer) => void;
 } & GLTFViewerConfig;
 /**
- * **GLTFViewer** 预览 `glTF` 模型文件（支持.gltf和.glb格式），附带光照等效果。
+ * **GLTFViewer** 预览 `glTF` 模型文件（支持 `.gltf` 和 `.glb` 格式），附带光照等效果等配置。
  *
  * ### Usage
  *
@@ -96,6 +96,12 @@ export declare type GLTFViewPropTypes = {
  * pointLight?: THREE.PointLight | false
  * directionalLight?: THREE.DirectionalLight | false
  * ambientLight?: THREE.AmbientLight | false
+ * // 色调映射
+ * toneMapping?: {
+ *   toneMapping?: THREE.ToneMapping
+ *   toneMappingExposure?: number
+ * }
+ *
  * ```
  * 自带三种默认光照配置，你可以提供自己的光照实例。如果设置 `pointLight: false` 则禁用该光照效果。
  *

package/components/GLTFView/index.js

@@ -36,7 +36,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 /**
- * **GLTFViewer** 预览 `glTF` 模型文件（支持.gltf和.glb格式），附带光照等效果。
+ * **GLTFViewer** 预览 `glTF` 模型文件（支持 `.gltf` 和 `.glb` 格式），附带光照等效果等配置。
  *
  * ### Usage
  *
@@ -126,6 +126,12 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * pointLight?: THREE.PointLight | false
  * directionalLight?: THREE.DirectionalLight | false
  * ambientLight?: THREE.AmbientLight | false
+ * // 色调映射
+ * toneMapping?: {
+ *   toneMapping?: THREE.ToneMapping
+ *   toneMappingExposure?: number
+ * }
+ *
  * ```
  * 自带三种默认光照配置，你可以提供自己的光照实例。如果设置 `pointLight: false` 则禁用该光照效果。
  *

package/libs/gltf-viewer/index.d.ts

@@ -16,7 +16,10 @@ export interface GLTFViewerConfig {
     ambientLight?: THREE.AmbientLight | false;
     minFov?: number;
     maxFov?: number;
-    toneMapping?: boolean;
+    toneMapping?: {
+        toneMapping?: THREE.ToneMapping;
+        toneMappingExposure?: number;
+    };
 }
 export interface GLTFViewerState {
     fov: number;
@@ -43,14 +46,16 @@ export declare class GLTFViewer extends Subscribe<GLTFViewerEventMap> {
         latitude?: number;
         longitude?: number;
     });
+    set minFov(fov: number);
+    get minFov(): number;
+    set maxFov(fov: number);
+    get maxFov(): number;
     /**
      *
      * @param url glTF 模型CDN地址
      * @param options adaptive 是否开启自适应fov
      */
-    load(url: string, options?: {
-        adaptive: boolean;
-    }): void;
+    load(url: string): void;
     /**
      * 挂载
      * @param container
@@ -66,4 +71,8 @@ export declare class GLTFViewer extends Subscribe<GLTFViewerEventMap> {
      * 销毁
      */
     dispose(): void;
+    /**
+     * 响应式fov
+     */
+    fitFov(): void;
 }

package/libs/gltf-viewer/index.js

@@ -23,12 +23,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.GLTFViewer = void 0;
 
+require("core-js/modules/es.object.assign.js");
+
 require("core-js/modules/es.function.bind.js");
 
 require("core-js/modules/web.timers.js");
 
-require("core-js/modules/es.object.assign.js");
-
 require("core-js/modules/es.object.to-string.js");
 
 require("core-js/modules/es.promise.js");
@@ -102,7 +102,10 @@ var Controller = /*#__PURE__*/function () {
     (0, _defineProperty2["default"])(this, "longitude", 0);
     (0, _defineProperty2["default"])(this, "latitude", 0);
     (0, _defineProperty2["default"])(this, "needsRender", false);
-    this.config = config; // 异步事件回调
+    this.config = Object.assign({
+      maxFov: 120,
+      minFov: 1
+    }, config); // 异步事件回调
 
     this.callbacks = callbacks; // 默认状态参数
 
@@ -135,8 +138,11 @@ var Controller = /*#__PURE__*/function () {
     this.renderer.outputEncoding = THREE.sRGBEncoding;
 
     if (config.toneMapping) {
-      this.renderer.toneMapping = THREE.ReinhardToneMapping;
-      this.renderer.toneMappingExposure = 1.5;
+      var _config$toneMapping = config.toneMapping,
+          toneMapping = _config$toneMapping.toneMapping,
+          toneMappingExposure = _config$toneMapping.toneMappingExposure;
+      if (toneMapping) this.renderer.toneMapping = toneMapping;
+      if (toneMappingExposure !== undefined) this.renderer.toneMappingExposure = toneMappingExposure;
     }
 
     if (config.backgroundColor) {
@@ -149,10 +155,10 @@ var Controller = /*#__PURE__*/function () {
     } // 相机
 
 
-    this.camera = new THREE.PerspectiveCamera(this.fov, 1, 0.1, 1000); // 光照
+    this.camera = new THREE.PerspectiveCamera(this.fov, 1, 0.1, 1500); // 光照
 
     if (config.pointLight !== false) {
-      this.pointLight = config.pointLight || new THREE.PointLight(0xfffffff, 1, 10000);
+      this.pointLight = config.pointLight || new THREE.PointLight(0xfffffff, 1, 1500);
       this.scene.add(this.pointLight);
     }
 
@@ -267,18 +273,14 @@ 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)
-      // }
-
+      this.scene.add(this.target.scene);
       setTimeout(function () {
         if (object === _this3.target) {
           _this3.target.scene.visible = true;
 
           _this3.update({});
+
+          _this3.callbacks.loaded(object);
         }
       }, 50);
     }
@@ -388,34 +390,13 @@ var Controller = /*#__PURE__*/function () {
         fov = calcFov(d, radius * 2, this.renderer.domElement.offsetWidth / this.renderer.domElement.offsetHeight);
       }
 
+      fov = Math.max(this.minFov, Math.min(this.maxFov, fov));
+
       if (fov !== this.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,
@@ -574,8 +555,6 @@ var Controller = /*#__PURE__*/function () {
         loader.load(url, function (gltf) {
           _this6.setTarget(gltf);
 
-          _this6.callbacks.loaded(gltf);
-
           resolve(true);
         }, function (xhr) {
           _this6.callbacks.progressing(xhr.loaded / xhr.total * 100);
@@ -684,18 +663,42 @@ var GLTFViewer = /*#__PURE__*/function (_Subscribe) {
         longitude: longitude === undefined ? controller.longitude : longitude
       });
     }
+  }, {
+    key: "minFov",
+    get: function get() {
+      var controller = caches[this.uuid];
+      if (!controller) throw new Error(ERROR_NO_CONTROLLER);
+      return controller.minFov;
+    },
+    set: function set(fov) {
+      var controller = caches[this.uuid];
+      if (!controller) throw new Error(ERROR_NO_CONTROLLER);
+      controller.config.minFov = fov;
+      controller.update({});
+    }
+  }, {
+    key: "maxFov",
+    get: function get() {
+      var controller = caches[this.uuid];
+      if (!controller) throw new Error(ERROR_NO_CONTROLLER);
+      return controller.maxFov;
+    }
     /**
      *
      * @param url glTF 模型CDN地址
      * @param options adaptive 是否开启自适应fov
      */
-
+    ,
+    set: function set(fov) {
+      var controller = caches[this.uuid];
+      if (!controller) throw new Error(ERROR_NO_CONTROLLER);
+      console.log('maxFov', controller.config);
+      controller.config.maxFov = fov;
+      controller.update({});
+    }
   }, {
     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);
@@ -737,6 +740,19 @@ var GLTFViewer = /*#__PURE__*/function (_Subscribe) {
       if (controller.dispose) controller.dispose();
       delete caches[this.uuid];
     }
+    /**
+     * 响应式fov
+     */
+
+  }, {
+    key: "fitFov",
+    value: function fitFov() {
+      var controller = caches[this.uuid];
+      if (!controller) throw new Error(ERROR_NO_CONTROLLER);
+      controller.update({
+        fov: 0
+      });
+    }
   }]);
   return GLTFViewer;
 }(_Subscribe2.Subscribe);

package/package.json

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

package/plugins/ModelChassisCompassPlugin/index.d.ts

@@ -15,5 +15,5 @@ export interface ModelChassisCompassPluginExportType {
 /**
  * 模型底盘指南针插件
  */
-declare const ModelChassisCompassPlugin: FivePlugin<ModelChassisCompassPluginParameterType, ModelChassisCompassPluginExportType>;
+export declare const ModelChassisCompassPlugin: FivePlugin<ModelChassisCompassPluginParameterType, ModelChassisCompassPluginExportType>;
 export default ModelChassisCompassPlugin;

package/plugins/ModelChassisCompassPlugin/index.js

@@ -21,7 +21,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports["default"] = exports.ModelChassisCompassPlugin = void 0;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
@@ -153,5 +153,6 @@ var ModelChassisCompassPlugin = function ModelChassisCompassPlugin(five, params)
   };
 };
 
+exports.ModelChassisCompassPlugin = ModelChassisCompassPlugin;
 var _default = ModelChassisCompassPlugin;
 exports["default"] = _default;