@realsee/dnalogel 0.1.0

package/README.md

@@ -0,0 +1,94 @@
+# 如视 -- "Dnalogel"
+
+[如视(realsee.com)](https://realsee.com) 提供了在浏览器环境中的渲染三维空间 [VR 看房 SDK Five](https://developers.realsee.com/docs/#/docs/five/web/quickstart)。
+通过 [如视 3D 空间 API](https://developers.realsee.com/docs/#/docs/five/server/README) 并结合 Five 的渲染能力可以制作丰富多彩的三维空间应用。
+
+除了 Five 强大的三维空间渲染能力之外，我们也积累了大量的 **VR 看房** 常用功能，并以 `React Components` 和 `Five Plugins` 的形式进行抽象。
+
+无论是经过线上环境千锤百炼的刚需功能，还是灵感一现的炫酷尝试，凡是最终落地的功能我们均毫无保留的开源并以 [Storybook](https://storybook.js.org/) 的形式演示。
+
+如果组件满足您的需求，`npm install @realsee/dnalogel`一键安装使用。
+
+如果不满足需求，没关系，把我们当作代码示例，我们抛砖引玉。
+
+我们也很期待您基于 [Three.js](https://threejs.org/)、[Five.js](https://www.npmjs.com/package/@realsee/five) 等这类渲染库做出有意思的功能。
+
+## Components
+
+我们目前的组件都是基于 [React](https://reactjs.org/) 界面库实现的，直接按照 [React](https://reactjs.org/) 方式引用使用即可。
+
+### 组件列表
+
+- `ARVideoFigure` AR 视频形象
+- `FloorplanRadar` 户型雷达图
+- `GlassFilters` 滤镜
+- `ModelView` 模型视图 @todo
+- `PBRView` PBR 视图 @todo
+- `PaintBrush` 画笔 @todo
+- `PanoTag` 全景标签 @todo
+- ... 待补充
+
+### 使用方式
+
+```jsx
+import { FiveProvider, FiveCanvas } from '@realsee/five/react'
+import Component from '@realsee/dnalogel/components/Component'
+
+ReactDOM.render(
+  <FiveProvider>
+    <FiveCanvas />
+    <Component config onCallback />
+  </FiveProvider>,
+  containter,
+)
+```
+
+## Five Plugins
+
+**Five Plugins** 是使用了 `@realsee/five` 提供的工厂模式插件机制开发的插件。适合面向过程的可复用逻辑、命令式调用的对象抽象、无 DOM 或轻量 DOM 的组件、复杂动画等。
+
+如果您项目的技术栈不是[React](https://reactjs.org/) ，**Five Plugins** 可能更适合你。
+
+当然，部分插件我们也以 [React Component](https://reactjs.org/) 的形式提供了支持，但这些组件非**纯**组件（会有影响 `five` 实例状态的副作用），您可以按照实际情况酌情引用。
+
+### 插件列表
+
+- `ModelChassisCompassPlugin` 模型底盘雷达图插件
+- `ModelTVVideoPlugin` 模型电视视频插件
+- `ModelViewPlugin` 模型视图插件
+- `PanoRulerPlugin` 全景标尺插件
+- `PanoTVVideoPlugin` 全景电视视频插件
+- `PanoFloorplanRadarPlugin` 全景户型雷达图插件
+- `PanoDoorLabelPlugin` 全景房间标签引导插件 @todo
+- `PanoIRobotPlugin` 全景扫地机器人插件 @todo
+- `PanoMeasurePlguin` 全景测量插件 @todo
+- `ModelEntryDoorGuidePlugin` 模型入户门引导插件 @todo
+- ... 待补充
+
+### 使用方式
+
+```js
+import { Five } from '@realsee/five'
+import Plugin from '@realsee/dnalogel/plugins/Plugin'
+const five = new Five({
+  plugins: [[Plugin, 'PluginName', initOptions]],
+})
+
+// 不同插件提供的方法可能存在差异
+five.plugins.PluginName.load(data)
+five.plugins.PluginName.enable()
+five.plugins.PluginName.disable()
+```
+
+## Examples
+
+> **Examples** 是应用级别的复杂示例。例子永远不嫌多！
+
+### 最佳示例
+
+- Five 状态控制器：[Demo]()。
+- VR 看房：[移动端 Demo]() | [PC 端 Demo]()。
+
+## Tools
+
+> 为方便您更合理使用、理解 "Dnalogel" 组件、插件，我们提供了一些简单的数据生产编辑工具。

package/TERMS.txt

@@ -0,0 +1,56 @@
+Realsee SDK License Agreement
+
+Update: July 28, 2021
+
+THIS LICENSE AGREEMENT BETWEEN YOU AND 【BEIKE REALSEE TECHNOLOGY (HK) LIMITED】(“Realsee”) FORMS A LEGALLY BINDING CONTRACT BETWEEN YOU AND REALSEE IN RELATION TO YOUR USE OF THE SDK. This License Agreement accompanies the Realsee Software Development Kit(s) for the software and related explanatory materials (the "SDK") and includes any upgrades, modified versions, updates, additions, and copies of the SDK licensed to You by Realsee.
+BY DOWNLOADING, INSTALLING, OR OTHERWISE ACCESSING OR USING THE SDK, YOU AGREE THAT YOU HAVE READ, UNDERSTOOD, AND AGREE TO BE BOUND BY THIS AGREEMENT. YOU ARE AGREEING ON YOUR OWN BEHALF AND/OR ON BEHALF OF YOUR COMPANY OR ORGANIZATION TO THE TERMS AND CONDITIONS STATED BELOW.
+This Agreement applies to Your use of the SDK in the country in which You legally install it (“Territory”) and is subject to the laws of such Territory and further subject to Section 12 below. Different terms, conditions, and limitations may apply to the use of the SDK in any additional countries.
+1. DEFINITIONS.
+“Agreement” means this Realsee SDK License Agreement.
+“Developer”, “You” and “Your” means the person(s) or entity acquiring or using the SDK or otherwise exercising rights under the terms of this Agreement.
+“Documentation” means the technical or other specifications or documentation that Realsee may provide to You for use in connection with the SDK.
+“Integrated Product” means any software, website, or on-line service developed by You based on or using the SDK (collectively, the “Integrated Product”).
+“Intellectual Property” means any patents, patent rights, trademarks, service marks, registered and unregistered designs, applications for any of the foregoing, copyright, and any other similar protected rights in any country and to the extent recognised by any relevant jurisdiction as intellectual property, trade secrets, know-how and confidential information. Realsee reserves all rights not expressly granted to You.
+“Realsee” means [Beike Realsee Technology (HK) Limited, a company incorporated and validly existing under the laws of Hong Kong].
+“SDK” means the Realsee-proprietary Software Development Kits (SDK) provided hereunder, includes all development tools (including any compiler and debugger), application programming interfaces (“APIs”), libraries, binary utilities, header files, Documentation, content, data, code samples, and other materials provided to You in connection with this Agreement, whether delivered through a download, or any other media or form, and is licensed, not sold, to You by Realsee for use only under the terms of this Agreement. The terms of this Agreement will govern any updates provided by Realsee that replace and/or supplement the original SDK delivered to You, unless such update is accompanied by a separate license, in which case the terms of such license will govern.
+2. LICENSED USES AND RESTRICTIONS.
+2.1 Subject to the restrictions contained in this Section 2, Realsee grants to You during the term, a limited, non-exclusive, revocable, non-sublicensable, non-transferable license to install and use the SDK within the Territory only for the purpose of internal development.
+2.2 Restrictions. You acknowledge and agree that, You shall not, and shall ensure that Your affiliates, employees, agents, representatives, officers, representatives, and subcontractors do not (directly or indirectly):
+2.2.1 decompile, reverse engineer, disassemble or attempt to derive the source code of, those components of the SDK provided in object code form, or any part thereof;
+2.2.2 remove, alter, or obscure any copyright notice or other proprietary rights notice on any part of the SDK;
+2.2.3 sell, assign, pledge, rent, lease, lend, upload to or host on any website or server for use by any third party except You, redistribute, or sublicense the SDK (or any part thereof), or operate the SDK (or any part thereof) in the capacity of a service bureau or other hosted services provider, in whole or in part, nor may You enable others to do so;
+2.2.4 or alter, modify, customize or improve the SDK, or any part thereof;
+2.2.5 use the SDK (or any part thereof) for any illegal purpose, in any manner that is inconsistent with the terms of this Agreement, or to engage in any illegal activity;
+2.2.6 use the SDK (or any part thereof) in any manner that may damage the operation of Realsee’s products or services; or
+2.2.7 use the SDK or any information contained therein or otherwise provided by Realsee for the purpose of developing, or having developed, any product competitive with any Realsee product or service, as determined by Realsee in its sole discretion;
+2.2.8 include any portion of the SDK in Your Developer products.
+2.3 Realsee has the right to impose reasonable conditions such as a reasonable fee for use of the SDK in Integrated Product in the future.
+2.4 You may make a limited number of copies of the SDK to be used by Your employees or consultants as provided herein, and not for general business purposes, and such employees or consultants shall be subject to the obligations and restrictions in this Agreement.
+2.5 All licenses not expressly granted in this Agreement are reserved and no other licenses, immunity, or rights, express or implied, are granted by Realsee, by implication, estoppel, or otherwise.
+3. CONFIDENTIALITY.
+The SDK and all source code, Documentation, specifications, engineering details, and related information pertaining to the SDK, whether in oral, written, graphic, or electronic form, are and shall remain the confidential and proprietary information of Realsee or its licensors (collectively, the “Confidential Information”). You shall (i) disclose Confidential Information to only those directors and employees (collectively, “Affiliates”) whose duties justify their need to know such information and who have been clearly informed of their obligation to maintain the confidential, proprietary, and/or trade secret status of such Confidential Information; and (ii) use Confidential Information solely in accordance with the license granted hereunder. In any event, You and Your Affiliates shall treat Confidential Information as strictly confidential and shall use the same care to prevent disclosure of such information as You use with respect to Your own similar confidential and/or proprietary information, which shall not be less than the care a reasonable person would use under similar circumstances. All Confidential Information, and any copies thereof, shall be returned promptly to Realsee upon request. You shall ensure that Your Affiliates comply with the provisions of this Section 3, and You shall be liable for any breach of this Section 3 resulting from the act or omission of any of Your Affiliates. You shall not disclose Confidential Information to any third party, including, without limitation, any of Your subcontractors.
+4. PROPRIETARY RIGHTS.
+4.1 As between You and Realsee, Realsee and/or its licensors retain ownership of all right, title, and interest in, to, and under the SDK, including, without limitation, all patents, copyrights, trade secrets, trademarks and other intellectual property and other proprietary rights therein, and reserve all rights not expressly granted to You.
+4.2 The items contained in the SDK are the intellectual property of Realsee and its licensors and are protected by PRC copyright and patent law, international treaty provisions and applicable laws of the country in which it is being used. You agree to protect all copyright and other ownership interests of Realsee and/or its licensors in all items in the SDK supplied under this License Agreement. You agree that all copies of the items in the SDK, reproduced for any reason by You, contain the same copyright notices, and other proprietary notices as appropriate, as appear on or in the original items delivered by Realsee in the SDK. Realsee and/or its licensors retain title and ownership of the items in the SDK, the media on which it is loaded, and all subsequent copies, regardless of the form or media in or on which the original and other copies may exist. Except as stated above, this Agreement does not grant You any rights to patents, copyrights, trade secrets, trademarks or any other rights in respect to the items in the SDK.
+5. TERM AND TERMINATION.
+5.1 This Agreement is effective until terminated. Realsee has the right to terminate this Agreement immediately, without judicial intervention, if You fail to comply with any term herein. Upon any such termination You must remove all full and partial copies of the items in the SDK from Your computer and discontinue the use of the items in the SDK.
+5.2 Realsee may at any time, terminate the Agreement with You if: (A) You have breached any provision of the Agreement; or (B) Realsee is required to do so by law; or (C) Realsee decides to no longer provide the SDK or certain parts of the SDK to users in the country in which You are resident or from which You use the service, or the provision of the SDK or certain SDK services to You by Realsee is, in Realsee's sole discretion, no longer legally or commercially viable.
+5.3 When the Agreement comes to an end, all of the legal rights, obligations and liabilities that You and Realsee have benefited from, been subject to (or which have accrued over time whilst the Agreement has been in force) or which are expressed to continue indefinitely, shall be unaffected by this cessation, and the provisions of Section 3, 4, 6, 7 and 8 shall continue to apply to such rights, obligations and liabilities indefinitely.
+6. DISCLAIMER OF WARRANTY.
+YOU EXPRESSLY ACKNOWLEDGE AND AGREE THAT, TO THE EXTENT PERMITTED BY APPLICABLE LAW, USE OF THE SDK (OR ANY PART THEREOF) IS AT YOUR SOLE RISK AND THAT THE ENTIRE RISK AS TO SATISFACTORY QUALITY, PERFORMANCE, ACCURACY, AND EFFORT IS WITH YOU. REALSEE LICENSES THE SDK TO YOU ONLY ON AN "AS-IS" BASIS. REALSEE MAKES NO REPRESENTATION WITH RESPECT TO THE ADEQUACY OF ANY ITEMS IN THE SDK, WHETHER OR NOT USED BY YOU IN THE DEVELOPMENT OF INTEGRATED PRODUCT, FOR ANY PARTICULAR PURPOSE OR WITH RESPECT TO THEIR ADEQUACY TO PRODUCE ANY PARTICULAR RESULT. REALSEE AND ITS LICENSORS SHALL NOT BE LIABLE FOR LOSS OR DAMAGE ARISING OUT OF THIS AGREEMENT OR FROM THE DISTRIBUTION OR USE OF INTEGRATED PRODUCT CONTAINING PORTIONS OF THE SDK. REALSEE AND ITS LICENSORS DISCLAIM ALL WARRANTIES, EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO IMPLIED CONDITIONS OR WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE OR NONINFRINGEMENT OF ANY THIRD PARTY RIGHT IN RESPECT OF THE ITEMS IN THE SDK OR ANY SERVICES RELATED TO THE SDK.
+REALSEE IS UNDER NO OBLIGATION TO PROVIDE ANY SUPPORT UNDER THIS LICENSE AGREEMENT, INCLUDING UPGRADES OR FUTURE VERSIONS OF THE SDK OR ANY PORTIONS THEREOF, TO YOU, END USER OR TO ANY OTHER PARTY.
+7. LIMITATION OF LIABILITY.
+TO THE EXTENT NOT PROHIBITED BY APPLICABLE LAW, IN NO EVENT WILL REALSEE OR ITS LICENSORS BE LIABLE FOR ANY DIRECT, INCIDENTAL, SPECIAL, INDIRECT, OR CONSEQUENTIAL DAMAGES, INCLUDING, WITHOUT LIMITATION, DAMAGES FOR LOSS OF USE, LOSS OF BUSINESS, REVENUE, OR PROFITS, LOSS OF OPPORTUNITY (WHETHER DIRECT OR INDIRECT), CORRUPTION OR LOSS OF DATA, LOSS OF REPUTATION OR SAVINGS, DOWNTIME, OR DAMAGE TO, LOSS OF OR REPLACEMENT OF DATA OR TRANSACTIONS, COST OF PROCUREMENT OF SUBSTITUTE SERVICES, BUSINESS INTERRUPTION, OR ANY OTHER COMMERCIAL DAMAGES OR LOSSES, ARISING OUT OF OR RELATED TO YOUR USE OR INABILITY TO USE THE SDK (OR ANY PART THEREOF), ANY INTEGRATED PRODUCT, OR ANY THIRD PARTY SOFTWARE, APPLICATIONS, OR SERVICES IN CONJUNCTION WITH THE SDK (OR ANY PART THEREOF), HOWEVER CAUSED, REGARDLESS OF THE THEORY OF LIABILITY (CONTRACT, TORT, OR OTHERWISE) AND EVEN IF REALSEE HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES. IN NO EVENT WILL REALSEE’S TOTAL LIABILITY TO YOU FOR ALL DAMAGES EXCEED ONE HUNDRED DOLLARS ($100.00). THE FOREGOING LIMITATIONS WILL APPLY EVEN IF THE ABOVE STATED REMEDY FAILS OF ITS ESSENTIAL PURPOSE. THE LIMITATIONS CONTAINED IN SECTIONS 6 AND THIS SECTION 7 ARE A FUNDAMENTAL PART OF THE BASIS OF REALSEE’S BARGAIN HEREUNDER, AND REALSEE WOULD NOT ENTER INTO THIS AGREEMENT OR PROVIDE YOU WITH ACCESS TO THE SDK ABSENT SUCH LIMITATIONS.
+8. INDEMNIFICATION.
+To the extent permitted by applicable law, You agree to indemnify, defend and hold harmless Realsee, its affiliates and each of their directors, officers, employees, independent contractors, and agents (each a “Realsee Indemnified Party”) from any and all claims, losses, liabilities, damages, expenses, and costs (including without limitation attorneys’ fees and court costs) incurred by a Realsee Indemnified Party as a result of: (i) Your non-compliance with any terms of this Agreement; (ii) Your use of the SDK (or any part thereof); or (iii) Your use of any Integrated Product, including any claim that Integrated Product infringes the copyright, trademark, trade secret or other intellectual property right of a third party.
+9. ACKNOWLEDGEMENTS.
+Portions of the SDK may utilize or include third party software and other copyrighted material. Acknowledgments, licensing terms, and disclaimers for such material are contained in Documentation for the SDK or may otherwise accompany such material, and Your use of such materials governed by their respective terms. In the event of conflict between the terms of this Agreement and an applicable open source or third party agreement, the open source or third party agreement will control solely with respect to the open source software or third party software. Moreover, You shall not subject any items (including not limited to source code, object code, and any software)  included in the SDK to any open source license.
+10. NON-BLOCKING OF REALSEE DEVELOPMENT.
+You acknowledge that Realsee is currently developing or may develop technologies and products in the future that have or may have design and/or functionality similar to Integrated Product that You may develop based on Your license herein. Nothing in this Agreement shall impair, limit or curtail Realsee's right to continue with its development, maintenance and/or distribution of Realsee's technology or products.
+11. GENERAL.
+11.1 Export Control. You may not use or otherwise export or re-export the SDK (or any part thereof) except as authorized by United States law and the laws of the jurisdiction(s) in which the SDK (or any part thereof) was obtained. In particular, but without limitation, the SDK may not be exported or re-exported (i) into any U.S. embargoed countries or (ii) to anyone on the U.S. Treasury Department's list of Specially Designated Nationals or the U.S. Department of Commerce Denied Person's List or Entity List. By using the SDK (or any part thereof), You represent and warrant that You are not located in any such country or on any such list.
+11.2 Governing Law. This Agreement and the rights of the parties hereunder shall be governed by and construed in accordance with the laws of People’s Republic of China (for purpose of this Agreement, excluding Hong Kong, Taiwan, and Macau), without reference to its conflict of laws principles. Any dispute, controversy or claim arising from or in connection with this Agreement, or the breach, termination or invalidity thereof, shall be submitted to China International Economic and Trade Arbitration Commission (“CIETAC”) for arbitration in Beijing which shall be conducted in accordance with the CIETAC's arbitration rules in effect at the time of applying for arbitration. The arbitral award is final and binding upon both parties.
+11.3 Severability. If any provision of this Agreement is held by a court of competent jurisdiction to be unenforceable for any reason, the remaining provisions hereof will be unaffected and remain in full force and effect.
+11.4. Modifications. Realsee reserves the right, from time to time, with or without notice to You, to make revisions to this Agreement in our sole and absolute discretion.  The most current version of this Agreement will supersede all previous versions and shall be made available on the website where the SDK is made available, or by such other means as Realsee may determine in its discretion. Any modified versions of this Agreement hereto shall take effect from the time that it is made available. You shall be responsible for regularly checking for notice of any such modifications. You agree that Your continued use of the SDK constitutes Your agreement to the modified Agreement.
+11.5 Relationship of the Parties. This Agreement will not be construed as creating an agency, partnership, joint venture, fiduciary duty, or any other form of legal association between You and Realsee, and You will not represent to the contrary, whether expressly, by implication, appearance, or otherwise.
+11.6 Entire Agreement; Governing Language. This Agreement constitutes the entire agreement between You and Realsee with respect to the use of the SDK licensed hereunder and supersedes all prior understandings regarding such subject matter. No amendment to or modification of this Agreement will be binding unless in writing and signed by Realsee. You and Realsee hereto confirm that this Agreement and all related documents shall be drafted in English.

package/components/ARVideoFigure/ARVideoFigureMesh.d.ts

@@ -0,0 +1,44 @@
+import * as THREE from 'three';
+export interface ARVideoFigureMeshOptions {
+    videoInstance?: HTMLVideoElement;
+}
+export declare class ARVideoFigureMesh extends THREE.Mesh {
+    options: ARVideoFigureMeshOptions;
+    videoUrl?: string;
+    freeze: boolean;
+    get paused(): boolean;
+    get videoInstance(): HTMLVideoElement;
+    /**
+     *
+     * @param width
+     * @param height
+     * @param widthSegments
+     * @param heightSegments
+     * @param options
+     */
+    constructor(width: number, height: number, widthSegments: number, heightSegments: number, options?: ARVideoFigureMeshOptions);
+    private get uniforms();
+    update(videoUrl: string): Promise<void>;
+    updateUniforms({ range, edge0, edge1 }: {
+        range: number;
+        edge0: number;
+        edge1: number;
+    }): void;
+    /**
+     * 暂停视频播放
+     * @returns
+     */
+    pause(): Promise<void>;
+    /**
+     * 播放视频：
+     * - 如果没有提供 `videoUrl`，则播放上一个视频
+     * - 如果提供 `videoUrl`，则重头开始播放
+     * @param videoUrl 视频地址
+     * @returns
+     */
+    play(videoUrl?: string): Promise<unknown>;
+    /**
+     * 转成毫秒，保障精准度
+     */
+    get currentTime(): number;
+}

package/components/ARVideoFigure/ARVideoFigureMesh.js

@@ -0,0 +1,347 @@
+"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.ARVideoFigureMesh = void 0;
+
+var THREE = _interopRequireWildcard(require("three"));
+
+var _Preloader = require("../../shared-utils/Preloader");
+
+var _fragmentShader = require("./fragmentShader");
+
+var _vertexShader = require("./vertexShader");
+
+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 asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+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 ARVideoFigureMesh = /*#__PURE__*/function (_THREE$Mesh) {
+  _inherits(ARVideoFigureMesh, _THREE$Mesh);
+
+  var _super = _createSuper(ARVideoFigureMesh);
+
+  /**
+   *
+   * @param width
+   * @param height
+   * @param widthSegments
+   * @param heightSegments
+   * @param options
+   */
+  function ARVideoFigureMesh(width, height, widthSegments, heightSegments) {
+    var _this;
+
+    var options = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
+
+    _classCallCheck(this, ARVideoFigureMesh);
+
+    if (!options.videoInstance) {
+      var videoInstance = document.createElement('video');
+      videoInstance.style.opacity = '0';
+      videoInstance.style.display = 'none';
+      videoInstance.playsInline = true;
+      document.body.append(videoInstance);
+      options.videoInstance = videoInstance;
+    }
+
+    var geometry = new THREE.PlaneGeometry(width, height, widthSegments, heightSegments);
+    var videoTexture = new THREE.VideoTexture(options.videoInstance);
+    var material = new THREE.ShaderMaterial({
+      uniforms: {
+        map: {
+          value: videoTexture
+        },
+        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.options = options;
+    _this.freeze = false;
+    return _this;
+  }
+
+  _createClass(ARVideoFigureMesh, [{
+    key: "paused",
+    get: function get() {
+      return !!this.videoInstance.paused;
+    }
+  }, {
+    key: "videoInstance",
+    get: function get() {
+      var uniforms = this.material.uniforms;
+      var videoInstance = uniforms.map.value.image;
+      return videoInstance;
+    }
+  }, {
+    key: "uniforms",
+    get: function get() {
+      var uniforms = this.material.uniforms;
+      return uniforms;
+    }
+  }, {
+    key: "update",
+    value: function () {
+      var _update = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(videoUrl) {
+        var _this2 = this;
+
+        var onStart;
+        return regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                if (!(this.videoUrl === videoUrl)) {
+                  _context.next = 2;
+                  break;
+                }
+
+                return _context.abrupt("return");
+
+              case 2:
+                this.videoUrl = videoUrl;
+                this.freeze = true;
+                _context.next = 6;
+                return this.videoInstance.pause();
+
+              case 6:
+                _context.t0 = URL;
+                _context.next = 9;
+                return _Preloader.Preloader.blob(this.videoUrl);
+
+              case 9:
+                _context.t1 = _context.sent;
+                _context.next = 12;
+                return _context.t0.createObjectURL.call(_context.t0, _context.t1);
+
+              case 12:
+                this.videoInstance.src = _context.sent;
+                this.videoInstance.setAttribute('data-src', this.videoUrl);
+
+                onStart = function onStart() {
+                  if (_this2.videoInstance.currentTime === 0) return;
+                  _this2.uniforms.enable.value = 1;
+                  _this2.freeze = false;
+
+                  _this2.videoInstance.removeEventListener('timeupdate', onStart, false);
+                };
+
+                this.videoInstance.addEventListener('timeupdate', onStart, false);
+
+              case 16:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee, this);
+      }));
+
+      function update(_x) {
+        return _update.apply(this, arguments);
+      }
+
+      return update;
+    }()
+  }, {
+    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;
+    }
+    /**
+     * 暂停视频播放
+     * @returns
+     */
+
+  }, {
+    key: "pause",
+    value: function () {
+      var _pause = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+        return regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                _context2.next = 2;
+                return this.videoInstance.pause();
+
+              case 2:
+                return _context2.abrupt("return", _context2.sent);
+
+              case 3:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2, this);
+      }));
+
+      function pause() {
+        return _pause.apply(this, arguments);
+      }
+
+      return pause;
+    }()
+    /**
+     * 播放视频：
+     * - 如果没有提供 `videoUrl`，则播放上一个视频
+     * - 如果提供 `videoUrl`，则重头开始播放
+     * @param videoUrl 视频地址
+     * @returns
+     */
+
+  }, {
+    key: "play",
+    value: function () {
+      var _play = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4() {
+        var _this3 = this;
+
+        var videoUrl,
+            _args4 = arguments;
+        return regeneratorRuntime.wrap(function _callee4$(_context4) {
+          while (1) {
+            switch (_context4.prev = _context4.next) {
+              case 0:
+                videoUrl = _args4.length > 0 && _args4[0] !== undefined ? _args4[0] : '';
+                videoUrl = (videoUrl || '').replace(/https*:/, '');
+
+                if (videoUrl) {
+                  _context4.next = 10;
+                  break;
+                }
+
+                if (!this.videoUrl) {
+                  _context4.next = 8;
+                  break;
+                }
+
+                _context4.next = 6;
+                return this.videoInstance.play();
+
+              case 6:
+                _context4.next = 9;
+                break;
+
+              case 8:
+                console.warn('警告：视频资源未初始化。');
+
+              case 9:
+                return _context4.abrupt("return", true);
+
+              case 10:
+                if (!(videoUrl === this.videoUrl)) {
+                  _context4.next = 15;
+                  break;
+                }
+
+                this.videoInstance.currentTime = 0;
+                _context4.next = 14;
+                return this.videoInstance.play();
+
+              case 14:
+                return _context4.abrupt("return", true);
+
+              case 15:
+                _context4.next = 17;
+                return this.update(videoUrl);
+
+              case 17:
+                this.videoInstance.pause();
+                _context4.next = 20;
+                return new Promise(function (resolve) {
+                  return setTimeout( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
+                    return regeneratorRuntime.wrap(function _callee3$(_context3) {
+                      while (1) {
+                        switch (_context3.prev = _context3.next) {
+                          case 0:
+                            _this3.videoInstance.currentTime = 0;
+                            _context3.next = 3;
+                            return _this3.videoInstance.play();
+
+                          case 3:
+                            resolve(true);
+
+                          case 4:
+                          case "end":
+                            return _context3.stop();
+                        }
+                      }
+                    }, _callee3);
+                  })), 20);
+                });
+
+              case 20:
+                return _context4.abrupt("return", _context4.sent);
+
+              case 21:
+              case "end":
+                return _context4.stop();
+            }
+          }
+        }, _callee4, this);
+      }));
+
+      function play() {
+        return _play.apply(this, arguments);
+      }
+
+      return play;
+    }()
+    /**
+     * 转成毫秒，保障精准度
+     */
+
+  }, {
+    key: "currentTime",
+    get: function get() {
+      return this.videoInstance.currentTime * 1000;
+    }
+  }]);
+
+  return ARVideoFigureMesh;
+}(THREE.Mesh);
+
+exports.ARVideoFigureMesh = ARVideoFigureMesh;

