@realsee/dnalogel 0.1.0 → 0.1.4

package/plugins/TreasurePlugin/Controller.js

@@ -7,21 +7,23 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TreasurePluginController = void 0;
 
-var _five = require("@realsee/five");
-
 var THREE = _interopRequireWildcard(require("three"));
 
-var _FBXLoader = require("three/examples/jsm/loaders/FBXLoader");
+var _five = require("@realsee/five");
+
+var _isNil = require("../../shared-utils/isNil");
 
 var _constants = require("./constants");
 
 var _TreasureObject = require("./TreasureObject");
 
-var _loadFbxObj = require("../../shared-utils/three/loadFbxObj");
+var _getTextureLoader = require("../../shared-utils/three/getTextureLoader");
+
+var _getExtraModelLoader = require("../../shared-utils/three/getExtraModelLoader");
 
-var _loadTreasureTextures = require("./utils/loadTreasureTextures");
+var _to = _interopRequireDefault(require("../../shared-utils/to"));
 
-var _loadTexture = require("../../shared-utils/three/loadTexture");
+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); }
 
@@ -59,10 +61,6 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
 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; }
 
-// load 时才开始加载资源
-// 根据传入的数据判断需要加载哪些资源
-// 先写死宝箱类型，后续改成配置表，然后根据表里面的类型加载数据
-// FBX 文件里面的贴图默认用的是黄色贴图，所以对于默认的贴图逻辑有特殊处理
 var TreasurePluginController = /*#__PURE__*/function () {
   function TreasurePluginController(five) {
     var _this = this;
@@ -71,12 +69,50 @@ var TreasurePluginController = /*#__PURE__*/function () {
 
     _defineProperty(this, "hooks", new _five.Subscribe());
 
-    _defineProperty(this, "fbxLoader", new _FBXLoader.FBXLoader());
-
     _defineProperty(this, "treasures", []);
 
+    _defineProperty(this, "textureLoader", (0, _getTextureLoader.getTextureLoader)());
+
+    _defineProperty(this, "modelLoader", (0, _getExtraModelLoader.getExtraModelLoader)());
+
+    _defineProperty(this, "dispose", function () {
+      _this.modelLoader.dispose();
+
+      _this.textureLoader.dispose();
+
+      _this.five.scene.remove(_this.selfGroup);
+
+      _this.treasures.forEach(function (treasure) {
+        return treasure.dispose();
+      });
+    });
+
     _defineProperty(this, "onTreasureClick", function (id) {
-      _this.hooks.emit('tap', id);
+      _this.hooks.emit('tap', {
+        id: id
+      });
+    });
+
+    _defineProperty(this, "getTreasureObjectParams", function (data) {
+      var config = _this.getConfig(data);
+
+      var position = new THREE.Vector3().fromArray(Object.values(data.position));
+      return {
+        config: config,
+        position: position,
+        id: data.id,
+        five: _this.five,
+        loadTexture: _this.textureLoader.load,
+        loadModelGroup: _this.modelLoader.load,
+        clickCallback: _this.onTreasureClick,
+        onOpenAnimationEnded: _this.onTreasureOpenAnimationEnded
+      };
+    });
+
+    _defineProperty(this, "onTreasureOpenAnimationEnded", function (id) {
+      _this.hooks.emit('openAnimationEnded', {
+        id: id
+      });
     });
 
     this.five = five; // ========== self group ==========
@@ -84,63 +120,53 @@ var TreasurePluginController = /*#__PURE__*/function () {
     this.selfGroup = new THREE.Group();
     this.selfGroup.name = 'treasure-plugin-group';
     this.five.scene.add(this.selfGroup);
+    this.five.once('dispose', this.dispose);
   }
 
   _createClass(TreasurePluginController, [{
     key: "load",
     value: function () {
-      var _load = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(data) {
-        var _this2 = this,
-            _this$selfGroup;
+      var _load = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(data, options) {
+        var _this$treasures;
 
-        var baseFbxObjPromise, treasureTexturesPromise, faceTexturesPromise, _yield$Promise$all, _yield$Promise$all2, fbxGroup, treasureTextures, treasures;
+        var _yield$to, _yield$to2, error, treasures, appendTreasuresAfterLoaded, _this$selfGroup;
 
         return regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) {
             switch (_context.prev = _context.next) {
               case 0:
-                baseFbxObjPromise = (0, _loadFbxObj.loadFbxObj)(this.fbxLoader, _constants.TREASURE_FBX_URL);
-                treasureTexturesPromise = (0, _loadTreasureTextures.loadTreasureTextures)(data, baseFbxObjPromise);
-                faceTexturesPromise = Promise.all(_constants.TREASURE_FACE_ANIMATION_URLS.map(_loadTexture.loadTexture));
-                _context.next = 5;
-                return Promise.all([baseFbxObjPromise, treasureTexturesPromise]);
-
-              case 5:
-                _yield$Promise$all = _context.sent;
-                _yield$Promise$all2 = _slicedToArray(_yield$Promise$all, 2);
-                fbxGroup = _yield$Promise$all2[0];
-                treasureTextures = _yield$Promise$all2[1];
-                treasures = data.treasures.map(function (_ref) {
-                  var _treasureTextures$fin;
-
-                  var id = _ref.id,
-                      type = _ref.type,
-                      positionArray = _ref.position;
-                  var texture = (_treasureTextures$fin = treasureTextures.find(function (_ref2) {
-                    var treasureMapItem = _ref2.treasureMapItem;
-                    return treasureMapItem.type === type;
-                  })) === null || _treasureTextures$fin === void 0 ? void 0 : _treasureTextures$fin.texture;
-                  if (!texture) throw new Error('数据初始化失败，未能找到预期的 Texture');
-                  var position = new THREE.Vector3().fromArray(positionArray).applyAxisAngle(new THREE.Vector3(1, 0, 0), Math.PI);
-                  var treasure = new _TreasureObject.TreasureObject({
-                    id: id,
-                    fbxGroup: fbxGroup,
-                    position: position,
-                    five: _this2.five,
-                    faceTexturesPromise: faceTexturesPromise,
-                    baseTexture: texture,
-                    clickCallback: _this2.onTreasureClick
-                  });
-                  treasure.scale.fromArray([0.008, 0.008, 0.008]);
-                  return treasure;
-                });
-
-                (_this$selfGroup = this.selfGroup).add.apply(_this$selfGroup, _toConsumableArray(treasures));
-
-                this.treasures = treasures;
-                return _context.abrupt("return", true);
-
-              case 13:
+                _context.next = 2;
+                return (0, _to["default"])(Promise.all(data.treasures.map(this.getTreasureObjectParams).filter(_isNil.notNil).map(function (params) {
+                  return new _TreasureObject.TreasureObject(params).load();
+                })));
+
+              case 2:
+                _yield$to = _context.sent;
+                _yield$to2 = _slicedToArray(_yield$to, 2);
+                error = _yield$to2[0];
+                treasures = _yield$to2[1];
+
+                if (!(error || !treasures)) {
+                  _context.next = 8;
+                  break;
+                }
+
+                throw error;
+
+              case 8:
+                (_this$treasures = this.treasures).push.apply(_this$treasures, _toConsumableArray(treasures));
+
+                appendTreasuresAfterLoaded = (options === null || options === void 0 ? void 0 : options.appendTreasuresAfterLoaded) || true;
+
+                if (appendTreasuresAfterLoaded) {
+                  (_this$selfGroup = this.selfGroup).add.apply(_this$selfGroup, _toConsumableArray(treasures));
+
+                  this.five.needsRender = true;
+                }
+
+                return _context.abrupt("return", treasures);
+
+              case 12:
               case "end":
                 return _context.stop();
             }
@@ -148,12 +174,34 @@ var TreasurePluginController = /*#__PURE__*/function () {
         }, _callee, this);
       }));
 
-      function load(_x) {
+      function load(_x, _x2) {
         return _load.apply(this, arguments);
       }
 
       return load;
     }()
+  }, {
+    key: "appendChild",
+    value: function appendChild(child) {
+      this.selfGroup.add(child);
+      this.five.needsRender = true;
+      return this;
+    }
+  }, {
+    key: "appendChildByID",
+    value: function appendChildByID(childID) {
+      var treasure = this.getTreasureByID(childID);
+      if (!treasure) throw new Error('can not find treasure which has ID ' + childID);
+      this.appendChild(treasure);
+      return this;
+    }
+  }, {
+    key: "getTreasureByID",
+    value: function getTreasureByID(id) {
+      return this.treasures.find(function (treasure) {
+        return treasure.treasureID === id;
+      });
+    }
   }, {
     key: "removeTreasureByID",
     value: function removeTreasureByID(id) {
@@ -167,6 +215,27 @@ var TreasurePluginController = /*#__PURE__*/function () {
       this.treasures.slice(treasureIndex, 1);
       return true;
     }
+  }, {
+    key: "getConfig",
+    value: function getConfig(data) {
+      var _DEFAULT_TREASURE_CON, _ref2, _data$config$scale, _data$config, _data$config2, _data$config3, _data$config4;
+
+      var typeConfig = (_DEFAULT_TREASURE_CON = _constants.DEFAULT_TREASURE_CONFIGS.find(function (_ref) {
+        var type = _ref.type;
+        return type === data.type;
+      })) === null || _DEFAULT_TREASURE_CON === void 0 ? void 0 : _DEFAULT_TREASURE_CON.config;
+      var defaultConfig = _constants.DEFAULT_TREASURE_CONFIG;
+      var scale = (_ref2 = (_data$config$scale = data === null || data === void 0 ? void 0 : (_data$config = data.config) === null || _data$config === void 0 ? void 0 : _data$config.scale) !== null && _data$config$scale !== void 0 ? _data$config$scale : typeConfig === null || typeConfig === void 0 ? void 0 : typeConfig.scale) !== null && _ref2 !== void 0 ? _ref2 : defaultConfig.scale;
+      var objectUrl = (data === null || data === void 0 ? void 0 : (_data$config2 = data.config) === null || _data$config2 === void 0 ? void 0 : _data$config2.object_url) || (typeConfig === null || typeConfig === void 0 ? void 0 : typeConfig.objectUrl) || defaultConfig.objectUrl;
+      var boxTextureUrl = (data === null || data === void 0 ? void 0 : (_data$config3 = data.config) === null || _data$config3 === void 0 ? void 0 : _data$config3.box_texture_url) || (typeConfig === null || typeConfig === void 0 ? void 0 : typeConfig.boxTextureUrl) || defaultConfig.boxTextureUrl;
+      var faceAnimeTextureUrls = (data === null || data === void 0 ? void 0 : (_data$config4 = data.config) === null || _data$config4 === void 0 ? void 0 : _data$config4.face_anime_texture_urls) || (typeConfig === null || typeConfig === void 0 ? void 0 : typeConfig.faceAnimeTextureUrls) || defaultConfig.faceAnimeTextureUrls;
+      return {
+        scale: scale,
+        objectUrl: objectUrl,
+        boxTextureUrl: boxTextureUrl,
+        faceAnimeTextureUrls: faceAnimeTextureUrls
+      };
+    }
   }]);
 
   return TreasurePluginController;

package/plugins/TreasurePlugin/TreasureFaceAnime.d.ts

@@ -1,20 +1,22 @@
+import * as THREE from 'three';
 import { Five } from '@realsee/five';
-import { Group, Texture } from 'three';
-export interface TreasureFaceAnimeParam {
+import { Group } from 'three';
+export interface TreasureFaceAnimeParams {
     five: Five;
     treasureGroup: Group;
-    faceTexturesPromise: Promise<Texture[]>;
+    textureUrls: string[];
+    loadTexture: (url: string) => Promise<THREE.Texture>;
 }
 export declare class TreasureFaceAnime {
     paused: boolean;
     private five;
-    private treasureGroup;
     private faceAnimeStep;
+    private treasureGroup;
+    private initialFaceTexture;
     private faceAnimeTimer?;
     private faceTexturesPromise;
-    private initialFaceTexture;
     private faceMesh;
-    constructor(param: TreasureFaceAnimeParam);
+    constructor(params: TreasureFaceAnimeParams);
     play: () => Promise<boolean>;
     pause(): boolean;
     dispose(): void;

package/plugins/TreasurePlugin/TreasureFaceAnime.js

@@ -26,7 +26,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 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 TreasureFaceAnime = /*#__PURE__*/function () {
-  function TreasureFaceAnime(param) {
+  function TreasureFaceAnime(params) {
     var _this = this;
 
     _classCallCheck(this, TreasureFaceAnime);
@@ -85,9 +85,9 @@ var TreasureFaceAnime = /*#__PURE__*/function () {
       }, _callee);
     })));
 
-    this.five = param.five;
-    this.treasureGroup = param.treasureGroup;
-    this.faceTexturesPromise = param.faceTexturesPromise;
+    this.five = params.five;
+    this.treasureGroup = params.treasureGroup;
+    this.faceTexturesPromise = Promise.all(params.textureUrls.map(params.loadTexture));
     this.faceMesh = this.treasureGroup.getObjectByName('face');
     var initialFaceTexture = this.faceMesh.material.map;
     if (!initialFaceTexture) throw new Error('初始化失败，不能从模型文件中找到对应的动画贴图');

package/plugins/TreasurePlugin/TreasureObject.d.ts

@@ -1,35 +1,53 @@
 import * as THREE from 'three';
 import { Five } from '@realsee/five';
+export interface TreasureObjectConfig {
+    scale: number;
+    objectUrl: string;
+    boxTextureUrl?: string;
+    faceAnimeTextureUrls: string[];
+}
 /** 宝箱实例
  * @description
  * 点击宝箱可以打开宝箱
  * @description
  * 在宝箱未打开时，靠近宝箱或点击宝箱，宝箱会转动到朝向用户的方向
  */
-export interface TreasureObjectParam {
+export interface TreasureObjectParams {
     id: string;
     five: Five;
-    fbxGroup: THREE.Group;
     position: THREE.Vector3;
-    baseTexture: THREE.Texture;
-    faceTexturesPromise: Promise<THREE.Texture[]>;
+    config: TreasureObjectConfig;
     clickCallback?: (id: string) => unknown;
+    onOpenAnimationEnded?: (id: string) => unknown;
+    loadTexture: (url: string) => Promise<THREE.Texture>;
+    loadModelGroup: (url: string) => Promise<THREE.Group>;
 }
 export declare class TreasureObject extends THREE.Object3D {
     readonly treasureID: string;
     readonly name = "treasureObject";
     protected opened: boolean;
     private five;
-    private texture;
-    private modelGroup;
-    private faceAnime;
-    private openAnime;
-    private clickCallback?;
-    constructor(params: TreasureObjectParam);
+    private params;
+    private faceAnime?;
+    private openAnime?;
+    private modelGroupPromise;
+    constructor(params: TreasureObjectParams);
+    load(): Promise<TreasureObject>;
+    show(params?: {
+        duration?: number;
+    }): Promise<boolean>;
+    hide(params?: {
+        duration?: number;
+    }): Promise<boolean>;
+    /** 销毁当前宝箱实例
+     * @description 注意 dispose 并不会销毁所使用的贴图，因为贴图会有共用关系，需要在最外层销毁
+     */
     dispose(): void;
+    /** 旋转宝箱朝向用户 */
     rotateToCamera(): void;
-    private open;
-    private init;
+    /** 打开宝箱 */
+    open(): boolean;
+    private getModelPromise;
     private onFiveWantsTapGesture;
     private onFivePanoArrived;
 }