@oasis-engine/ark - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

dist/index.browser.js

@@ -92,2 +92,3 @@ (function (global, factory) {
       _this.asset = "";
+      _this._setModelPromise = void 0;
       _this._modelUrl = void 0;
@@ -99,3 +100,2 @@ _this._actionUrl = void 0;
       _this._faceUrl = void 0;
-      _this._setModelPromise = void 0;
       _this._modelEntity = void 0;
@@ -106,2 +106,6 @@ _this._hairEntity = void 0;
       _this._faceEntity = void 0;
+      _this._animator = void 0;
+      _this._animationNameList = [];
+      _this._blendShapeWeights = [];
+      _this._blendShapeNameMap = {};
       return _this;
@@ -112,11 +116,11 @@ }
 
-    _proto._destroyGLTF = function _destroyGLTF() {
-      this._modelEntity && this._modelEntity.destroy();
-      this._modelEntity = null;
-      this._setModelPromise = null;
-    };
+    /**
+     * Replace 3D Model by glTF url.
+     */
+    _proto.replaceModel =
+    /*#__PURE__*/
+    function () {
+      var _replaceModel = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(modelUrl) {
+        var res, defaultSceneRoot, animations, clone, animator, i, length, renderers, _i, _length, blendShapeWeights;
 
-    _proto._addModel = /*#__PURE__*/function () {
-      var _addModel2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(modelUrl) {
-        var res, defaultSceneRoot, clone;
         return regeneratorRuntime.wrap(function _callee$(_context) {
@@ -134,6 +138,31 @@ while (1) {
                 res = _context.sent;
-                defaultSceneRoot = res.defaultSceneRoot;
+                defaultSceneRoot = res.defaultSceneRoot, animations = res.animations;
                 clone = defaultSceneRoot.clone();
                 this.entity.addChild(clone);
-                this._modelEntity = clone;
+                this._modelEntity = clone; // animation
+
+                animator = clone.getComponent(oasisEngine.Animator);
+                this._animator = animator;
+                this._animationNameList.length = 0;
+
+                if (animations) {
+                  for (i = 0, length = animations.length; i < length; i++) {
+                    this._animationNameList[i] = animations[i].name;
+                  }
+                } // blendshape
+
+
+                renderers = [];
+                clone.getComponentsIncludeChildren(oasisEngine.SkinnedMeshRenderer, renderers);
+                this._blendShapeWeights.length = 0;
+
+                for (_i = 0, _length = renderers.length; _i < _length; _i++) {
+                  blendShapeWeights = renderers[_i].blendShapeWeights;
+
+                  if (blendShapeWeights) {
+                    this._blendShapeWeights.push(blendShapeWeights);
+                  }
+                } // init replace slot
+
+
                 this._hairEntity = this._modelEntity.findByName("HumanNormal_Head_Hair_00");
@@ -144,3 +173,3 @@ this._eyeEntity = this._modelEntity.findByName("HumanNormal_Head_Eyes_00");
 
-              case 11:
+              case 19:
               case "end":
@@ -153,11 +182,17 @@ return _context.stop();
 
-      function _addModel(_x) {
-        return _addModel2.apply(this, arguments);
+      function replaceModel(_x) {
+        return _replaceModel.apply(this, arguments);
       }
 
-      return _addModel;
-    }();
+      return replaceModel;
+    }()
+    /**
+     * Replace action by glTF url which includes action information.
+     */
+    ;
 
-    _proto._replaceAction = /*#__PURE__*/function () {
-      var _replaceAction2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(url) {
+    _proto.replaceAction =
+    /*#__PURE__*/
+    function () {
+      var _replaceAction = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(url) {
         var _this2 = this;
@@ -216,11 +251,17 @@
 
-      function _replaceAction(_x2) {
-        return _replaceAction2.apply(this, arguments);
+      function replaceAction(_x2) {
+        return _replaceAction.apply(this, arguments);
       }
 
-      return _replaceAction;
-    }();
+      return replaceAction;
+    }()
+    /**
+     * Replace component such as eye and hair by glTF url.
+     */
+    ;
 
-    _proto._replaceComponent = /*#__PURE__*/function () {
-      var _replaceComponent2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3(url) {
+    _proto.replaceComponent =
+    /*#__PURE__*/
+    function () {
+      var _replaceComponent = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3(url) {
         var res, defaultSceneRoot, clone, slotEntity;
@@ -253,11 +294,45 @@ return regeneratorRuntime.wrap(function _callee3$(_context3) {
 
-      function _replaceComponent(_x3) {
-        return _replaceComponent2.apply(this, arguments);
+      function replaceComponent(_x3) {
+        return _replaceComponent.apply(this, arguments);
       }
 
-      return _replaceComponent;
-    }();
+      return replaceComponent;
+    }()
+    /**
+     * Edit blendShape by rendererIndex and weightIndex.
+     * @example
+     * editFaceByIndex(0, 1, 0.5);
+     */
+    ;
 
+    _proto.editFaceByIndex = function editFaceByIndex(rendererIndex, weightIndex, value) {
+      var weights = this._blendShapeWeights[rendererIndex];
+
+      if (weights) {
+        weights[weightIndex] = value;
+      }
+    }
+    /**
+     * Get blendShape value by rendererIndex and weightIndex.
+     */
+    ;
+
+    _proto.getFaceValueByIndex = function getFaceValueByIndex(rendererIndex, weightIndex) {
+      var weights = this._blendShapeWeights[rendererIndex];
+
+      if (weights) {
+        return weights[weightIndex];
+      }
+
+      return 0;
+    };
+
+    _proto._destroyGLTF = function _destroyGLTF() {
+      this._modelEntity && this._modelEntity.destroy();
+      this._modelEntity = null;
+      this._setModelPromise = null;
+    };
+
     _proto._onDestroy = function _onDestroy() {
-      this._destroyGLTF();
+      this.modelUrl = "";
     };
@@ -283,3 +358,3 @@
                     _context4.next = 3;
-                    return _this3._replaceComponent(url);
+                    return _this3.replaceComponent(url);
 
@@ -316,3 +391,3 @@ case 3:
                     _context5.next = 3;
-                    return _this4._replaceComponent(url);
+                    return _this4.replaceComponent(url);
 
@@ -349,3 +424,3 @@ case 3:
                     _context6.next = 3;
-                    return _this5._replaceComponent(url);
+                    return _this5.replaceComponent(url);
 
@@ -382,3 +457,3 @@ case 3:
                     _context7.next = 3;
-                    return _this6._replaceComponent(url);
+                    return _this6.replaceComponent(url);
 
@@ -403,8 +478,20 @@ case 3:
       set: function set(url) {
-        this._destroyGLTF();
+        var _this7 = this;
 
         this._modelUrl = url;
 
-        if (url) {
-          this._setModelPromise = this._addModel(url);
+        if (this._setModelPromise) {
+          this._setModelPromise.then(function () {
+            _this7._destroyGLTF();
+
+            if (url) {
+              _this7._setModelPromise = _this7.replaceModel(url);
+            }
+          });
+        } else {
+          this._destroyGLTF();
+
+          if (url) {
+            this._setModelPromise = this.replaceModel(url);
+          }
         }
@@ -418,3 +505,3 @@ }
       set: function set(url) {
-        var _this7 = this;
+        var _this8 = this;
 
@@ -425,6 +512,24 @@ this._actionUrl = url;
           this._setModelPromise.then(function () {
-            _this7._replaceAction(url);
+            _this8.replaceAction(url);
           });
         }
       }
+      /**
+       * The controller of the animation system.
+       */
+
+    }, {
+      key: "animator",
+      get: function get() {
+        return this._animator;
+      }
+      /**
+       * All animation name list in this 3D model.
+       */
+
+    }, {
+      key: "animationNameList",
+      get: function get() {
+        return this._animationNameList;
+      }
     }]);
@@ -431,0 +536,0 @@

dist/index.module.js

@@ -1,2 +0,2 @@
-import { Parser, Component, AssetType, MeshRenderer, SkinnedMeshRenderer } from 'oasis-engine';
+import { Parser, Component, Animator, SkinnedMeshRenderer, AssetType, MeshRenderer } from 'oasis-engine';
 
@@ -88,2 +88,3 @@ function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
     _this.asset = "";
+    _this._setModelPromise = void 0;
     _this._modelUrl = void 0;
@@ -95,3 +96,2 @@ _this._actionUrl = void 0;
     _this._faceUrl = void 0;
-    _this._setModelPromise = void 0;
     _this._modelEntity = void 0;
@@ -102,2 +102,6 @@ _this._hairEntity = void 0;
     _this._faceEntity = void 0;
+    _this._animator = void 0;
+    _this._animationNameList = [];
+    _this._blendShapeWeights = [];
+    _this._blendShapeNameMap = {};
     return _this;
@@ -108,11 +112,11 @@ }
 
-  _proto._destroyGLTF = function _destroyGLTF() {
-    this._modelEntity && this._modelEntity.destroy();
-    this._modelEntity = null;
-    this._setModelPromise = null;
-  };
+  /**
+   * Replace 3D Model by glTF url.
+   */
+  _proto.replaceModel =
+  /*#__PURE__*/
+  function () {
+    var _replaceModel = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(modelUrl) {
+      var res, defaultSceneRoot, animations, clone, animator, i, length, renderers, _i, _length, blendShapeWeights;
 
-  _proto._addModel = /*#__PURE__*/function () {
-    var _addModel2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(modelUrl) {
-      var res, defaultSceneRoot, clone;
       return regeneratorRuntime.wrap(function _callee$(_context) {
@@ -130,6 +134,31 @@ while (1) {
               res = _context.sent;
-              defaultSceneRoot = res.defaultSceneRoot;
+              defaultSceneRoot = res.defaultSceneRoot, animations = res.animations;
               clone = defaultSceneRoot.clone();
               this.entity.addChild(clone);
-              this._modelEntity = clone;
+              this._modelEntity = clone; // animation
+
+              animator = clone.getComponent(Animator);
+              this._animator = animator;
+              this._animationNameList.length = 0;
+
+              if (animations) {
+                for (i = 0, length = animations.length; i < length; i++) {
+                  this._animationNameList[i] = animations[i].name;
+                }
+              } // blendshape
+
+
+              renderers = [];
+              clone.getComponentsIncludeChildren(SkinnedMeshRenderer, renderers);
+              this._blendShapeWeights.length = 0;
+
+              for (_i = 0, _length = renderers.length; _i < _length; _i++) {
+                blendShapeWeights = renderers[_i].blendShapeWeights;
+
+                if (blendShapeWeights) {
+                  this._blendShapeWeights.push(blendShapeWeights);
+                }
+              } // init replace slot
+
+
               this._hairEntity = this._modelEntity.findByName("HumanNormal_Head_Hair_00");
@@ -140,3 +169,3 @@ this._eyeEntity = this._modelEntity.findByName("HumanNormal_Head_Eyes_00");
 
-            case 11:
+            case 19:
             case "end":
@@ -149,11 +178,17 @@ return _context.stop();
 
-    function _addModel(_x) {
-      return _addModel2.apply(this, arguments);
+    function replaceModel(_x) {
+      return _replaceModel.apply(this, arguments);
     }
 
-    return _addModel;
-  }();
+    return replaceModel;
+  }()
+  /**
+   * Replace action by glTF url which includes action information.
+   */
+  ;
 
-  _proto._replaceAction = /*#__PURE__*/function () {
-    var _replaceAction2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(url) {
+  _proto.replaceAction =
+  /*#__PURE__*/
+  function () {
+    var _replaceAction = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(url) {
       var _this2 = this;
@@ -212,11 +247,17 @@
 
-    function _replaceAction(_x2) {
-      return _replaceAction2.apply(this, arguments);
+    function replaceAction(_x2) {
+      return _replaceAction.apply(this, arguments);
     }
 
-    return _replaceAction;
-  }();
+    return replaceAction;
+  }()
+  /**
+   * Replace component such as eye and hair by glTF url.
+   */
+  ;
 
-  _proto._replaceComponent = /*#__PURE__*/function () {
-    var _replaceComponent2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3(url) {
+  _proto.replaceComponent =
+  /*#__PURE__*/
+  function () {
+    var _replaceComponent = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3(url) {
       var res, defaultSceneRoot, clone, slotEntity;
@@ -249,11 +290,45 @@ return regeneratorRuntime.wrap(function _callee3$(_context3) {
 
-    function _replaceComponent(_x3) {
-      return _replaceComponent2.apply(this, arguments);
+    function replaceComponent(_x3) {
+      return _replaceComponent.apply(this, arguments);
     }
 
-    return _replaceComponent;
-  }();
+    return replaceComponent;
+  }()
+  /**
+   * Edit blendShape by rendererIndex and weightIndex.
+   * @example
+   * editFaceByIndex(0, 1, 0.5);
+   */
+  ;
 
+  _proto.editFaceByIndex = function editFaceByIndex(rendererIndex, weightIndex, value) {
+    var weights = this._blendShapeWeights[rendererIndex];
+
+    if (weights) {
+      weights[weightIndex] = value;
+    }
+  }
+  /**
+   * Get blendShape value by rendererIndex and weightIndex.
+   */
+  ;
+
+  _proto.getFaceValueByIndex = function getFaceValueByIndex(rendererIndex, weightIndex) {
+    var weights = this._blendShapeWeights[rendererIndex];
+
+    if (weights) {
+      return weights[weightIndex];
+    }
+
+    return 0;
+  };
+
+  _proto._destroyGLTF = function _destroyGLTF() {
+    this._modelEntity && this._modelEntity.destroy();
+    this._modelEntity = null;
+    this._setModelPromise = null;
+  };
+
   _proto._onDestroy = function _onDestroy() {
-    this._destroyGLTF();
+    this.modelUrl = "";
   };
@@ -279,3 +354,3 @@
                   _context4.next = 3;
-                  return _this3._replaceComponent(url);
+                  return _this3.replaceComponent(url);
 
@@ -312,3 +387,3 @@ case 3:
                   _context5.next = 3;
-                  return _this4._replaceComponent(url);
+                  return _this4.replaceComponent(url);
 
@@ -345,3 +420,3 @@ case 3:
                   _context6.next = 3;
-                  return _this5._replaceComponent(url);
+                  return _this5.replaceComponent(url);
 
@@ -378,3 +453,3 @@ case 3:
                   _context7.next = 3;
-                  return _this6._replaceComponent(url);
+                  return _this6.replaceComponent(url);
 
@@ -399,8 +474,20 @@ case 3:
     set: function set(url) {
-      this._destroyGLTF();
+      var _this7 = this;
 
       this._modelUrl = url;
 
-      if (url) {
-        this._setModelPromise = this._addModel(url);
+      if (this._setModelPromise) {
+        this._setModelPromise.then(function () {
+          _this7._destroyGLTF();
+
+          if (url) {
+            _this7._setModelPromise = _this7.replaceModel(url);
+          }
+        });
+      } else {
+        this._destroyGLTF();
+
+        if (url) {
+          this._setModelPromise = this.replaceModel(url);
+        }
       }
@@ -414,3 +501,3 @@ }
     set: function set(url) {
-      var _this7 = this;
+      var _this8 = this;
 
@@ -421,6 +508,24 @@ this._actionUrl = url;
         this._setModelPromise.then(function () {
-          _this7._replaceAction(url);
+          _this8.replaceAction(url);
         });
       }
     }
+    /**
+     * The controller of the animation system.
+     */
+
+  }, {
+    key: "animator",
+    get: function get() {
+      return this._animator;
+    }
+    /**
+     * All animation name list in this 3D model.
+     */
+
+  }, {
+    key: "animationNameList",
+    get: function get() {
+      return this._animationNameList;
+    }
   }]);
@@ -427,0 +532,0 @@

package.json

 {
-  "version": "0.0.3",
+  "version": "0.0.4",
   "name": "@oasis-engine/ark",
@@ -4,0 +4,0 @@ "browser": "dist/index.browser.js",

README.md

@@ -53,3 +53,3 @@ # Avatar Component
 ```sh
-npm install @oasis-engine/ark
+npm install @oasis-engine/ark -S
 ```
@@ -56,0 +56,0 @@

types/index.d.ts

@@ -1,2 +0,2 @@
-import { Component } from "oasis-engine";
+import { Animator, Component, Entity } from "oasis-engine";
 declare class ArkComponent extends Component {
@@ -6,2 +6,3 @@ group: string;
     asset: string;
+    private _setModelPromise;
     private _modelUrl;
@@ -13,3 +14,2 @@ private _actionUrl;
     private _faceUrl;
-    private _setModelPromise;
     private _modelEntity;
@@ -20,2 +20,6 @@ private _hairEntity;
     private _faceEntity;
+    private _animator;
+    private _animationNameList;
+    private _blendShapeWeights;
+    private _blendShapeNameMap;
     get eyeUrl(): string;
@@ -33,8 +37,35 @@ set eyeUrl(url: string);
     set actionUrl(url: string);
+    /**
+     * The controller of the animation system.
+     */
+    get animator(): Animator;
+    /**
+     * All animation name list in this 3D model.
+     */
+    get animationNameList(): string[];
+    /**
+     * Replace 3D Model by glTF url.
+     */
+    replaceModel(modelUrl: string): Promise<void>;
+    /**
+     * Replace action by glTF url which includes action information.
+     */
+    replaceAction(url: string): Promise<void>;
+    /**
+     * Replace component such as eye and hair by glTF url.
+     */
+    replaceComponent(url: string): Promise<Entity>;
+    /**
+     * Edit blendShape by rendererIndex and weightIndex.
+     * @example
+     * editFaceByIndex(0, 1, 0.5);
+     */
+    editFaceByIndex(rendererIndex: number, weightIndex: number, value: number): void;
+    /**
+     * Get blendShape value by rendererIndex and weightIndex.
+     */
+    getFaceValueByIndex(rendererIndex: number, weightIndex: number): number;
     _destroyGLTF(): void;
-    private _addModel;
-    private _replaceAction;
-    private _replaceComponent;
     _onDestroy(): void;
 }
 export { ArkComponent };

No alert changes

Improved metrics

Total package byte prevSize

35727

increased by21.5%

Lines of code

955

increased by27.33%

No dependency changes