@realsee/dnalogel 0.1.7-alpha.8 → 2.0.0-alpha.10

package/components/ARVideoFigure/ImgBgTransparent.js

@@ -1,65 +0,0 @@
-"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.ImgBgTransparent = ImgBgTransparent;
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-require("core-js/modules/es.object.assign.js");
-
-var React = _interopRequireWildcard(require("react"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _ImgBgTransparentMesh = require("./ImgBgTransparentMesh");
-
-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; }
-
-/**
- * **透明背景** 与 **AR 视频形象** `ARVideoFigure` 实现原理一致，不过此组件仅针对图片。
- *
- * 生产环境中还是建议直接采用 `png` 这类支持透明背景的图片。在实际业务落地过程中，如果视频文件生成比较滞后，你可以先通过对应图片来预览效果，调试相关参数。
- *
- * @param props
- * @returns
- */
-function ImgBgTransparent(props) {
-  var ref = React.useRef(null);
-  React.useEffect(function () {
-    if (!ref.current) return;
-    var imgBgTransparentScene = new _ImgBgTransparentMesh.ImgBgTransparentScene(ref.current, props.imgUrl);
-    Object.assign(window, {
-      $imgBgTransparentScene: imgBgTransparentScene
-    });
-
-    if (props.imgBgTransparentSceneRef) {
-      props.imgBgTransparentSceneRef(imgBgTransparentScene);
-    }
-  }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    className: (0, _classnames["default"])('ImgBgTransparent', (0, _defineProperty2["default"])({}, props.className + '', !!props.className)),
-    ref: ref
-  });
-}

package/components/ARVideoFigure/ImgBgTransparentMesh.d.ts

@@ -1,30 +0,0 @@
-import * as THREE from 'three';
-export declare class ImgBgTransparentMesh extends THREE.Mesh {
-    imgUrl?: string;
-    freeze: boolean;
-    get imageTexture(): THREE.Texture;
-    /**
-     *
-     * @param imgUrl
-     * @param width
-     * @param height
-     * @param widthSegments
-     * @param heightSegments
-     */
-    constructor(imgUrl: string, width: number, height: number, widthSegments: number, heightSegments: number, onLoad?: (texture: THREE.Texture) => void);
-    private get uniforms();
-    setHidden(hidden: boolean): void;
-    updateUniforms({ range, edge0, edge1 }: {
-        range: number;
-        edge0: number;
-        edge1: number;
-    }): void;
-}
-export declare class ImgBgTransparentScene {
-    scene: THREE.Scene;
-    renderer: THREE.WebGLRenderer;
-    camera: THREE.OrthographicCamera;
-    mesh: ImgBgTransparentMesh;
-    constructor(container: HTMLElement, imgUrl: string);
-    render(): void;
-}

package/components/ARVideoFigure/ImgBgTransparentMesh.js

