@realsee/dnalogel 0.1.5 → 0.1.7-alpha.4

package/components/GLTFView/index.d.ts

@@ -0,0 +1,104 @@
+import * as React from 'react';
+import { GLTFViewer, GLTFViewerConfig } from '../../libs/gltf-viewer';
+export declare type GLTFViewPropTypes = {
+    url: string;
+    className?: string;
+    refs?: (gltfViewer: GLTFViewer) => void;
+} & GLTFViewerConfig;
+/**
+ * **GLTFViewer** 预览 `glTF` 模型文件（支持.gltf和.glb格式），附带光照等效果。
+ *
+ * ### Usage
+ *
+ * 基础用法：
+ *
+ * ```jsx
+ * import { GLTFViewer } from '@realsee/dnalogel/libs/gltf-viewer'
+ *
+ * // 创建实例
+ * const gltfViewer = new GLTFViewer({
+ *  pixelRatio: 1,
+ * })
+ *
+ * // 挂载至 DOM 节点
+ * gltfViewer.appendTo(ref.current)
+ *
+ * // 加载模型文件
+ * await gltfViewer.load(glbCDNUrl)
+ *
+ * // 输出当前模型状态数据
+ * console.log(gltfViewer.state)
+ * // { longitude: 0, latitude: -0.3, fov: 35 }
+ *
+ * // 设置当前模型状态：直接给状态对象赋值（立即生效）
+ * gltfViewer.state = { longitude: 0, latitude: -0.3, fov: 35 }
+ *
+ * // 设置当前模型状态：直接给状态对象单个属性赋值（立即生效）
+ * gltfViewer.state.fov = 50
+ *
+ * ```
+ *
+ * 事件监听：
+ *
+ * ```jsx
+ * gltfViewer.on('stateChange', (state: GLTFViewerState) => {
+ *  // 事件：模型状态变化
+ * })
+ * gltfViewer.on('willLoad', () => {
+ *  // 即将加载
+ * })
+ * gltfViewer.on('progressing', (progressing: number) => {
+ *  // 加载进度
+ * })
+ * gltfViewer.on('loaded', (gltf: GLTF) => {
+ *  // 加载完成
+ * })
+ * gltfViewer.on('loadError', (error) => {
+ *  // 加载异常
+ * })
+ * ```
+ *
+ * React 组件：
+ *
+ * ```jsx
+ * import { GLTFView } from '@realsee/dnalogel/components/GLTFView'
+ *
+ * <GLTFView
+ *  url="//vrlab-static.ljcdn.com/release/web/demo.435f5fa2.glb"
+ *  ref={(gltfViewer) => gltfViewer.on('stateChange', (state) => console.log(state))} />
+ * ```
+ *
+ * ### 动画
+ *
+ * `GLTFViewer` 默认不提供动画实现，但是你可以配合 [TWEEN.js](http://tweenjs.github.io/tween.js/docs/user_guide.html) 通过修改 `state` 来得到你想要的动画效果，比如：
+ *
+ * ```jsx
+ * import TWEEN from '@tweenjs/tween.js'
+ *
+ * function animate(time: number) {
+ *   requestAnimationFrame(animate)
+ *   TWEEN.update(time)
+ * }
+ *
+ * requestAnimationFrame(animate)
+ *
+ * const tween = new TWEEN.Tween({ fov: 35, longitude: 0, latitude: -0.3 })
+ *  .to({fov: 60, latitude: -1.1496852156837822, longitude: 2.4468501085409855 }, 2000 )
+ *  .easing(TWEEN.Easing.Quadratic.Out)
+ *  .onUpdate((newState) => gltfViewer.state = newState)
+ *  .start()
+ *
+ * ```
+ *
+ * ### 光照配置
+ *
+ * ```ts
+ * pointLight?: THREE.PointLight | false
+ * directionalLight?: THREE.DirectionalLight | false
+ * ambientLight?: THREE.AmbientLight | false
+ * ```
+ * 自带三种默认光照配置，你可以提供自己的光照实例。如果设置 `pointLight: false` 则禁用该光照效果。
+ *
+ */
+export declare const GLTFView: React.FC<GLTFViewPropTypes>;
+export default GLTFView;

package/components/GLTFView/index.js

