@realsee/dnalogel 0.1.0

package/components/ARVideoFigure/ImgBgTransparent.js

@@ -0,0 +1,49 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ImgBgTransparent = ImgBgTransparent;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _ImgBgTransparentMesh = require("./ImgBgTransparentMesh");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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 _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+/**
+ * **透明背景** 与 **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', _defineProperty({}, props.className + '', !!props.className)),
+    ref: ref
+  });
+}

package/components/ARVideoFigure/ImgBgTransparentMesh.d.ts

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1,173 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ImgBgTransparentScene = exports.ImgBgTransparentMesh = void 0;
+
+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 _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+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; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+var ImgBgTransparentMesh = /*#__PURE__*/function (_THREE$Mesh) {
+  _inherits(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;
+
+    _classCallCheck(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;
+  }
+
+  _createClass(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;
+
+    _classCallCheck(this, ImgBgTransparentScene);
+
+    _defineProperty(this, "scene", new THREE.Scene());
+
+    _defineProperty(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();
+  }
+
+  _createClass(ImgBgTransparentScene, [{
+    key: "render",
+    value: function render() {
+      this.renderer.render(this.scene, this.camera);
+    }
+  }]);
+
+  return ImgBgTransparentScene;
+}();
+
+exports.ImgBgTransparentScene = ImgBgTransparentScene;

package/components/ARVideoFigure/fragmentShader.d.ts

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

package/components/ARVideoFigure/fragmentShader.js

@@ -0,0 +1,16 @@
+"use strict";
+
+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

@@ -0,0 +1,15 @@
+/// <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

@@ -0,0 +1,64 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ARVideoFigure = ARVideoFigure;
+exports["default"] = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _ARVideoFigureScene = require("./ARVideoFigureScene");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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 _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+/**
+ * **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', _defineProperty({}, 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

@@ -0,0 +1 @@
+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

@@ -0,0 +1,8 @@
+"use strict";
+
+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/GlassFilters/index.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+export interface GlassFiltersPropTypes {
+    hidden?: boolean;
+    className?: string;
+    url?: string;
+    /**
+     * 高斯模糊
+     */
+    blur?: string | number;
+    brightness?: string | number;
+    contrast?: string | number;
+    ['drop-shadow']?: string | number;
+    grayscale?: string | number;
+    ['hue-rotate']?: string | number;
+    invert?: string | number;
+    opacity?: string | number;
+    sepia?: string | number;
+    saturate?: string | number;
+    children?: string | JSX.Element;
+}
+/**
+ * 滤镜组件
+ *
+ * > 某些 VR 房源可能受限于拍摄条件，比如拍摄当天光线不佳造成观感整体偏暗，可通过此组件设置提升亮度等相关滤镜参数进行优化。
+ *
+ * 滤镜的可配置参数请参考 [backdrop-filter](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter)。
+ *
+ * @param props
+ * @returns
+ */
+export declare function GlassFilters(props: GlassFiltersPropTypes): JSX.Element;
+export default GlassFilters;

package/components/GlassFilters/index.js

@@ -0,0 +1,54 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GlassFilters = GlassFilters;
+exports["default"] = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+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 filters = ['url', 'blur', 'brightness', 'contrast', 'drop-shadow', 'grayscale', 'hue-rotate', 'invert', 'opacity', 'sepia', 'saturate'];
+/**
+ * 滤镜组件
+ *
+ * > 某些 VR 房源可能受限于拍摄条件，比如拍摄当天光线不佳造成观感整体偏暗，可通过此组件设置提升亮度等相关滤镜参数进行优化。
+ *
+ * 滤镜的可配置参数请参考 [backdrop-filter](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter)。
+ *
+ * @param props
+ * @returns
+ */
+
+function GlassFilters(props) {
+  var backdropFilter = Object.keys(props).filter(function (key) {
+    return filters.includes(key) && props[key] !== undefined;
+  }).reduce(function (accu, curr) {
+    return accu + "".concat(curr, "(").concat(props[curr], ") ");
+  }, '');
+  console.log('GlassFilters', props, backdropFilter);
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      left: '0',
+      top: '0',
+      width: '100%',
+      height: '100%',
+      pointerEvents: 'none',
+      transition: 'backdrop-filter opacity .75s',
+      opacity: props.hidden ? '0' : '1',
+      backdropFilter: backdropFilter,
+      WebkitBackdropFilter: backdropFilter
+    },
+    className: 'five-GlassFilters' + (props.className ? ' ' + props.className : '')
+  }, props.children);
+}
+
+var _default = GlassFilters;
+exports["default"] = _default;

package/components/ModelView/ModelViewController.d.ts

@@ -0,0 +1,18 @@
+import * as THREE from 'three';
+export default class ModelViewController {
+    needsRender: boolean;
+    scene: THREE.Scene;
+    camera: THREE.PerspectiveCamera;
+    model: THREE.Object3D;
+    renderer: THREE.WebGLRenderer | null;
+    constructor();
+    initRendererIfNeeds: () => THREE.WebGLRenderer;
+    modelWillLoad: () => void;
+    refresh: (size?: {
+        width?: number;
+        height?: number;
+    }) => void;
+    cameraDistance: () => void;
+    update: () => void;
+    render: () => void;
+}

package/components/ModelView/ModelViewController.js