@@ -1,183 +0,0 @@
-"use strict";
-
-require("core-js/modules/es.reflect.construct.js");
-
-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.ImgBgTransparentScene = exports.ImgBgTransparentMesh = void 0;
-
-require("core-js/modules/es.array.map.js");
-
-require("core-js/modules/es.array.concat.js");
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
-var THREE = _interopRequireWildcard(require("three"));
-
-var _vertexShader = require("./vertexShader");
-
-var _fragmentShader = require("./fragmentShader");
-
-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 _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
-
-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; } }
-
-var ImgBgTransparentMesh = /*#__PURE__*/function (_THREE$Mesh) {
-  (0, _inherits2["default"])(ImgBgTransparentMesh, _THREE$Mesh);
-
-  var _super = _createSuper(ImgBgTransparentMesh);
-
-  /**
-   *
-   * @param imgUrl
-   * @param width
-   * @param height
-   * @param widthSegments
-   * @param heightSegments
-   */
-  function ImgBgTransparentMesh(imgUrl, width, height, widthSegments, heightSegments, onLoad) {
-    var _this;
-
-    (0, _classCallCheck2["default"])(this, ImgBgTransparentMesh);
-    var geometry = new THREE.PlaneGeometry(width, height, widthSegments, heightSegments);
-    var imageTexture = new THREE.TextureLoader().load(imgUrl || '//vrlab-static.ljcdn.com/release/web/trans.92281b56.jpg', function (texture) {
-      if (onLoad) {
-        onLoad(texture);
-      }
-    });
-    var material = new THREE.ShaderMaterial({
-      uniforms: {
-        map: {
-          value: imageTexture
-        },
-        enable: {
-          value: 0
-        },
-        range: {
-          value: 0.15
-        },
-        edge0: {
-          value: 0.1
-        },
-        edge1: {
-          value: 0.3
-        }
-      },
-      vertexShader: _vertexShader.vertexShader,
-      fragmentShader: (0, _fragmentShader.fragmentShaderTpl)(),
-      transparent: true
-    });
-    _this = _super.call(this, geometry, material);
-    _this.imgUrl = imgUrl;
-    _this.freeze = false;
-    return _this;
-  }
-
-  (0, _createClass2["default"])(ImgBgTransparentMesh, [{
-    key: "imageTexture",
-    get: function get() {
-      return this.uniforms.map.value;
-    }
-  }, {
-    key: "uniforms",
-    get: function get() {
-      var uniforms = this.material.uniforms;
-      return uniforms;
-    }
-  }, {
-    key: "setHidden",
-    value: function setHidden(hidden) {
-      this.uniforms.enable.value = hidden ? 0 : 1;
-    }
-  }, {
-    key: "updateUniforms",
-    value: function updateUniforms(_ref) {
-      var range = _ref.range,
-          edge0 = _ref.edge0,
-          edge1 = _ref.edge1;
-      this.uniforms.range.value = isNaN(range) ? 0.15 : range;
-      this.uniforms.edge0.value = isNaN(edge0) ? 0.1 : edge0;
-      this.uniforms.edge1.value = isNaN(edge1) ? 0.1 : edge1;
-      console.log(this.uniforms);
-    }
-  }]);
-  return ImgBgTransparentMesh;
-}(THREE.Mesh);
-
-exports.ImgBgTransparentMesh = ImgBgTransparentMesh;
-
-var ImgBgTransparentScene = /*#__PURE__*/function () {
-  function ImgBgTransparentScene(container, imgUrl) {
-    var _this2 = this;
-
-    (0, _classCallCheck2["default"])(this, ImgBgTransparentScene);
-    (0, _defineProperty2["default"])(this, "scene", new THREE.Scene());
-    (0, _defineProperty2["default"])(this, "renderer", new THREE.WebGLRenderer({
-      alpha: true
-    }));
-    var state = {
-      width: container.offsetWidth,
-      height: container.offsetHeight
-    };
-    this.camera = new THREE.OrthographicCamera(-state.width / 2, state.width / 2, state.height / 2, -state.height / 2);
-    this.camera.position.set(0, 0, 10);
-    this.camera.lookAt(0, 0, 0);
-    var domElement = this.renderer.domElement;
-    domElement.classList.add('ImgBgTransparent-canvas');
-    this.renderer.setSize(state.width * window.devicePixelRatio, state.height * window.devicePixelRatio);
-    domElement.setAttribute('style', "width: ".concat(state.width, "px;height: ").concat(state.height, "px;"));
-    this.mesh = new ImgBgTransparentMesh(imgUrl, state.width, state.height, 1, 1, // 图片下载延迟，下载成功后重新渲染一次
-    function () {
-      _this2.mesh.setHidden(false);
-
-      _this2.render();
-    });
-    container.append(domElement);
-    this.scene.add(this.mesh);
-    this.mesh.setHidden(false);
-    this.render();
-  }
-
-  (0, _createClass2["default"])(ImgBgTransparentScene, [{
-    key: "render",
-    value: function render() {
-      this.renderer.render(this.scene, this.camera);
-    }
-  }]);
-  return ImgBgTransparentScene;
-}();
-
-exports.ImgBgTransparentScene = ImgBgTransparentScene;

package/components/ARVideoFigure/fragmentShader.d.ts

@@ -1,5 +0,0 @@
-/**
- *
- * @returns fragmentShader [GLSL](https://www.khronos.org/opengl/wiki/Core_Language_(GLSL)).
- */
-export declare const fragmentShaderTpl: () => string;

package/components/ARVideoFigure/fragmentShader.js

@@ -1,18 +0,0 @@
-"use strict";
-
-require("core-js/modules/es.object.define-property.js");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.fragmentShaderTpl = void 0;
-
-/**
- *
- * @returns fragmentShader [GLSL](https://www.khronos.org/opengl/wiki/Core_Language_(GLSL)).
- */
-var fragmentShaderTpl = function fragmentShaderTpl() {
-  return "\nuniform int enable;\nuniform float range;\nuniform float edge0;\nuniform float edge1;\n\nuniform sampler2D map;\nvarying vec2 vUv;\nvarying vec2 vColorUv;\nvarying vec2 vMaskUv;\n\nvec3 hsv2rgb(vec3 c) {\n  const vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);\n  vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);\n  return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);\n}\n\nvec3 rgb2hsv(vec3 c) {\n  const vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);\n  vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g));\n  vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r));\n\n  float d = q.x - min(q.w, q.y);\n  return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + 0.001)), d / (q.x + 0.001), q.x);\n}\n\nvoid main(void) {\n  vec3 color = texture2D(map, vUv).xyz;\n  float amask = 1.0;\n\n  float ref = color.r;\n  if (ref < color.b) ref = color.b;\n  amask = color.g - ref + 0.1;\n  amask = smoothstep(edge0, edge1, amask);\n  amask = 1.0 - amask;\n\n  vec3 target = rgb2hsv(vec3(0.0 / 255.0, 255.0 / 255.0, 0.0 / 255.0));\n  vec3 hsv = rgb2hsv(color);\n  float distance = abs(hsv.x - target.x);\n  if (distance < range) {\n    hsv.y = 0.0;\n  }\n  color = hsv2rgb(hsv);\n\n  gl_FragColor = vec4(color.rgb, amask * float(enable));\n}\n";
-};
-
-exports.fragmentShaderTpl = fragmentShaderTpl;