@@ -0,0 +1,181 @@
+"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 _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.GLTFView = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _gltfViewer = require("../../libs/gltf-viewer");
+
+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; }
+
+/**
+ * **GLTFViewer** 预览 `glTF` 模型文件（支持.gltf和.glb格式），附带光照等效果。
+ *
+ * ### Usage
+ *
+ * 基础用法：
+ *
+ * ```jsx
+ * import { GLTFViewer } from '@realsee/dnalogel/libs/gltf-viewer'
+ *
+ * // 创建实例
+ * const gltfViewer = new GLTFViewer({
+ *  pixelRatio: 1,
+ * })
+ *
+ * // 挂载至 DOM 节点
+ * gltfViewer.appendTo(ref.current)
+ *
+ * // 加载模型文件
+ * await gltfViewer.load(glbCDNUrl)
+ *
+ * // 输出当前模型状态数据
+ * console.log(gltfViewer.state)
+ * // { longitude: 0, latitude: -0.3, fov: 35 }
+ *
+ * // 设置当前模型状态：直接给状态对象赋值（立即生效）
+ * gltfViewer.state = { longitude: 0, latitude: -0.3, fov: 35 }
+ *
+ * // 设置当前模型状态：直接给状态对象单个属性赋值（立即生效）
+ * gltfViewer.state.fov = 50
+ *
+ * ```
+ *
+ * 事件监听：
+ *
+ * ```jsx
+ * gltfViewer.on('stateChange', (state: GLTFViewerState) => {
+ *  // 事件：模型状态变化
+ * })
+ * gltfViewer.on('willLoad', () => {
+ *  // 即将加载
+ * })
+ * gltfViewer.on('progressing', (progressing: number) => {
+ *  // 加载进度
+ * })
+ * gltfViewer.on('loaded', (gltf: GLTF) => {
+ *  // 加载完成
+ * })
+ * gltfViewer.on('loadError', (error) => {
+ *  // 加载异常
+ * })
+ * ```
+ *
+ * React 组件：
+ *
+ * ```jsx
+ * import { GLTFView } from '@realsee/dnalogel/components/GLTFView'
+ *
+ * <GLTFView
+ *  url="//vrlab-static.ljcdn.com/release/web/demo.435f5fa2.glb"
+ *  ref={(gltfViewer) => gltfViewer.on('stateChange', (state) => console.log(state))} />
+ * ```
+ *
+ * ### 动画
+ *
+ * `GLTFViewer` 默认不提供动画实现，但是你可以配合 [TWEEN.js](http://tweenjs.github.io/tween.js/docs/user_guide.html) 通过修改 `state` 来得到你想要的动画效果，比如：
+ *
+ * ```jsx
+ * import TWEEN from '@tweenjs/tween.js'
+ *
+ * function animate(time: number) {
+ *   requestAnimationFrame(animate)
+ *   TWEEN.update(time)
+ * }
+ *
+ * requestAnimationFrame(animate)
+ *
+ * const tween = new TWEEN.Tween({ fov: 35, longitude: 0, latitude: -0.3 })
+ *  .to({fov: 60, latitude: -1.1496852156837822, longitude: 2.4468501085409855 }, 2000 )
+ *  .easing(TWEEN.Easing.Quadratic.Out)
+ *  .onUpdate((newState) => gltfViewer.state = newState)
+ *  .start()
+ *
+ * ```
+ *
+ * ### 光照配置
+ *
+ * ```ts
+ * pointLight?: THREE.PointLight | false
+ * directionalLight?: THREE.DirectionalLight | false
+ * ambientLight?: THREE.AmbientLight | false
+ * ```
+ * 自带三种默认光照配置，你可以提供自己的光照实例。如果设置 `pointLight: false` 则禁用该光照效果。
+ *
+ */
+var GLTFView = function GLTFView(props) {
+  var ref = React.useRef(null);
+  React.useEffect(function () {
+    if (!ref.current) return;
+    var gltfViewer = new _gltfViewer.GLTFViewer(props);
+    gltfViewer.appendTo(ref.current);
+
+    var callback = /*#__PURE__*/function () {
+      var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+        return _regenerator["default"].wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                _context.next = 2;
+                return gltfViewer.load(props.url);
+
+              case 2:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
+
+      return function callback() {
+        return _ref.apply(this, arguments);
+      };
+    }();
+
+    callback(); // 实例
+
+    if (props.refs) {
+      props.refs(gltfViewer);
+    }
+
+    return function () {
+      gltfViewer.dispose();
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    className: 'GLTFView ' + (props.className || ''),
+    ref: ref
+  });
+};
+
+exports.GLTFView = GLTFView;
+GLTFView.defaultProps = {};
+var _default = GLTFView;
+exports["default"] = _default;

package/data/81zxMaeVKLQU93OZMG.d.ts

@@ -0,0 +1,49 @@
+export declare const work: {
+    _signature: string;
+    allow_hosts: string[];
+    base_url: string;
+    certificate: string;
+    create_time: null;
+    expire_at: string;
+    initial: {
+        fov: number;
+        latitude: number;
+        longitude: number;
+        pano_index: number;
+        recordVideo: boolean;
+    };
+    model: {
+        file_url: string;
+        material_base_url: string;
+        material_textures: string[];
+    };
+    observers: {
+        accessible_nodes: number[];
+        create_time: string;
+        floor_index: number;
+        id: number;
+        index: number;
+        position: number[];
+        quaternion: {
+            w: number;
+            x: number;
+            y: number;
+            z: number;
+        };
+        standing_position: number[];
+        visible_nodes: number[];
+    }[];
+    panorama: {
+        count: number;
+        list: {
+            back: string;
+            down: string;
+            front: string;
+            index: number;
+            left: string;
+            right: string;
+            up: string;
+        }[];
+    };
+    picture_url: string;
+};