@@ -0,0 +1,147 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var THREE = _interopRequireWildcard(require("three"));
+
+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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var ModelViewController = function ModelViewController() {
+  var _this = this;
+
+  _classCallCheck(this, ModelViewController);
+
+  _defineProperty(this, "needsRender", true);
+
+  _defineProperty(this, "scene", new THREE.Scene());
+
+  _defineProperty(this, "camera", new THREE.PerspectiveCamera(60, 1, 0.1, 1000));
+
+  _defineProperty(this, "model", new THREE.Object3D());
+
+  _defineProperty(this, "renderer", null);
+
+  _defineProperty(this, "initRendererIfNeeds", function () {
+    if (!_this.renderer) {
+      _this.renderer = new THREE.WebGLRenderer({
+        antialias: false,
+        alpha: true
+      }); // this.renderer.setPixelRatio(five.renderer.getPixelRatio())
+
+      _this.renderer.setClearColor(0x181a1c, 0);
+
+      _this.renderer.autoClear = true;
+    }
+
+    return _this.renderer;
+  });
+
+  _defineProperty(this, "modelWillLoad", function () {
+    _this.model.traverse(function (object) {
+      if (object instanceof THREE.Mesh) {
+        var materials = [].concat(object.material);
+        materials.forEach(function (material) {
+          return material.dispose();
+        });
+      }
+    });
+
+    _this.scene.remove(_this.model);
+
+    _this.model = new THREE.Object3D();
+
+    _this.scene.add(_this.model);
+
+    _this.update();
+  });
+
+  _defineProperty(this, "refresh", function () {
+    var size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    if (!_this.renderer) return;
+    var element = _this.renderer.domElement;
+    var container = element.parentNode;
+
+    if (container && container.nodeName) {
+      var _size$width = size.width,
+          width = _size$width === void 0 ? container.offsetWidth : _size$width,
+          _size$height = size.height,
+          height = _size$height === void 0 ? container.offsetHeight : _size$height;
+
+      _this.renderer.setSize(width, height); // 修改摄像机 aspect 比值
+
+
+      _this.camera.aspect = width / height;
+
+      _this.camera.updateProjectionMatrix();
+    }
+
+    _this.needsRender = true;
+  });
+
+  _defineProperty(this, "cameraDistance", function () {// const bounding = five.model.bounding
+    // const { fov, aspect } = this.camera
+    // const radius = Math.pow(
+    //   Math.pow(bounding.max.x - bounding.min.x + 2, 2) +
+    //   Math.pow(bounding.max.y - bounding.min.y + 2, 2) +
+    //   Math.pow(bounding.max.z - bounding.min.z + 2, 2),
+    //   1 / 2,
+    // )
+    // // fit screen
+    // let distance = radius / 2 / Math.tan((Math.PI * fov) / 360)
+    // if (aspect < 1) distance = distance / aspect
+    // return isNaN(distance) ? radius : distance
+  });
+
+  _defineProperty(this, "update", function () {// const { longitude } = five.getLongitudeAndLatitude()
+    // const latitude = Math.PI / 4
+    // const distance = cameraDistance()
+    // const lookAt = five.model.bounding.getCenter(new THREE.Vector3())
+    // const longitudeDistance = distance * Math.cos(latitude)
+    // const cameraPosition = new THREE.Vector3()
+    // cameraPosition.x = Math.sin(longitude) * longitudeDistance + lookAt.x
+    // cameraPosition.z = Math.cos(longitude) * longitudeDistance + lookAt.z
+    // cameraPosition.y = Math.sin(latitude) * distance + lookAt.y
+    // camera.position.copy(cameraPosition)
+    // camera.lookAt(lookAt)
+    // needsRender = true
+  });
+
+  _defineProperty(this, "render", function () {// if (needsRender !== true) return
+    // if (!renderer) return
+    // if (!renderer.domElement.parentNode) return
+    // const parentNode = renderer.domElement.parentNode as HTMLElement
+    // if (parentNode.offsetWidth === 0) return
+    // renderer.render(scene, camera)
+    // needsRender = false
+  });
+
+  {
+    var light = new THREE.DirectionalLight(0xffffff, 0.1);
+    light.position.copy(new THREE.Vector3(1, 1, 1));
+    this.scene.add(light);
+  }
+  {
+    var _light = new THREE.DirectionalLight(0xffffff, 0.1);
+
+    this.scene.add(_light);
+  }
+  {
+    var _light2 = new THREE.AmbientLight(0xffffff, 1);
+
+    this.scene.add(_light2);
+  }
+  this.scene.add(this.model);
+};
+
+exports["default"] = ModelViewController;

package/components/ModelView/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+/**
+ * 户型雷达图
+ *
+ *
+ * 非 `React` 组件版本详见 [ModelViewPlugin](?path=/docs/plugins-modelviewplugin--model-view-tpl)。
+ * @returns
+ * @todo
+ */
+export default function ModelView(): JSX.Element;

package/components/ModelView/index.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = ModelView;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/**
+ * 户型雷达图
+ *
+ *
+ * 非 `React` 组件版本详见 [ModelViewPlugin](?path=/docs/plugins-modelviewplugin--model-view-tpl)。
+ * @returns
+ * @todo
+ */
+function ModelView() {
+  return /*#__PURE__*/_react["default"].createElement("div", null);
+}