@realsee/dnalogel 0.1.0 → 0.1.1

package/data/PrXel3aqGbp34JQn.js

@@ -4629,11 +4629,19 @@ var treasurePluginData = {
   treasures: [{
     id: 'a',
     type: 0,
-    position: [3.4688, 0.51802, 2.48252]
+    position: {
+      x: 3.4688,
+      y: -0.5180200000000003,
+      z: -2.48252
+    }
   }, {
     id: 'b',
     type: 1,
-    position: [2.80488, 0.867187, -0.866459]
+    position: {
+      x: 2.80488,
+      y: -0.867187,
+      z: 0.866459
+    }
   }]
 };
 exports.treasurePluginData = treasurePluginData;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@realsee/dnalogel",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Realsee Components(React) & Plugins(Five).",
   "author": "BEIKE REALSEE TECHNOLOGY (HK) LIMITED",
   "peerDependencies": {

package/plugins/TreasurePlugin/Controller.d.ts

@@ -1,13 +1,35 @@
-import { Five } from '@realsee/five';
-import { TreasureType } from './constants';
+import * as THREE from 'three';
+import { Five, Subscribe } from '@realsee/five';
+import { TREASURE_TYPE } from './constants';
+export declare type TreasureObjectAssetMap = Map<string, Promise<THREE.Group>>;
+/** 对每个宝箱实例的配置 */
+export interface TreasurePluginItemConfigData {
+    scale?: number;
+    /** 宝箱模型地址 */
+    object_url?: string;
+    /** 宝箱盒子使用的贴图
+     * @description
+     * * 默认使用 object_url 文件中的盒子贴图
+     * * 如果传了 box_texture_url 会替换默认贴图
+     */
+    box_texture_url?: string;
+    /** 宝箱表情动画使用的贴图列表 */
+    face_anime_texture_urls?: string[];
+}
 /** 宝箱数据 */
 export interface TreasurePluginItemData {
     /** 宝箱 ID */
     id: string;
-    /** 宝箱位置：[x, y, z] */
-    position: number[];
-    /** 宝箱类型 */
-    type: TreasureType;
+    /** 宝箱位置 */
+    position: {
+        x: number;
+        y: number;
+        z: number;
+    };
+    /** 使用预设的宝箱类型 */
+    type?: TREASURE_TYPE;
+    /** 如果不想使用预设的宝箱，可以传入自定义的宝箱配置 */
+    config?: TreasurePluginItemConfigData;
 }
 export interface TreasurePluginData {
     treasures: TreasurePluginItemData[];
@@ -17,16 +39,27 @@ export declare type TreasurePluginEvents = {
     /** 点击宝箱事件
      * @param id: 宝箱 ID
      */
-    tap: (id: string) => void;
+    tap: (params: {
+        id: string;
+    }) => void;
+    /** 宝箱打开的动画执行完毕 */
+    openAnimationEnded: (params: {
+        id: string;
+    }) => void;
 };
 export declare class TreasurePluginController {
+    hooks: Subscribe<TreasurePluginEvents>;
     private five;
     private selfGroup;
-    private hooks;
-    private fbxLoader;
     private treasures;
+    private textureLoader;
+    private modelLoader;
     constructor(five: Five);
     load(data: TreasurePluginData): Promise<boolean>;
+    dispose(): void;
     removeTreasureByID(id: string): boolean;
     private onTreasureClick;
+    private getTextureObjectParams;
+    private onTreasureOpenAnimationEnded;
+    private getConfig;
 }

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,38 @@ 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, "onTreasureClick", function (id) {
-      _this.hooks.emit('tap', id);
+      _this.hooks.emit('tap', {
+        id: id
+      });
+    });
+
+    _defineProperty(this, "getTextureObjectParams", 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 ==========
@@ -90,57 +114,39 @@ var TreasurePluginController = /*#__PURE__*/function () {
     key: "load",
     value: function () {
       var _load = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(data) {
-        var _this2 = this,
-            _this$selfGroup;
+        var _this$selfGroup;
 
-        var baseFbxObjPromise, treasureTexturesPromise, faceTexturesPromise, _yield$Promise$all, _yield$Promise$all2, fbxGroup, treasureTextures, treasures;
+        var _yield$to, _yield$to2, error, treasures;
 
         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;
-                });
+                _context.next = 2;
+                return (0, _to["default"])(Promise.all(data.treasures.map(this.getTextureObjectParams).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$selfGroup = this.selfGroup).add.apply(_this$selfGroup, _toConsumableArray(treasures));
 
                 this.treasures = treasures;
                 return _context.abrupt("return", true);
 
-              case 13:
+              case 11:
               case "end":
                 return _context.stop();
             }
@@ -154,6 +160,15 @@ var TreasurePluginController = /*#__PURE__*/function () {
 
       return load;
     }()
+  }, {
+    key: "dispose",
+    value: function dispose() {
+      this.modelLoader.dispose();
+      this.textureLoader.dispose();
+      this.treasures.forEach(function (treasure) {
+        return treasure.dispose();
+      });
+    }
   }, {
     key: "removeTreasureByID",
     value: function removeTreasureByID(id) {
@@ -167,6 +182,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,43 @@
 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?;
+    constructor(params: TreasureObjectParams);
+    /** 销毁当前宝箱实例
+     * @description 注意 dispose 并不会销毁所使用的贴图，因为贴图会有共用关系，需要在最外层销毁
+     */
     dispose(): void;
     rotateToCamera(): void;
     private open;
-    private init;
+    load(): Promise<TreasureObject>;
     private onFiveWantsTapGesture;
     private onFivePanoArrived;
 }