package/components/ARVideoFigure/ARVideoFigureScene.d.ts

@@ -0,0 +1,11 @@
+import * as THREE from 'three';
+import { ARVideoFigureMesh } from './ARVideoFigureMesh';
+export declare class ARVideoFigureScene {
+    scene: THREE.Scene;
+    renderer: THREE.WebGLRenderer;
+    camera: THREE.OrthographicCamera;
+    mesh: ARVideoFigureMesh;
+    get videoInstance(): HTMLVideoElement;
+    constructor(container: HTMLElement);
+    run: () => void;
+}

package/components/ARVideoFigure/ARVideoFigureScene.js

@@ -0,0 +1,74 @@
+"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.ARVideoFigureScene = void 0;
+
+var THREE = _interopRequireWildcard(require("three"));
+
+var _ARVideoFigureMesh = require("./ARVideoFigureMesh");
+
+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 _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 _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 ARVideoFigureScene = /*#__PURE__*/function () {
+  function ARVideoFigureScene(container) {
+    var _this = this;
+
+    _classCallCheck(this, ARVideoFigureScene);
+
+    _defineProperty(this, "scene", new THREE.Scene());
+
+    _defineProperty(this, "renderer", new THREE.WebGLRenderer({
+      alpha: true
+    }));
+
+    _defineProperty(this, "run", function () {
+      if (!_this.mesh.freeze) {
+        _this.renderer.render(_this.scene, _this.camera);
+      }
+
+      requestAnimationFrame(_this.run);
+    });
+
+    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('ARVideoFigureScene-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 _ARVideoFigureMesh.ARVideoFigureMesh(state.width, state.height, 1, 1);
+    container.append(domElement);
+    this.scene.add(this.mesh);
+    this.renderer.render(this.scene, this.camera);
+    this.run();
+  }
+
+  _createClass(ARVideoFigureScene, [{
+    key: "videoInstance",
+    get: function get() {
+      return this.mesh.videoInstance;
+    }
+  }]);
+
+  return ARVideoFigureScene;
+}();
+
+exports.ARVideoFigureScene = ARVideoFigureScene;

package/components/ARVideoFigure/ImgBgTransparent.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { ImgBgTransparentScene } from './ImgBgTransparentMesh';
+export interface ImgBgTransparentProps {
+    imgUrl: string;
+    className?: string;
+    imgBgTransparentSceneRef?: (imgBgTransparentScene: ImgBgTransparentScene) => void;
+}
+/**
+ * **透明背景** 与 **AR 视频形象** `ARVideoFigure` 实现原理一致，不过此组件仅针对图片。
+ *
+ * 生产环境中还是建议直接采用 `png` 这类支持透明背景的图片。在实际业务落地过程中，如果视频文件生成比较滞后，你可以先通过对应图片来预览效果，调试相关参数。
+ *
+ * @param props
+ * @returns
+ */
+export declare function ImgBgTransparent(props: ImgBgTransparentProps): JSX.Element;