package/components/ARVideoFigure/index.d.ts

@@ -1,15 +0,0 @@
-/// <reference types="react" />
-import { ARVideoFigureScene } from './ARVideoFigureScene';
-export interface ARVideoFigurePropTypes {
-    className?: string;
-    arVideoFigureSceneRef?: (arVideoFigureScene: ARVideoFigureScene) => void;
-    __debug__?: boolean;
-    onClick?: () => void;
-}
-/**
- * **AR 视频形象**：剔除视频的绿幕背景，以实时视频的形式在 Web 页面模拟视频人物形象的效果。
- * @param props
- * @returns
- */
-export declare function ARVideoFigure(props: ARVideoFigurePropTypes): JSX.Element;
-export default ARVideoFigure;

package/components/ARVideoFigure/index.js

@@ -1,80 +0,0 @@
-"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.ARVideoFigure = ARVideoFigure;
-exports["default"] = void 0;
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-require("core-js/modules/es.object.assign.js");
-
-var React = _interopRequireWildcard(require("react"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _ARVideoFigureScene = require("./ARVideoFigureScene");
-
-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; }
-
-/**
- * **AR 视频形象**：剔除视频的绿幕背景，以实时视频的形式在 Web 页面模拟视频人物形象的效果。
- * @param props
- * @returns
- */
-function ARVideoFigure(props) {
-  var ref = React.useRef(null);
-  var sceneRef = React.useRef();
-  React.useEffect(function () {
-    if (!ref.current) return;
-    sceneRef.current = new _ARVideoFigureScene.ARVideoFigureScene(ref.current);
-
-    if (props.arVideoFigureSceneRef) {
-      props.arVideoFigureSceneRef(sceneRef.current);
-    }
-  }, []);
-  React.useEffect(function () {
-    if (!sceneRef.current) return;
-    Object.assign(window, {
-      $sceneRef: sceneRef.current
-    });
-  }, [props.__debug__]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: (0, _classnames["default"])('ARVideoFigure', (0, _defineProperty2["default"])({}, props.className + '', !!props.className)),
-    ref: ref // 渲染的宽度、高度由使用者控制：与父结点的宽高相同
-    ,
-    style: {
-      width: '100%',
-      height: '100%'
-    },
-    onClick: function onClick() {
-      if (props.onClick) {
-        props.onClick();
-      }
-    }
-  });
-}
-
-var _default = ARVideoFigure;
-exports["default"] = _default;

package/components/ARVideoFigure/vertexShader.d.ts

@@ -1 +0,0 @@
-export declare const vertexShader = "\nvarying vec2 vUv;\nvarying vec2 vColorUv;\nvarying vec2 vMaskUv;\nvoid main(){\n  vUv = uv;\n  vColorUv = vec2(uv.x / 2.0, uv.y);\n  vMaskUv = vec2(0.5 + uv.x / 2.0, uv.y);\n  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n}\n";

package/components/ARVideoFigure/vertexShader.js

@@ -1,10 +0,0 @@
-"use strict";
-
-require("core-js/modules/es.object.define-property.js");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.vertexShader = void 0;
-var vertexShader = "\nvarying vec2 vUv;\nvarying vec2 vColorUv;\nvarying vec2 vMaskUv;\nvoid main(){\n  vUv = uv;\n  vColorUv = vec2(uv.x / 2.0, uv.y);\n  vMaskUv = vec2(0.5 + uv.x / 2.0, uv.y);\n  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n}\n";
-exports.vertexShader = vertexShader;

package/components/GLTFView/index.d.ts

@@ -1,110 +0,0 @@
-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
- * // 色调映射
- * toneMapping?: {
- *   toneMapping?: THREE.ToneMapping
- *   toneMappingExposure?: number
- * }
- *
- * ```
- * 自带三种默认光照配置，你可以提供自己的光照实例。如果设置 `pointLight: false` 则禁用该光照效果。
- *
- */
-export declare const GLTFView: React.FC<GLTFViewPropTypes>;
-export default GLTFView;