@oasis-engine/ark - npm Package Compare versions

Comparing version 0.0.11 to 0.0.12

dist/index.browser.js

@@ -78,13 +78,92 @@ (function (global, factory) {
 
+  oasisEngine.Shader.create("uv-mapping-cover", "\n    attribute vec4 POSITION;\n    attribute vec2 TEXCOORD_0;\n\n    varying vec2 uv;\n                \n    void main() {\n      uv = TEXCOORD_0;\n      gl_Position = vec4( POSITION.xzy , 1.0);\n      gl_Position.y *= -1.0;\n      \n      gl_Position.x = gl_Position.x * 0.5;\n      gl_Position.y = gl_Position.y * 0.5 - 0.25;\n    }\n    ", "\n    uniform float u_alphaCutoff;\n    uniform sampler2D coverTex;\n    varying vec2 uv;\n\n    void main() {\n       vec4 baseColor = texture2D(coverTex, vec2(uv.x, 1.0-uv.y));\n    #ifdef ALPHA_CUTOFF\n        if( baseColor.a < u_alphaCutoff ) {\n            discard;\n        }\n    #endif\n       \n       gl_FragColor = baseColor;\n    }\n    ");
+  oasisEngine.Shader.create("uv-mapping-base", "\n    attribute vec4 POSITION;\n    attribute vec2 TEXCOORD_0;\n\n    varying vec2 uv;\n                \n    void main() {\n      uv = TEXCOORD_0;\n      gl_Position = vec4( POSITION.xzy , 1.0);\n      gl_Position.y *= -1.0;\n    }\n    ", "\n    uniform float u_alphaCutoff;\n    uniform sampler2D originalTex;\n    varying vec2 uv;\n\n    void main() {\n       gl_FragColor = texture(originalTex, vec2(uv.x, 1.0-uv.y));\n    }\n    ");
+  var UVMapping = /*#__PURE__*/function (_Component) {
+    _inheritsLoose(UVMapping, _Component);
+
+    function UVMapping(entity) {
+      var _this;
+
+      _this = _Component.call(this, entity) || this;
+      _this._originalMtl = void 0;
+      _this._coverMtl = void 0;
+      _this._colorTexture = void 0;
+      _this._uvCamera = void 0;
+      _this._beard = null;
+      _this.entity.layer = oasisEngine.Layer.Layer10;
+
+      var camera = _this.entity.addComponent(oasisEngine.Camera);
+
+      camera.enableFrustumCulling = false;
+      camera.cullingMask = oasisEngine.Layer.Layer10;
+      _this._uvCamera = camera;
+      var plane = oasisEngine.PrimitiveMesh.createPlane(_this.engine, 2, 2);
+
+      var originalRenderer = _this.entity.addComponent(oasisEngine.MeshRenderer);
+
+      originalRenderer.mesh = plane;
+      _this._originalMtl = _this._createOriginalMaterial();
+      originalRenderer.setMaterial(_this._originalMtl);
+
+      var coverRenderer = _this.entity.addComponent(oasisEngine.MeshRenderer);
+
+      coverRenderer.mesh = plane;
+      _this._coverMtl = _this._createCoverMaterial();
+      coverRenderer.setMaterial(_this._coverMtl);
+      return _this;
+    }
+
+    var _proto = UVMapping.prototype;
+
+    _proto._createCoverMaterial = function _createCoverMaterial() {
+      var material = new oasisEngine.BaseMaterial(this._engine, oasisEngine.Shader.find("uv-mapping-cover"));
+      material.renderFace = oasisEngine.RenderFace.Double;
+      material.isTransparent = true;
+      return material;
+    };
+
+    _proto._createOriginalMaterial = function _createOriginalMaterial() {
+      return new oasisEngine.BaseMaterial(this._engine, oasisEngine.Shader.find("uv-mapping-base"));
+    };
+
+    _createClass(UVMapping, [{
+      key: "coverTexture",
+      set: function set(texture) {
+        if (this._beard !== texture) {
+          this._beard = texture;
+
+          this._coverMtl.shaderData.setTexture("coverTex", texture);
+
+          this.entity.isActive = true;
+
+          this._uvCamera.render();
+
+          this.entity.isActive = false;
+        }
+      }
+    }, {
+      key: "originalTexture",
+      set: function set(texture) {
+        this._originalMtl.shaderData.setTexture("originalTex", texture);
+
+        this._colorTexture = new oasisEngine.Texture2D(this.engine, texture.width, texture.height, texture.format, false);
+        this._uvCamera.renderTarget = new oasisEngine.RenderTarget(this.engine, texture.width, texture.height, this._colorTexture, null);
+      }
+    }, {
+      key: "colorTexture",
+      get: function get() {
+        return this._colorTexture;
+      }
+    }]);
+
+    return UVMapping;
+  }(oasisEngine.Component);
+
   var ArkComponent = /*#__PURE__*/function (_Component) {
     _inheritsLoose(ArkComponent, _Component);
 
-    function ArkComponent() {
+    function ArkComponent(entity) {
       var _this;
 
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      _this = _Component.call.apply(_Component, [this].concat(args)) || this;
+      _this = _Component.call(this, entity) || this;
       _this.group = "";
@@ -96,5 +175,8 @@ _this.subGroup = "";
       _this._actionUrl = void 0;
+      _this._animationUrl = void 0;
       _this._hairUrl = void 0;
       _this._eyeUrl = void 0;
       _this._eyebrowUrl = void 0;
+      _this._beardUrl = void 0;
+      _this._clothUrl = void 0;
       _this._modelEntity = void 0;
@@ -104,2 +186,6 @@ _this._hairEntity = void 0;
       _this._eyebrowEntity = void 0;
+      _this._faceMaterial = void 0;
+      _this._bodyMaterial = void 0;
+      _this._clothEntity = void 0;
+      _this._uvMapping = void 0;
       _this._animator = void 0;
@@ -109,11 +195,69 @@ _this._animationClips = void 0;
       _this._blendShapeNameMap = void 0;
+      var mapping = entity.createChild("uvMapping");
+      _this._uvMapping = mapping.addComponent(UVMapping);
+      mapping.isActive = false;
       return _this;
     }
+    /**
+     * Edit blendShape by name.
+     * @param blendShapeName - the name of the blendShape.
+     * @param value - The value of blendShape want to set.
+     */
 
+
     var _proto = ArkComponent.prototype;
 
+    _proto.editBlendShape = function editBlendShape(blendShapeName, value) {
+      var info = this._blendShapeNameMap[blendShapeName];
+
+      if (info) {
+        var rendererIndex = info.rendererIndex,
+            weightIndex = info.weightIndex;
+        this._blendShapeWeights[rendererIndex][weightIndex] = value;
+      } else {
+        oasisEngine.Logger.warn("no blendShape: " + blendShapeName + " in current model");
+      }
+    }
     /**
+     * Get blendShape value by name.
+     * @param blendShapeName - the name of the blendShape.
+     * @returns The blendShape value.
+     */
+    ;
+
+    _proto.getBlendShapeValue = function getBlendShapeValue(blendShapeName) {
+      var info = this._blendShapeNameMap[blendShapeName];
+
+      if (info) {
+        var rendererIndex = info.rendererIndex,
+            weightIndex = info.weightIndex;
+        return this._blendShapeWeights[rendererIndex][weightIndex];
+      }
+
+      return 0;
+    }
+    /**
+     * Replace face and body color.
+     * @param roughness - roughness.
+     * @param baseColor - base Color.
+     * @param emissiveColor - emissive Color .
+     */
+    ;
+
+    _proto.replaceSkinColor = function replaceSkinColor(roughness, baseColor, emissiveColor) {
+      var material = this._faceMaterial;
+      material.roughness = roughness;
+      material.baseColor = baseColor;
+      material.emissiveColor = emissiveColor;
+      material = this._bodyMaterial;
+      material.roughness = roughness;
+      material.baseColor = baseColor;
+      material.emissiveColor = emissiveColor;
+    }
+    /**
      * Replace 3D Model by glTF url.
      * @param url - The url of 3D glTF file.
      */
+    ;
+
     _proto.replaceModel =
@@ -150,11 +294,11 @@ /*#__PURE__*/
     /**
-     * Replace hair by glTF url.
-     * @param url - The url of glTF file.
+     * Replace 3D beard by texture url.
+     * @param url - The url of texture file.
      */
     ;
 
-    _proto.replaceHair =
+    _proto.replaceBeard =
     /*#__PURE__*/
     function () {
-      var _replaceHair = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3(url) {
+      var _replaceBeard = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3(url) {
         var _this2 = this;
@@ -172,3 +316,2 @@
                 return _context3.abrupt("return", this._setModelPromise.then( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
-                  var hairEntity;
                   return regeneratorRuntime.wrap(function _callee2$(_context2) {
@@ -179,10 +322,12 @@ while (1) {
                           _context2.next = 2;
-                          return _this2._addComponent(url);
+                          return _this2.engine.resourceManager.load({
+                            type: oasisEngine.AssetType.Texture2D,
+                            url: url
+                          });
 
                         case 2:
-                          hairEntity = _context2.sent;
-                          _this2._hairEntity && _this2._hairEntity.destroy();
-                          _this2._hairEntity = hairEntity;
+                          _this2._uvMapping.coverTexture = _context2.sent;
+                          _this2._faceMaterial.baseTexture = _this2._uvMapping.colorTexture;
 
-                        case 5:
+                        case 4:
                         case "end":
@@ -203,10 +348,10 @@ return _context2.stop();
 
-      function replaceHair(_x2) {
-        return _replaceHair.apply(this, arguments);
+      function replaceBeard(_x2) {
+        return _replaceBeard.apply(this, arguments);
       }
 
-      return replaceHair;
+      return replaceBeard;
     }()
     /**
-     * Replace eye by glTF url.
+     * Replace hair by glTF url.
      * @param url - The url of glTF file.
@@ -216,6 +361,6 @@ */
 
-    _proto.replaceEye =
+    _proto.replaceHair =
     /*#__PURE__*/
     function () {
-      var _replaceEye = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5(url) {
+      var _replaceHair = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5(url) {
         var _this3 = this;
@@ -233,3 +378,3 @@
                 return _context5.abrupt("return", this._setModelPromise.then( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4() {
-                  var eyeEntity;
+                  var hairEntity, hairSkin;
                   return regeneratorRuntime.wrap(function _callee4$(_context4) {
@@ -243,7 +388,11 @@ while (1) {
                         case 2:
-                          eyeEntity = _context4.sent;
-                          _this3._eyeEntity && _this3._eyeEntity.destroy();
-                          _this3._eyeEntity = eyeEntity;
+                          hairEntity = _context4.sent;
+                          hairSkin = hairEntity.findByName("hair");
 
-                        case 5:
+                          _this3._modelEntity.addChild(hairSkin);
+
+                          _this3._hairEntity && _this3._hairEntity.destroy();
+                          _this3._hairEntity = hairSkin;
+
+                        case 7:
                         case "end":
@@ -264,10 +413,10 @@ return _context4.stop();
 
-      function replaceEye(_x3) {
-        return _replaceEye.apply(this, arguments);
+      function replaceHair(_x3) {
+        return _replaceHair.apply(this, arguments);
       }
 
-      return replaceEye;
+      return replaceHair;
     }()
     /**
-     * Replace eyebrow by glTF url.
+     * Replace eye by glTF url.
      * @param url - The url of glTF file.
@@ -277,6 +426,6 @@ */
 
-    _proto.replaceEyebrow =
+    _proto.replaceEye =
     /*#__PURE__*/
     function () {
-      var _replaceEyebrow = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee7(url) {
+      var _replaceEye = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee7(url) {
         var _this4 = this;
@@ -294,3 +443,3 @@
                 return _context7.abrupt("return", this._setModelPromise.then( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee6() {
-                  var eyebrowEntity;
+                  var eyeEntity, eyeSkin;
                   return regeneratorRuntime.wrap(function _callee6$(_context6) {
@@ -304,7 +453,11 @@ while (1) {
                         case 2:
-                          eyebrowEntity = _context6.sent;
-                          _this4._eyebrowEntity && _this4._eyebrowEntity.destroy();
-                          _this4._eyebrowEntity = eyebrowEntity;
+                          eyeEntity = _context6.sent;
+                          eyeSkin = eyeEntity.findByName("eyes");
 
-                        case 5:
+                          _this4._modelEntity.addChild(eyeSkin);
+
+                          _this4._eyeEntity && _this4._eyeEntity.destroy();
+                          _this4._eyeEntity = eyeSkin;
+
+                        case 7:
                         case "end":
@@ -325,3 +478,64 @@ return _context6.stop();
 
-      function replaceEyebrow(_x4) {
+      function replaceEye(_x4) {
+        return _replaceEye.apply(this, arguments);
+      }
+
+      return replaceEye;
+    }()
+    /**
+     * Replace eyebrow by glTF url.
+     * @param url - The url of glTF file.
+     */
+    ;
+
+    _proto.replaceEyebrow =
+    /*#__PURE__*/
+    function () {
+      var _replaceEyebrow = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee9(url) {
+        var _this5 = this;
+
+        return regeneratorRuntime.wrap(function _callee9$(_context9) {
+          while (1) {
+            switch (_context9.prev = _context9.next) {
+              case 0:
+                if (!(url && this._setModelPromise)) {
+                  _context9.next = 2;
+                  break;
+                }
+
+                return _context9.abrupt("return", this._setModelPromise.then( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee8() {
+                  var eyebrowEntity, eyebrowSkin;
+                  return regeneratorRuntime.wrap(function _callee8$(_context8) {
+                    while (1) {
+                      switch (_context8.prev = _context8.next) {
+                        case 0:
+                          _context8.next = 2;
+                          return _this5._addComponent(url);
+
+                        case 2:
+                          eyebrowEntity = _context8.sent;
+                          eyebrowSkin = eyebrowEntity.findByName("eyebrows");
+
+                          _this5._modelEntity.addChild(eyebrowSkin);
+
+                          _this5._eyebrowEntity && _this5._eyebrowEntity.destroy();
+                          _this5._eyebrowEntity = eyebrowSkin;
+
+                        case 7:
+                        case "end":
+                          return _context8.stop();
+                      }
+                    }
+                  }, _callee8);
+                }))));
+
+              case 2:
+              case "end":
+                return _context9.stop();
+            }
+          }
+        }, _callee9, this);
+      }));
+
+      function replaceEyebrow(_x5) {
         return _replaceEyebrow.apply(this, arguments);
@@ -333,2 +547,79 @@ }
     /**
+     * Replace cloth by glTF url.
+     * @param url - The url of glTF file.
+     */
+    ;
+
+    _proto.replaceCloth =
+    /*#__PURE__*/
+    function () {
+      var _replaceCloth = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee11(url) {
+        var _this6 = this;
+
+        return regeneratorRuntime.wrap(function _callee11$(_context11) {
+          while (1) {
+            switch (_context11.prev = _context11.next) {
+              case 0:
+                if (!(url && this._setModelPromise)) {
+                  _context11.next = 2;
+                  break;
+                }
+
+                return _context11.abrupt("return", this._setModelPromise.then( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee10() {
+                  var res, defaultSceneRoot, materials, clothEntity, clothSkin, i, n, material;
+                  return regeneratorRuntime.wrap(function _callee10$(_context10) {
+                    while (1) {
+                      switch (_context10.prev = _context10.next) {
+                        case 0:
+                          _context10.next = 2;
+                          return _this6.engine.resourceManager.load({
+                            type: oasisEngine.AssetType.Prefab,
+                            url: url
+                          });
+
+                        case 2:
+                          res = _context10.sent;
+                          defaultSceneRoot = res.defaultSceneRoot, materials = res.materials;
+                          clothEntity = defaultSceneRoot.clone();
+                          clothSkin = clothEntity.findByName("cloth");
+
+                          _this6._modelEntity.addChild(clothSkin);
+
+                          _this6._clothEntity && _this6._clothEntity.destroy();
+                          _this6._clothEntity = clothSkin;
+
+                          for (i = 0, n = materials.length; i < n; i++) {
+                            material = materials[i];
+
+                            if (material.name == "body") {
+                              material.baseColor = _this6._bodyMaterial.baseColor;
+                              material.emissiveColor = _this6._bodyMaterial.emissiveColor;
+                              material.roughness = _this6._bodyMaterial.roughness;
+                              _this6._bodyMaterial = material;
+                            }
+                          }
+
+                        case 10:
+                        case "end":
+                          return _context10.stop();
+                      }
+                    }
+                  }, _callee10);
+                }))));
+
+              case 2:
+              case "end":
+                return _context11.stop();
+            }
+          }
+        }, _callee11, this);
+      }));
+
+      function replaceCloth(_x6) {
+        return _replaceCloth.apply(this, arguments);
+      }
+
+      return replaceCloth;
+    }()
+    /**
      * Replace action by glTF url which includes action information.
@@ -342,11 +633,11 @@ * @param url - The url of action glTF file.
     function () {
-      var _replaceAction = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee8(url) {
-        var _this5 = this;
+      var _replaceAction = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee12(url) {
+        var _this7 = this;
 
         var res, defaultSceneRoot, mainMeshRenderer, replaceMeshRenderer;
-        return regeneratorRuntime.wrap(function _callee8$(_context8) {
+        return regeneratorRuntime.wrap(function _callee12$(_context12) {
           while (1) {
-            switch (_context8.prev = _context8.next) {
+            switch (_context12.prev = _context12.next) {
               case 0:
-                _context8.next = 2;
+                _context12.next = 2;
                 return this.engine.resourceManager.load({
@@ -358,3 +649,3 @@ type: oasisEngine.AssetType.Prefab,
               case 2:
-                res = _context8.sent;
+                res = _context12.sent;
                 defaultSceneRoot = res.defaultSceneRoot;
@@ -379,3 +670,3 @@ mainMeshRenderer = [];
 
-                        var entity = _this5._modelEntity.findByName(joint.name);
+                        var entity = _this7._modelEntity.findByName(joint.name);
 
@@ -393,9 +684,9 @@ entity && (entity.transform.localMatrix = joint.transform.localMatrix);
               case "end":
-                return _context8.stop();
+                return _context12.stop();
             }
           }
-        }, _callee8, this);
+        }, _callee12, this);
       }));
 
-      function replaceAction(_x5) {
+      function replaceAction(_x7) {
         return _replaceAction.apply(this, arguments);
@@ -407,37 +698,57 @@ }
     /**
-     * Edit blendShape by name.
-     * @param blendShapeName - the name of the blendShape.
-     * @param value - The value of blendShape want to set.
+     * Replace animation by glTF url which includes animation information.
+     * @param url - The url of animation glTF file.
      */
     ;
 
-    _proto.editBlendShape = function editBlendShape(blendShapeName, value) {
-      var info = this._blendShapeNameMap[blendShapeName];
+    _proto.replaceAnimation =
+    /*#__PURE__*/
+    function () {
+      var _replaceAnimation = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee13(url) {
+        var res, animations, animator, animatorController, layer, animatorStateMachine;
+        return regeneratorRuntime.wrap(function _callee13$(_context13) {
+          while (1) {
+            switch (_context13.prev = _context13.next) {
+              case 0:
+                _context13.next = 2;
+                return this.engine.resourceManager.load({
+                  type: oasisEngine.AssetType.Prefab,
+                  url: url
+                });
 
-      if (info) {
-        var rendererIndex = info.rendererIndex,
-            weightIndex = info.weightIndex;
-        this._blendShapeWeights[rendererIndex][weightIndex] = value;
-      } else {
-        oasisEngine.Logger.warn("no blendShape: " + blendShapeName + " in current model");
-      }
-    }
-    /**
-     * Get blendShape value by name.
-     * @param blendShapeName - the name of the blendShape.
-     * @returns The blendShape value.
-     */
-    ;
+              case 2:
+                res = _context13.sent;
+                animations = res.animations;
+                animator = this._animator;
+                animatorController = new oasisEngine.AnimatorController();
+                layer = new oasisEngine.AnimatorControllerLayer("layer");
+                animatorStateMachine = new oasisEngine.AnimatorStateMachine();
+                animatorController.addLayer(layer);
+                animator.animatorController = animatorController;
+                layer.stateMachine = animatorStateMachine;
+                this._animationClips = animations;
 
-    _proto.getBlendShapeValue = function getBlendShapeValue(blendShapeName) {
-      var info = this._blendShapeNameMap[blendShapeName];
+                if (animations) {
+                  animations.forEach(function (clip) {
+                    var animatorState = animatorStateMachine.addState(clip.name);
+                    animatorState.clip = clip;
+                  });
+                }
 
-      if (info) {
-        var rendererIndex = info.rendererIndex,
-            weightIndex = info.weightIndex;
-        return this._blendShapeWeights[rendererIndex][weightIndex];
+                animator.play("Bip001|Take 001|BaseLayer");
+
+              case 14:
+              case "end":
+                return _context13.stop();
+            }
+          }
+        }, _callee13, this);
+      }));
+
+      function replaceAnimation(_x8) {
+        return _replaceAnimation.apply(this, arguments);
       }
 
-      return 0;
-    }
+      return replaceAnimation;
+    }()
     /**
@@ -453,4 +764,4 @@ * Get time duration of animation clip by name.
 
-      return (_this$_animationClips = this._animationClips) === null || _this$_animationClips === void 0 ? void 0 : (_this$_animationClips2 = _this$_animationClips.find(function (_ref4) {
-        var name = _ref4.name;
+      return (_this$_animationClips = this._animationClips) === null || _this$_animationClips === void 0 ? void 0 : (_this$_animationClips2 = _this$_animationClips.find(function (_ref6) {
+        var name = _ref6.name;
         return name === clipName;
@@ -469,9 +780,9 @@ })) === null || _this$_animationClips2 === void 0 ? void 0 : _this$_animationClips2.length;
     _proto._replaceModel = /*#__PURE__*/function () {
-      var _replaceModel3 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee9(modelUrl) {
-        var res, defaultSceneRoot, animations, clone, animator, renderers, rendererIndex, rendererLength, renderer, blendShapeWeights, mesh, weightIndex, weightLength, bsName;
-        return regeneratorRuntime.wrap(function _callee9$(_context9) {
+      var _replaceModel3 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee14(modelUrl) {
+        var res, defaultSceneRoot, animations, clone, i, n, material, renderers, rendererIndex, rendererLength, renderer, blendShapeWeights, mesh, weightIndex, weightLength, bsName;
+        return regeneratorRuntime.wrap(function _callee14$(_context14) {
           while (1) {
-            switch (_context9.prev = _context9.next) {
+            switch (_context14.prev = _context14.next) {
               case 0:
-                _context9.next = 2;
+                _context14.next = 2;
                 return this.engine.resourceManager.load({
@@ -483,3 +794,3 @@ type: oasisEngine.AssetType.Prefab,
               case 2:
-                res = _context9.sent;
+                res = _context14.sent;
 
@@ -491,6 +802,28 @@ this._destroyLastGLTF();
                 this.entity.addChild(clone);
-                this._modelEntity = clone; // animation
+                this._modelEntity = clone;
 
-                animator = clone.getComponent(oasisEngine.Animator);
-                this._animator = animator;
+                for (i = 0, n = res.materials.length; i < n; i++) {
+                  material = res.materials[i];
+
+                  if (material.name == "head") {
+                    this._faceMaterial = material;
+                  }
+
+                  if (material.name == "body") {
+                    this._bodyMaterial = material;
+                  }
+                } // replace texture
+
+
+                if (this._faceMaterial) {
+                  this._uvMapping.originalTexture = this._faceMaterial.baseTexture;
+                } // animation
+
+
+                this._animator = this._modelEntity.getComponent(oasisEngine.Animator);
+
+                if (this._animator == null) {
+                  this._animator = this._modelEntity.addComponent(oasisEngine.Animator);
+                }
+
                 this._animationClips = animations; // blendShape
@@ -514,3 +847,3 @@
                     for (weightIndex = 0, weightLength = blendShapeWeights.length; weightIndex < weightLength; weightIndex++) {
-                      bsName = mesh.getBlendShapeName(weightIndex);
+                      bsName = mesh.getBlendShapeName ? mesh.getBlendShapeName(weightIndex) : weightIndex + "";
 
@@ -530,15 +863,16 @@ if (!this._blendShapeNameMap) {
 
-                this._hairEntity = this._modelEntity.findByName("HumanNormal_Head_Hair_00");
-                this._eyeEntity = this._modelEntity.findByName("HumanNormal_Head_Eyes_00");
-                this._eyebrowEntity = this._modelEntity.findByName("HumanNormal_Head_Eyebrow_00");
+                this._hairEntity = this._modelEntity.findByName("hair");
+                this._eyeEntity = this._modelEntity.findByName("Eyes");
+                this._eyebrowEntity = this._modelEntity.findByName("Eyebrow");
+                this._clothEntity = this._modelEntity.findByName("cloth");
 
-              case 17:
+              case 20:
               case "end":
-                return _context9.stop();
+                return _context14.stop();
             }
           }
-        }, _callee9, this);
+        }, _callee14, this);
       }));
 
-      function _replaceModel(_x6) {
+      function _replaceModel(_x9) {
         return _replaceModel3.apply(this, arguments);
@@ -551,9 +885,9 @@ }
     _proto._addComponent = /*#__PURE__*/function () {
-      var _addComponent2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee10(url) {
-        var res, defaultSceneRoot, clone, slotEntity;
-        return regeneratorRuntime.wrap(function _callee10$(_context10) {
+      var _addComponent2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee15(url) {
+        var res, defaultSceneRoot;
+        return regeneratorRuntime.wrap(function _callee15$(_context15) {
           while (1) {
-            switch (_context10.prev = _context10.next) {
+            switch (_context15.prev = _context15.next) {
               case 0:
-                _context10.next = 2;
+                _context15.next = 2;
                 return this.engine.resourceManager.load({
@@ -565,18 +899,15 @@ type: oasisEngine.AssetType.Prefab,
               case 2:
-                res = _context10.sent;
+                res = _context15.sent;
                 defaultSceneRoot = res.defaultSceneRoot;
-                clone = defaultSceneRoot.clone();
-                slotEntity = this._modelEntity.findByName("man_Head");
-                slotEntity && slotEntity.addChild(clone);
-                return _context10.abrupt("return", clone);
+                return _context15.abrupt("return", defaultSceneRoot.clone());
 
-              case 8:
+              case 5:
               case "end":
-                return _context10.stop();
+                return _context15.stop();
             }
           }
-        }, _callee10, this);
+        }, _callee15, this);
       }));
 
-      function _addComponent(_x7) {
+      function _addComponent(_x10) {
         return _addComponent2.apply(this, arguments);
@@ -602,3 +933,10 @@ }
       key: "eyeUrl",
-      get:
+      get: // 一级类目
+      // 二级类目
+      // 具体资产
+      // schema
+      // replaced entity
+      // replace texture
+      // ark api for npm
+
       /**
@@ -633,2 +971,20 @@ * ------------- begin: editor config -------------
     }, {
+      key: "beardUrl",
+      get: function get() {
+        return this._beardUrl;
+      },
+      set: function set(url) {
+        this._beardUrl = url;
+        this.replaceBeard(url);
+      }
+    }, {
+      key: "clothUrl",
+      get: function get() {
+        return this._clothUrl;
+      },
+      set: function set(url) {
+        this._clothUrl = url;
+        this.replaceCloth(url);
+      }
+    }, {
       key: "modelUrl",
@@ -648,3 +1004,3 @@ get: function get() {
       set: function set(url) {
-        var _this6 = this;
+        var _this8 = this;
 
@@ -655,6 +1011,22 @@ this._actionUrl = url;
           this._setModelPromise.then(function () {
-            _this6.replaceAction(url);
+            _this8.replaceAction(url);
           });
         }
       }
+    }, {
+      key: "animationUrl",
+      get: function get() {
+        return this._animationUrl;
+      },
+      set: function set(url) {
+        var _this9 = this;
+
+        this._animationUrl = url;
+
+        if (url && this._setModelPromise) {
+          this._setModelPromise.then(function () {
+            _this9.replaceAnimation(url);
+          });
+        }
+      }
       /**
@@ -661,0 +1033,0 @@ * ------------- end: editor config -------------

dist/index.module.js

@@ -1,2 +0,2 @@
-import { Parser, Logger, Component, MeshRenderer, SkinnedMeshRenderer, AssetType, Animator } from 'oasis-engine';
+import { Shader, Layer, Camera, PrimitiveMesh, MeshRenderer, BaseMaterial, RenderFace, Texture2D, RenderTarget, Component, Parser, Logger, AssetType, SkinnedMeshRenderer, AnimatorController, AnimatorControllerLayer, AnimatorStateMachine, Animator } from 'oasis-engine';
 
@@ -74,13 +74,92 @@ function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
 
+Shader.create("uv-mapping-cover", "\n    attribute vec4 POSITION;\n    attribute vec2 TEXCOORD_0;\n\n    varying vec2 uv;\n                \n    void main() {\n      uv = TEXCOORD_0;\n      gl_Position = vec4( POSITION.xzy , 1.0);\n      gl_Position.y *= -1.0;\n      \n      gl_Position.x = gl_Position.x * 0.5;\n      gl_Position.y = gl_Position.y * 0.5 - 0.25;\n    }\n    ", "\n    uniform float u_alphaCutoff;\n    uniform sampler2D coverTex;\n    varying vec2 uv;\n\n    void main() {\n       vec4 baseColor = texture2D(coverTex, vec2(uv.x, 1.0-uv.y));\n    #ifdef ALPHA_CUTOFF\n        if( baseColor.a < u_alphaCutoff ) {\n            discard;\n        }\n    #endif\n       \n       gl_FragColor = baseColor;\n    }\n    ");
+Shader.create("uv-mapping-base", "\n    attribute vec4 POSITION;\n    attribute vec2 TEXCOORD_0;\n\n    varying vec2 uv;\n                \n    void main() {\n      uv = TEXCOORD_0;\n      gl_Position = vec4( POSITION.xzy , 1.0);\n      gl_Position.y *= -1.0;\n    }\n    ", "\n    uniform float u_alphaCutoff;\n    uniform sampler2D originalTex;\n    varying vec2 uv;\n\n    void main() {\n       gl_FragColor = texture(originalTex, vec2(uv.x, 1.0-uv.y));\n    }\n    ");
+var UVMapping = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(UVMapping, _Component);
+
+  function UVMapping(entity) {
+    var _this;
+
+    _this = _Component.call(this, entity) || this;
+    _this._originalMtl = void 0;
+    _this._coverMtl = void 0;
+    _this._colorTexture = void 0;
+    _this._uvCamera = void 0;
+    _this._beard = null;
+    _this.entity.layer = Layer.Layer10;
+
+    var camera = _this.entity.addComponent(Camera);
+
+    camera.enableFrustumCulling = false;
+    camera.cullingMask = Layer.Layer10;
+    _this._uvCamera = camera;
+    var plane = PrimitiveMesh.createPlane(_this.engine, 2, 2);
+
+    var originalRenderer = _this.entity.addComponent(MeshRenderer);
+
+    originalRenderer.mesh = plane;
+    _this._originalMtl = _this._createOriginalMaterial();
+    originalRenderer.setMaterial(_this._originalMtl);
+
+    var coverRenderer = _this.entity.addComponent(MeshRenderer);
+
+    coverRenderer.mesh = plane;
+    _this._coverMtl = _this._createCoverMaterial();
+    coverRenderer.setMaterial(_this._coverMtl);
+    return _this;
+  }
+
+  var _proto = UVMapping.prototype;
+
+  _proto._createCoverMaterial = function _createCoverMaterial() {
+    var material = new BaseMaterial(this._engine, Shader.find("uv-mapping-cover"));
+    material.renderFace = RenderFace.Double;
+    material.isTransparent = true;
+    return material;
+  };
+
+  _proto._createOriginalMaterial = function _createOriginalMaterial() {
+    return new BaseMaterial(this._engine, Shader.find("uv-mapping-base"));
+  };
+
+  _createClass(UVMapping, [{
+    key: "coverTexture",
+    set: function set(texture) {
+      if (this._beard !== texture) {
+        this._beard = texture;
+
+        this._coverMtl.shaderData.setTexture("coverTex", texture);
+
+        this.entity.isActive = true;
+
+        this._uvCamera.render();
+
+        this.entity.isActive = false;
+      }
+    }
+  }, {
+    key: "originalTexture",
+    set: function set(texture) {
+      this._originalMtl.shaderData.setTexture("originalTex", texture);
+
+      this._colorTexture = new Texture2D(this.engine, texture.width, texture.height, texture.format, false);
+      this._uvCamera.renderTarget = new RenderTarget(this.engine, texture.width, texture.height, this._colorTexture, null);
+    }
+  }, {
+    key: "colorTexture",
+    get: function get() {
+      return this._colorTexture;
+    }
+  }]);
+
+  return UVMapping;
+}(Component);
+
 var ArkComponent = /*#__PURE__*/function (_Component) {
   _inheritsLoose(ArkComponent, _Component);
 
-  function ArkComponent() {
+  function ArkComponent(entity) {
     var _this;
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _Component.call.apply(_Component, [this].concat(args)) || this;
+    _this = _Component.call(this, entity) || this;
     _this.group = "";
@@ -92,5 +171,8 @@ _this.subGroup = "";
     _this._actionUrl = void 0;
+    _this._animationUrl = void 0;
     _this._hairUrl = void 0;
     _this._eyeUrl = void 0;
     _this._eyebrowUrl = void 0;
+    _this._beardUrl = void 0;
+    _this._clothUrl = void 0;
     _this._modelEntity = void 0;
@@ -100,2 +182,6 @@ _this._hairEntity = void 0;
     _this._eyebrowEntity = void 0;
+    _this._faceMaterial = void 0;
+    _this._bodyMaterial = void 0;
+    _this._clothEntity = void 0;
+    _this._uvMapping = void 0;
     _this._animator = void 0;
@@ -105,11 +191,69 @@ _this._animationClips = void 0;
     _this._blendShapeNameMap = void 0;
+    var mapping = entity.createChild("uvMapping");
+    _this._uvMapping = mapping.addComponent(UVMapping);
+    mapping.isActive = false;
     return _this;
   }
+  /**
+   * Edit blendShape by name.
+   * @param blendShapeName - the name of the blendShape.
+   * @param value - The value of blendShape want to set.
+   */
 
+
   var _proto = ArkComponent.prototype;
 
+  _proto.editBlendShape = function editBlendShape(blendShapeName, value) {
+    var info = this._blendShapeNameMap[blendShapeName];
+
+    if (info) {
+      var rendererIndex = info.rendererIndex,
+          weightIndex = info.weightIndex;
+      this._blendShapeWeights[rendererIndex][weightIndex] = value;
+    } else {
+      Logger.warn("no blendShape: " + blendShapeName + " in current model");
+    }
+  }
   /**
+   * Get blendShape value by name.
+   * @param blendShapeName - the name of the blendShape.
+   * @returns The blendShape value.
+   */
+  ;
+
+  _proto.getBlendShapeValue = function getBlendShapeValue(blendShapeName) {
+    var info = this._blendShapeNameMap[blendShapeName];
+
+    if (info) {
+      var rendererIndex = info.rendererIndex,
+          weightIndex = info.weightIndex;
+      return this._blendShapeWeights[rendererIndex][weightIndex];
+    }
+
+    return 0;
+  }
+  /**
+   * Replace face and body color.
+   * @param roughness - roughness.
+   * @param baseColor - base Color.
+   * @param emissiveColor - emissive Color .
+   */
+  ;
+
+  _proto.replaceSkinColor = function replaceSkinColor(roughness, baseColor, emissiveColor) {
+    var material = this._faceMaterial;
+    material.roughness = roughness;
+    material.baseColor = baseColor;
+    material.emissiveColor = emissiveColor;
+    material = this._bodyMaterial;
+    material.roughness = roughness;
+    material.baseColor = baseColor;
+    material.emissiveColor = emissiveColor;
+  }
+  /**
    * Replace 3D Model by glTF url.
    * @param url - The url of 3D glTF file.
    */
+  ;
+
   _proto.replaceModel =
@@ -146,11 +290,11 @@ /*#__PURE__*/
   /**
-   * Replace hair by glTF url.
-   * @param url - The url of glTF file.
+   * Replace 3D beard by texture url.
+   * @param url - The url of texture file.
    */
   ;
 
-  _proto.replaceHair =
+  _proto.replaceBeard =
   /*#__PURE__*/
   function () {
-    var _replaceHair = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3(url) {
+    var _replaceBeard = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3(url) {
       var _this2 = this;
@@ -168,3 +312,2 @@
               return _context3.abrupt("return", this._setModelPromise.then( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
-                var hairEntity;
                 return regeneratorRuntime.wrap(function _callee2$(_context2) {
@@ -175,10 +318,12 @@ while (1) {
                         _context2.next = 2;
-                        return _this2._addComponent(url);
+                        return _this2.engine.resourceManager.load({
+                          type: AssetType.Texture2D,
+                          url: url
+                        });
 
                       case 2:
-                        hairEntity = _context2.sent;
-                        _this2._hairEntity && _this2._hairEntity.destroy();
-                        _this2._hairEntity = hairEntity;
+                        _this2._uvMapping.coverTexture = _context2.sent;
+                        _this2._faceMaterial.baseTexture = _this2._uvMapping.colorTexture;
 
-                      case 5:
+                      case 4:
                       case "end":
@@ -199,10 +344,10 @@ return _context2.stop();
 
-    function replaceHair(_x2) {
-      return _replaceHair.apply(this, arguments);
+    function replaceBeard(_x2) {
+      return _replaceBeard.apply(this, arguments);
     }
 
-    return replaceHair;
+    return replaceBeard;
   }()
   /**
-   * Replace eye by glTF url.
+   * Replace hair by glTF url.
    * @param url - The url of glTF file.
@@ -212,6 +357,6 @@ */
 
-  _proto.replaceEye =
+  _proto.replaceHair =
   /*#__PURE__*/
   function () {
-    var _replaceEye = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5(url) {
+    var _replaceHair = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5(url) {
       var _this3 = this;
@@ -229,3 +374,3 @@
               return _context5.abrupt("return", this._setModelPromise.then( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4() {
-                var eyeEntity;
+                var hairEntity, hairSkin;
                 return regeneratorRuntime.wrap(function _callee4$(_context4) {
@@ -239,7 +384,11 @@ while (1) {
                       case 2:
-                        eyeEntity = _context4.sent;
-                        _this3._eyeEntity && _this3._eyeEntity.destroy();
-                        _this3._eyeEntity = eyeEntity;
+                        hairEntity = _context4.sent;
+                        hairSkin = hairEntity.findByName("hair");
 
-                      case 5:
+                        _this3._modelEntity.addChild(hairSkin);
+
+                        _this3._hairEntity && _this3._hairEntity.destroy();
+                        _this3._hairEntity = hairSkin;
+
+                      case 7:
                       case "end":
@@ -260,10 +409,10 @@ return _context4.stop();
 
-    function replaceEye(_x3) {
-      return _replaceEye.apply(this, arguments);
+    function replaceHair(_x3) {
+      return _replaceHair.apply(this, arguments);
     }
 
-    return replaceEye;
+    return replaceHair;
   }()
   /**
-   * Replace eyebrow by glTF url.
+   * Replace eye by glTF url.
    * @param url - The url of glTF file.
@@ -273,6 +422,6 @@ */
 
-  _proto.replaceEyebrow =
+  _proto.replaceEye =
   /*#__PURE__*/
   function () {
-    var _replaceEyebrow = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee7(url) {
+    var _replaceEye = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee7(url) {
       var _this4 = this;
@@ -290,3 +439,3 @@
               return _context7.abrupt("return", this._setModelPromise.then( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee6() {
-                var eyebrowEntity;
+                var eyeEntity, eyeSkin;
                 return regeneratorRuntime.wrap(function _callee6$(_context6) {
@@ -300,7 +449,11 @@ while (1) {
                       case 2:
-                        eyebrowEntity = _context6.sent;
-                        _this4._eyebrowEntity && _this4._eyebrowEntity.destroy();
-                        _this4._eyebrowEntity = eyebrowEntity;
+                        eyeEntity = _context6.sent;
+                        eyeSkin = eyeEntity.findByName("eyes");
 
-                      case 5:
+                        _this4._modelEntity.addChild(eyeSkin);
+
+                        _this4._eyeEntity && _this4._eyeEntity.destroy();
+                        _this4._eyeEntity = eyeSkin;
+
+                      case 7:
                       case "end":
@@ -321,3 +474,64 @@ return _context6.stop();
 
-    function replaceEyebrow(_x4) {
+    function replaceEye(_x4) {
+      return _replaceEye.apply(this, arguments);
+    }
+
+    return replaceEye;
+  }()
+  /**
+   * Replace eyebrow by glTF url.
+   * @param url - The url of glTF file.
+   */
+  ;
+
+  _proto.replaceEyebrow =
+  /*#__PURE__*/
+  function () {
+    var _replaceEyebrow = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee9(url) {
+      var _this5 = this;
+
+      return regeneratorRuntime.wrap(function _callee9$(_context9) {
+        while (1) {
+          switch (_context9.prev = _context9.next) {
+            case 0:
+              if (!(url && this._setModelPromise)) {
+                _context9.next = 2;
+                break;
+              }
+
+              return _context9.abrupt("return", this._setModelPromise.then( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee8() {
+                var eyebrowEntity, eyebrowSkin;
+                return regeneratorRuntime.wrap(function _callee8$(_context8) {
+                  while (1) {
+                    switch (_context8.prev = _context8.next) {
+                      case 0:
+                        _context8.next = 2;
+                        return _this5._addComponent(url);
+
+                      case 2:
+                        eyebrowEntity = _context8.sent;
+                        eyebrowSkin = eyebrowEntity.findByName("eyebrows");
+
+                        _this5._modelEntity.addChild(eyebrowSkin);
+
+                        _this5._eyebrowEntity && _this5._eyebrowEntity.destroy();
+                        _this5._eyebrowEntity = eyebrowSkin;
+
+                      case 7:
+                      case "end":
+                        return _context8.stop();
+                    }
+                  }
+                }, _callee8);
+              }))));
+
+            case 2:
+            case "end":
+              return _context9.stop();
+          }
+        }
+      }, _callee9, this);
+    }));
+
+    function replaceEyebrow(_x5) {
       return _replaceEyebrow.apply(this, arguments);
@@ -329,2 +543,79 @@ }
   /**
+   * Replace cloth by glTF url.
+   * @param url - The url of glTF file.
+   */
+  ;
+
+  _proto.replaceCloth =
+  /*#__PURE__*/
+  function () {
+    var _replaceCloth = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee11(url) {
+      var _this6 = this;
+
+      return regeneratorRuntime.wrap(function _callee11$(_context11) {
+        while (1) {
+          switch (_context11.prev = _context11.next) {
+            case 0:
+              if (!(url && this._setModelPromise)) {
+                _context11.next = 2;
+                break;
+              }
+
+              return _context11.abrupt("return", this._setModelPromise.then( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee10() {
+                var res, defaultSceneRoot, materials, clothEntity, clothSkin, i, n, material;
+                return regeneratorRuntime.wrap(function _callee10$(_context10) {
+                  while (1) {
+                    switch (_context10.prev = _context10.next) {
+                      case 0:
+                        _context10.next = 2;
+                        return _this6.engine.resourceManager.load({
+                          type: AssetType.Prefab,
+                          url: url
+                        });
+
+                      case 2:
+                        res = _context10.sent;
+                        defaultSceneRoot = res.defaultSceneRoot, materials = res.materials;
+                        clothEntity = defaultSceneRoot.clone();
+                        clothSkin = clothEntity.findByName("cloth");
+
+                        _this6._modelEntity.addChild(clothSkin);
+
+                        _this6._clothEntity && _this6._clothEntity.destroy();
+                        _this6._clothEntity = clothSkin;
+
+                        for (i = 0, n = materials.length; i < n; i++) {
+                          material = materials[i];
+
+                          if (material.name == "body") {
+                            material.baseColor = _this6._bodyMaterial.baseColor;
+                            material.emissiveColor = _this6._bodyMaterial.emissiveColor;
+                            material.roughness = _this6._bodyMaterial.roughness;
+                            _this6._bodyMaterial = material;
+                          }
+                        }
+
+                      case 10:
+                      case "end":
+                        return _context10.stop();
+                    }
+                  }
+                }, _callee10);
+              }))));
+
+            case 2:
+            case "end":
+              return _context11.stop();
+          }
+        }
+      }, _callee11, this);
+    }));
+
+    function replaceCloth(_x6) {
+      return _replaceCloth.apply(this, arguments);
+    }
+
+    return replaceCloth;
+  }()
+  /**
    * Replace action by glTF url which includes action information.
@@ -338,11 +629,11 @@ * @param url - The url of action glTF file.
   function () {
-    var _replaceAction = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee8(url) {
-      var _this5 = this;
+    var _replaceAction = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee12(url) {
+      var _this7 = this;
 
       var res, defaultSceneRoot, mainMeshRenderer, replaceMeshRenderer;
-      return regeneratorRuntime.wrap(function _callee8$(_context8) {
+      return regeneratorRuntime.wrap(function _callee12$(_context12) {
         while (1) {
-          switch (_context8.prev = _context8.next) {
+          switch (_context12.prev = _context12.next) {
             case 0:
-              _context8.next = 2;
+              _context12.next = 2;
               return this.engine.resourceManager.load({
@@ -354,3 +645,3 @@ type: AssetType.Prefab,
             case 2:
-              res = _context8.sent;
+              res = _context12.sent;
               defaultSceneRoot = res.defaultSceneRoot;
@@ -375,3 +666,3 @@ mainMeshRenderer = [];
 
-                      var entity = _this5._modelEntity.findByName(joint.name);
+                      var entity = _this7._modelEntity.findByName(joint.name);
 
@@ -389,9 +680,9 @@ entity && (entity.transform.localMatrix = joint.transform.localMatrix);
             case "end":
-              return _context8.stop();
+              return _context12.stop();
           }
         }
-      }, _callee8, this);
+      }, _callee12, this);
     }));
 
-    function replaceAction(_x5) {
+    function replaceAction(_x7) {
       return _replaceAction.apply(this, arguments);
@@ -403,37 +694,57 @@ }
   /**
-   * Edit blendShape by name.
-   * @param blendShapeName - the name of the blendShape.
-   * @param value - The value of blendShape want to set.
+   * Replace animation by glTF url which includes animation information.
+   * @param url - The url of animation glTF file.
    */
   ;
 
-  _proto.editBlendShape = function editBlendShape(blendShapeName, value) {
-    var info = this._blendShapeNameMap[blendShapeName];
+  _proto.replaceAnimation =
+  /*#__PURE__*/
+  function () {
+    var _replaceAnimation = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee13(url) {
+      var res, animations, animator, animatorController, layer, animatorStateMachine;
+      return regeneratorRuntime.wrap(function _callee13$(_context13) {
+        while (1) {
+          switch (_context13.prev = _context13.next) {
+            case 0:
+              _context13.next = 2;
+              return this.engine.resourceManager.load({
+                type: AssetType.Prefab,
+                url: url
+              });
 
-    if (info) {
-      var rendererIndex = info.rendererIndex,
-          weightIndex = info.weightIndex;
-      this._blendShapeWeights[rendererIndex][weightIndex] = value;
-    } else {
-      Logger.warn("no blendShape: " + blendShapeName + " in current model");
-    }
-  }
-  /**
-   * Get blendShape value by name.
-   * @param blendShapeName - the name of the blendShape.
-   * @returns The blendShape value.
-   */
-  ;
+            case 2:
+              res = _context13.sent;
+              animations = res.animations;
+              animator = this._animator;
+              animatorController = new AnimatorController();
+              layer = new AnimatorControllerLayer("layer");
+              animatorStateMachine = new AnimatorStateMachine();
+              animatorController.addLayer(layer);
+              animator.animatorController = animatorController;
+              layer.stateMachine = animatorStateMachine;
+              this._animationClips = animations;
 
-  _proto.getBlendShapeValue = function getBlendShapeValue(blendShapeName) {
-    var info = this._blendShapeNameMap[blendShapeName];
+              if (animations) {
+                animations.forEach(function (clip) {
+                  var animatorState = animatorStateMachine.addState(clip.name);
+                  animatorState.clip = clip;
+                });
+              }
 
-    if (info) {
-      var rendererIndex = info.rendererIndex,
-          weightIndex = info.weightIndex;
-      return this._blendShapeWeights[rendererIndex][weightIndex];
+              animator.play("Bip001|Take 001|BaseLayer");
+
+            case 14:
+            case "end":
+              return _context13.stop();
+          }
+        }
+      }, _callee13, this);
+    }));
+
+    function replaceAnimation(_x8) {
+      return _replaceAnimation.apply(this, arguments);
     }
 
-    return 0;
-  }
+    return replaceAnimation;
+  }()
   /**
@@ -449,4 +760,4 @@ * Get time duration of animation clip by name.
 
-    return (_this$_animationClips = this._animationClips) === null || _this$_animationClips === void 0 ? void 0 : (_this$_animationClips2 = _this$_animationClips.find(function (_ref4) {
-      var name = _ref4.name;
+    return (_this$_animationClips = this._animationClips) === null || _this$_animationClips === void 0 ? void 0 : (_this$_animationClips2 = _this$_animationClips.find(function (_ref6) {
+      var name = _ref6.name;
       return name === clipName;
@@ -465,9 +776,9 @@ })) === null || _this$_animationClips2 === void 0 ? void 0 : _this$_animationClips2.length;
   _proto._replaceModel = /*#__PURE__*/function () {
-    var _replaceModel3 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee9(modelUrl) {
-      var res, defaultSceneRoot, animations, clone, animator, renderers, rendererIndex, rendererLength, renderer, blendShapeWeights, mesh, weightIndex, weightLength, bsName;
-      return regeneratorRuntime.wrap(function _callee9$(_context9) {
+    var _replaceModel3 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee14(modelUrl) {
+      var res, defaultSceneRoot, animations, clone, i, n, material, renderers, rendererIndex, rendererLength, renderer, blendShapeWeights, mesh, weightIndex, weightLength, bsName;
+      return regeneratorRuntime.wrap(function _callee14$(_context14) {
         while (1) {
-          switch (_context9.prev = _context9.next) {
+          switch (_context14.prev = _context14.next) {
             case 0:
-              _context9.next = 2;
+              _context14.next = 2;
               return this.engine.resourceManager.load({
@@ -479,3 +790,3 @@ type: AssetType.Prefab,
             case 2:
-              res = _context9.sent;
+              res = _context14.sent;
 
@@ -487,6 +798,28 @@ this._destroyLastGLTF();
               this.entity.addChild(clone);
-              this._modelEntity = clone; // animation
+              this._modelEntity = clone;
 
-              animator = clone.getComponent(Animator);
-              this._animator = animator;
+              for (i = 0, n = res.materials.length; i < n; i++) {
+                material = res.materials[i];
+
+                if (material.name == "head") {
+                  this._faceMaterial = material;
+                }
+
+                if (material.name == "body") {
+                  this._bodyMaterial = material;
+                }
+              } // replace texture
+
+
+              if (this._faceMaterial) {
+                this._uvMapping.originalTexture = this._faceMaterial.baseTexture;
+              } // animation
+
+
+              this._animator = this._modelEntity.getComponent(Animator);
+
+              if (this._animator == null) {
+                this._animator = this._modelEntity.addComponent(Animator);
+              }
+
               this._animationClips = animations; // blendShape
@@ -510,3 +843,3 @@
                   for (weightIndex = 0, weightLength = blendShapeWeights.length; weightIndex < weightLength; weightIndex++) {
-                    bsName = mesh.getBlendShapeName(weightIndex);
+                    bsName = mesh.getBlendShapeName ? mesh.getBlendShapeName(weightIndex) : weightIndex + "";
 
@@ -526,15 +859,16 @@ if (!this._blendShapeNameMap) {
 
-              this._hairEntity = this._modelEntity.findByName("HumanNormal_Head_Hair_00");
-              this._eyeEntity = this._modelEntity.findByName("HumanNormal_Head_Eyes_00");
-              this._eyebrowEntity = this._modelEntity.findByName("HumanNormal_Head_Eyebrow_00");
+              this._hairEntity = this._modelEntity.findByName("hair");
+              this._eyeEntity = this._modelEntity.findByName("Eyes");
+              this._eyebrowEntity = this._modelEntity.findByName("Eyebrow");
+              this._clothEntity = this._modelEntity.findByName("cloth");
 
-            case 17:
+            case 20:
             case "end":
-              return _context9.stop();
+              return _context14.stop();
           }
         }
-      }, _callee9, this);
+      }, _callee14, this);
     }));
 
-    function _replaceModel(_x6) {
+    function _replaceModel(_x9) {
       return _replaceModel3.apply(this, arguments);
@@ -547,9 +881,9 @@ }
   _proto._addComponent = /*#__PURE__*/function () {
-    var _addComponent2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee10(url) {
-      var res, defaultSceneRoot, clone, slotEntity;
-      return regeneratorRuntime.wrap(function _callee10$(_context10) {
+    var _addComponent2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee15(url) {
+      var res, defaultSceneRoot;
+      return regeneratorRuntime.wrap(function _callee15$(_context15) {
         while (1) {
-          switch (_context10.prev = _context10.next) {
+          switch (_context15.prev = _context15.next) {
             case 0:
-              _context10.next = 2;
+              _context15.next = 2;
               return this.engine.resourceManager.load({
@@ -561,18 +895,15 @@ type: AssetType.Prefab,
             case 2:
-              res = _context10.sent;
+              res = _context15.sent;
               defaultSceneRoot = res.defaultSceneRoot;
-              clone = defaultSceneRoot.clone();
-              slotEntity = this._modelEntity.findByName("man_Head");
-              slotEntity && slotEntity.addChild(clone);
-              return _context10.abrupt("return", clone);
+              return _context15.abrupt("return", defaultSceneRoot.clone());
 
-            case 8:
+            case 5:
             case "end":
-              return _context10.stop();
+              return _context15.stop();
           }
         }
-      }, _callee10, this);
+      }, _callee15, this);
     }));
 
-    function _addComponent(_x7) {
+    function _addComponent(_x10) {
       return _addComponent2.apply(this, arguments);
@@ -598,3 +929,10 @@ }
     key: "eyeUrl",
-    get:
+    get: // 一级类目
+    // 二级类目
+    // 具体资产
+    // schema
+    // replaced entity
+    // replace texture
+    // ark api for npm
+
     /**
@@ -629,2 +967,20 @@ * ------------- begin: editor config -------------
   }, {
+    key: "beardUrl",
+    get: function get() {
+      return this._beardUrl;
+    },
+    set: function set(url) {
+      this._beardUrl = url;
+      this.replaceBeard(url);
+    }
+  }, {
+    key: "clothUrl",
+    get: function get() {
+      return this._clothUrl;
+    },
+    set: function set(url) {
+      this._clothUrl = url;
+      this.replaceCloth(url);
+    }
+  }, {
     key: "modelUrl",
@@ -644,3 +1000,3 @@ get: function get() {
     set: function set(url) {
-      var _this6 = this;
+      var _this8 = this;
 
@@ -651,6 +1007,22 @@ this._actionUrl = url;
         this._setModelPromise.then(function () {
-          _this6.replaceAction(url);
+          _this8.replaceAction(url);
         });
       }
     }
+  }, {
+    key: "animationUrl",
+    get: function get() {
+      return this._animationUrl;
+    },
+    set: function set(url) {
+      var _this9 = this;
+
+      this._animationUrl = url;
+
+      if (url && this._setModelPromise) {
+        this._setModelPromise.then(function () {
+          _this9.replaceAnimation(url);
+        });
+      }
+    }
     /**
@@ -657,0 +1029,0 @@ * ------------- end: editor config -------------

dist/miniprogram.js

@@ -78,13 +78,92 @@ 'use strict';
 
+miniprogram.Shader.create("uv-mapping-cover", "\n    attribute vec4 POSITION;\n    attribute vec2 TEXCOORD_0;\n\n    varying vec2 uv;\n                \n    void main() {\n      uv = TEXCOORD_0;\n      gl_Position = vec4( POSITION.xzy , 1.0);\n      gl_Position.y *= -1.0;\n      \n      gl_Position.x = gl_Position.x * 0.5;\n      gl_Position.y = gl_Position.y * 0.5 - 0.25;\n    }\n    ", "\n    uniform float u_alphaCutoff;\n    uniform sampler2D coverTex;\n    varying vec2 uv;\n\n    void main() {\n       vec4 baseColor = texture2D(coverTex, vec2(uv.x, 1.0-uv.y));\n    #ifdef ALPHA_CUTOFF\n        if( baseColor.a < u_alphaCutoff ) {\n            discard;\n        }\n    #endif\n       \n       gl_FragColor = baseColor;\n    }\n    ");
+miniprogram.Shader.create("uv-mapping-base", "\n    attribute vec4 POSITION;\n    attribute vec2 TEXCOORD_0;\n\n    varying vec2 uv;\n                \n    void main() {\n      uv = TEXCOORD_0;\n      gl_Position = vec4( POSITION.xzy , 1.0);\n      gl_Position.y *= -1.0;\n    }\n    ", "\n    uniform float u_alphaCutoff;\n    uniform sampler2D originalTex;\n    varying vec2 uv;\n\n    void main() {\n       gl_FragColor = texture(originalTex, vec2(uv.x, 1.0-uv.y));\n    }\n    ");
+var UVMapping = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(UVMapping, _Component);
+
+  function UVMapping(entity) {
+    var _this;
+
+    _this = _Component.call(this, entity) || this;
+    _this._originalMtl = void 0;
+    _this._coverMtl = void 0;
+    _this._colorTexture = void 0;
+    _this._uvCamera = void 0;
+    _this._beard = null;
+    _this.entity.layer = miniprogram.Layer.Layer10;
+
+    var camera = _this.entity.addComponent(miniprogram.Camera);
+
+    camera.enableFrustumCulling = false;
+    camera.cullingMask = miniprogram.Layer.Layer10;
+    _this._uvCamera = camera;
+    var plane = miniprogram.PrimitiveMesh.createPlane(_this.engine, 2, 2);
+
+    var originalRenderer = _this.entity.addComponent(miniprogram.MeshRenderer);
+
+    originalRenderer.mesh = plane;
+    _this._originalMtl = _this._createOriginalMaterial();
+    originalRenderer.setMaterial(_this._originalMtl);
+
+    var coverRenderer = _this.entity.addComponent(miniprogram.MeshRenderer);
+
+    coverRenderer.mesh = plane;
+    _this._coverMtl = _this._createCoverMaterial();
+    coverRenderer.setMaterial(_this._coverMtl);
+    return _this;
+  }
+
+  var _proto = UVMapping.prototype;
+
+  _proto._createCoverMaterial = function _createCoverMaterial() {
+    var material = new miniprogram.BaseMaterial(this._engine, miniprogram.Shader.find("uv-mapping-cover"));
+    material.renderFace = miniprogram.RenderFace.Double;
+    material.isTransparent = true;
+    return material;
+  };
+
+  _proto._createOriginalMaterial = function _createOriginalMaterial() {
+    return new miniprogram.BaseMaterial(this._engine, miniprogram.Shader.find("uv-mapping-base"));
+  };
+
+  _createClass(UVMapping, [{
+    key: "coverTexture",
+    set: function set(texture) {
+      if (this._beard !== texture) {
+        this._beard = texture;
+
+        this._coverMtl.shaderData.setTexture("coverTex", texture);
+
+        this.entity.isActive = true;
+
+        this._uvCamera.render();
+
+        this.entity.isActive = false;
+      }
+    }
+  }, {
+    key: "originalTexture",
+    set: function set(texture) {
+      this._originalMtl.shaderData.setTexture("originalTex", texture);
+
+      this._colorTexture = new miniprogram.Texture2D(this.engine, texture.width, texture.height, texture.format, false);
+      this._uvCamera.renderTarget = new miniprogram.RenderTarget(this.engine, texture.width, texture.height, this._colorTexture, null);
+    }
+  }, {
+    key: "colorTexture",
+    get: function get() {
+      return this._colorTexture;
+    }
+  }]);
+
+  return UVMapping;
+}(miniprogram.Component);
+
 var ArkComponent = /*#__PURE__*/function (_Component) {
   _inheritsLoose(ArkComponent, _Component);
 
-  function ArkComponent() {
+  function ArkComponent(entity) {
     var _this;
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _Component.call.apply(_Component, [this].concat(args)) || this;
+    _this = _Component.call(this, entity) || this;
     _this.group = "";
@@ -96,5 +175,8 @@ _this.subGroup = "";
     _this._actionUrl = void 0;
+    _this._animationUrl = void 0;
     _this._hairUrl = void 0;
     _this._eyeUrl = void 0;
     _this._eyebrowUrl = void 0;
+    _this._beardUrl = void 0;
+    _this._clothUrl = void 0;
     _this._modelEntity = void 0;
@@ -104,2 +186,6 @@ _this._hairEntity = void 0;
     _this._eyebrowEntity = void 0;
+    _this._faceMaterial = void 0;
+    _this._bodyMaterial = void 0;
+    _this._clothEntity = void 0;
+    _this._uvMapping = void 0;
     _this._animator = void 0;
@@ -109,11 +195,69 @@ _this._animationClips = void 0;
     _this._blendShapeNameMap = void 0;
+    var mapping = entity.createChild("uvMapping");
+    _this._uvMapping = mapping.addComponent(UVMapping);
+    mapping.isActive = false;
     return _this;
   }
+  /**
+   * Edit blendShape by name.
+   * @param blendShapeName - the name of the blendShape.
+   * @param value - The value of blendShape want to set.
+   */
 
+
   var _proto = ArkComponent.prototype;
 
+  _proto.editBlendShape = function editBlendShape(blendShapeName, value) {
+    var info = this._blendShapeNameMap[blendShapeName];
+
+    if (info) {
+      var rendererIndex = info.rendererIndex,
+          weightIndex = info.weightIndex;
+      this._blendShapeWeights[rendererIndex][weightIndex] = value;
+    } else {
+      miniprogram.Logger.warn("no blendShape: " + blendShapeName + " in current model");
+    }
+  }
   /**
+   * Get blendShape value by name.
+   * @param blendShapeName - the name of the blendShape.
+   * @returns The blendShape value.
+   */
+  ;
+
+  _proto.getBlendShapeValue = function getBlendShapeValue(blendShapeName) {
+    var info = this._blendShapeNameMap[blendShapeName];
+
+    if (info) {
+      var rendererIndex = info.rendererIndex,
+          weightIndex = info.weightIndex;
+      return this._blendShapeWeights[rendererIndex][weightIndex];
+    }
+
+    return 0;
+  }
+  /**
+   * Replace face and body color.
+   * @param roughness - roughness.
+   * @param baseColor - base Color.
+   * @param emissiveColor - emissive Color .
+   */
+  ;
+
+  _proto.replaceSkinColor = function replaceSkinColor(roughness, baseColor, emissiveColor) {
+    var material = this._faceMaterial;
+    material.roughness = roughness;
+    material.baseColor = baseColor;
+    material.emissiveColor = emissiveColor;
+    material = this._bodyMaterial;
+    material.roughness = roughness;
+    material.baseColor = baseColor;
+    material.emissiveColor = emissiveColor;
+  }
+  /**
    * Replace 3D Model by glTF url.
    * @param url - The url of 3D glTF file.
    */
+  ;
+
   _proto.replaceModel =
@@ -150,11 +294,11 @@ /*#__PURE__*/
   /**
-   * Replace hair by glTF url.
-   * @param url - The url of glTF file.
+   * Replace 3D beard by texture url.
+   * @param url - The url of texture file.
    */
   ;
 
-  _proto.replaceHair =
+  _proto.replaceBeard =
   /*#__PURE__*/
   function () {
-    var _replaceHair = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3(url) {
+    var _replaceBeard = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3(url) {
       var _this2 = this;
@@ -172,3 +316,2 @@
               return _context3.abrupt("return", this._setModelPromise.then( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
-                var hairEntity;
                 return regeneratorRuntime.wrap(function _callee2$(_context2) {
@@ -179,10 +322,12 @@ while (1) {
                         _context2.next = 2;
-                        return _this2._addComponent(url);
+                        return _this2.engine.resourceManager.load({
+                          type: miniprogram.AssetType.Texture2D,
+                          url: url
+                        });
 
                       case 2:
-                        hairEntity = _context2.sent;
-                        _this2._hairEntity && _this2._hairEntity.destroy();
-                        _this2._hairEntity = hairEntity;
+                        _this2._uvMapping.coverTexture = _context2.sent;
+                        _this2._faceMaterial.baseTexture = _this2._uvMapping.colorTexture;
 
-                      case 5:
+                      case 4:
                       case "end":
@@ -203,10 +348,10 @@ return _context2.stop();
 
-    function replaceHair(_x2) {
-      return _replaceHair.apply(this, arguments);
+    function replaceBeard(_x2) {
+      return _replaceBeard.apply(this, arguments);
     }
 
-    return replaceHair;
+    return replaceBeard;
   }()
   /**
-   * Replace eye by glTF url.
+   * Replace hair by glTF url.
    * @param url - The url of glTF file.
@@ -216,6 +361,6 @@ */
 
-  _proto.replaceEye =
+  _proto.replaceHair =
   /*#__PURE__*/
   function () {
-    var _replaceEye = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5(url) {
+    var _replaceHair = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5(url) {
       var _this3 = this;
@@ -233,3 +378,3 @@
               return _context5.abrupt("return", this._setModelPromise.then( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4() {
-                var eyeEntity;
+                var hairEntity, hairSkin;
                 return regeneratorRuntime.wrap(function _callee4$(_context4) {
@@ -243,7 +388,11 @@ while (1) {
                       case 2:
-                        eyeEntity = _context4.sent;
-                        _this3._eyeEntity && _this3._eyeEntity.destroy();
-                        _this3._eyeEntity = eyeEntity;
+                        hairEntity = _context4.sent;
+                        hairSkin = hairEntity.findByName("hair");
 
-                      case 5:
+                        _this3._modelEntity.addChild(hairSkin);
+
+                        _this3._hairEntity && _this3._hairEntity.destroy();
+                        _this3._hairEntity = hairSkin;
+
+                      case 7:
                       case "end":
@@ -264,10 +413,10 @@ return _context4.stop();
 
-    function replaceEye(_x3) {
-      return _replaceEye.apply(this, arguments);
+    function replaceHair(_x3) {
+      return _replaceHair.apply(this, arguments);
     }
 
-    return replaceEye;
+    return replaceHair;
   }()
   /**
-   * Replace eyebrow by glTF url.
+   * Replace eye by glTF url.
    * @param url - The url of glTF file.
@@ -277,6 +426,6 @@ */
 
-  _proto.replaceEyebrow =
+  _proto.replaceEye =
   /*#__PURE__*/
   function () {
-    var _replaceEyebrow = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee7(url) {
+    var _replaceEye = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee7(url) {
       var _this4 = this;
@@ -294,3 +443,3 @@
               return _context7.abrupt("return", this._setModelPromise.then( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee6() {
-                var eyebrowEntity;
+                var eyeEntity, eyeSkin;
                 return regeneratorRuntime.wrap(function _callee6$(_context6) {
@@ -304,7 +453,11 @@ while (1) {
                       case 2:
-                        eyebrowEntity = _context6.sent;
-                        _this4._eyebrowEntity && _this4._eyebrowEntity.destroy();
-                        _this4._eyebrowEntity = eyebrowEntity;
+                        eyeEntity = _context6.sent;
+                        eyeSkin = eyeEntity.findByName("eyes");
 
-                      case 5:
+                        _this4._modelEntity.addChild(eyeSkin);
+
+                        _this4._eyeEntity && _this4._eyeEntity.destroy();
+                        _this4._eyeEntity = eyeSkin;
+
+                      case 7:
                       case "end":
@@ -325,3 +478,64 @@ return _context6.stop();
 
-    function replaceEyebrow(_x4) {
+    function replaceEye(_x4) {
+      return _replaceEye.apply(this, arguments);
+    }
+
+    return replaceEye;
+  }()
+  /**
+   * Replace eyebrow by glTF url.
+   * @param url - The url of glTF file.
+   */
+  ;
+
+  _proto.replaceEyebrow =
+  /*#__PURE__*/
+  function () {
+    var _replaceEyebrow = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee9(url) {
+      var _this5 = this;
+
+      return regeneratorRuntime.wrap(function _callee9$(_context9) {
+        while (1) {
+          switch (_context9.prev = _context9.next) {
+            case 0:
+              if (!(url && this._setModelPromise)) {
+                _context9.next = 2;
+                break;
+              }
+
+              return _context9.abrupt("return", this._setModelPromise.then( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee8() {
+                var eyebrowEntity, eyebrowSkin;
+                return regeneratorRuntime.wrap(function _callee8$(_context8) {
+                  while (1) {
+                    switch (_context8.prev = _context8.next) {
+                      case 0:
+                        _context8.next = 2;
+                        return _this5._addComponent(url);
+
+                      case 2:
+                        eyebrowEntity = _context8.sent;
+                        eyebrowSkin = eyebrowEntity.findByName("eyebrows");
+
+                        _this5._modelEntity.addChild(eyebrowSkin);
+
+                        _this5._eyebrowEntity && _this5._eyebrowEntity.destroy();
+                        _this5._eyebrowEntity = eyebrowSkin;
+
+                      case 7:
+                      case "end":
+                        return _context8.stop();
+                    }
+                  }
+                }, _callee8);
+              }))));
+
+            case 2:
+            case "end":
+              return _context9.stop();
+          }
+        }
+      }, _callee9, this);
+    }));
+
+    function replaceEyebrow(_x5) {
       return _replaceEyebrow.apply(this, arguments);
@@ -333,2 +547,79 @@ }
   /**
+   * Replace cloth by glTF url.
+   * @param url - The url of glTF file.
+   */
+  ;
+
+  _proto.replaceCloth =
+  /*#__PURE__*/
+  function () {
+    var _replaceCloth = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee11(url) {
+      var _this6 = this;
+
+      return regeneratorRuntime.wrap(function _callee11$(_context11) {
+        while (1) {
+          switch (_context11.prev = _context11.next) {
+            case 0:
+              if (!(url && this._setModelPromise)) {
+                _context11.next = 2;
+                break;
+              }
+
+              return _context11.abrupt("return", this._setModelPromise.then( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee10() {
+                var res, defaultSceneRoot, materials, clothEntity, clothSkin, i, n, material;
+                return regeneratorRuntime.wrap(function _callee10$(_context10) {
+                  while (1) {
+                    switch (_context10.prev = _context10.next) {
+                      case 0:
+                        _context10.next = 2;
+                        return _this6.engine.resourceManager.load({
+                          type: miniprogram.AssetType.Prefab,
+                          url: url
+                        });
+
+                      case 2:
+                        res = _context10.sent;
+                        defaultSceneRoot = res.defaultSceneRoot, materials = res.materials;
+                        clothEntity = defaultSceneRoot.clone();
+                        clothSkin = clothEntity.findByName("cloth");
+
+                        _this6._modelEntity.addChild(clothSkin);
+
+                        _this6._clothEntity && _this6._clothEntity.destroy();
+                        _this6._clothEntity = clothSkin;
+
+                        for (i = 0, n = materials.length; i < n; i++) {
+                          material = materials[i];
+
+                          if (material.name == "body") {
+                            material.baseColor = _this6._bodyMaterial.baseColor;
+                            material.emissiveColor = _this6._bodyMaterial.emissiveColor;
+                            material.roughness = _this6._bodyMaterial.roughness;
+                            _this6._bodyMaterial = material;
+                          }
+                        }
+
+                      case 10:
+                      case "end":
+                        return _context10.stop();
+                    }
+                  }
+                }, _callee10);
+              }))));
+
+            case 2:
+            case "end":
+              return _context11.stop();
+          }
+        }
+      }, _callee11, this);
+    }));
+
+    function replaceCloth(_x6) {
+      return _replaceCloth.apply(this, arguments);
+    }
+
+    return replaceCloth;
+  }()
+  /**
    * Replace action by glTF url which includes action information.
@@ -342,11 +633,11 @@ * @param url - The url of action glTF file.
   function () {
-    var _replaceAction = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee8(url) {
-      var _this5 = this;
+    var _replaceAction = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee12(url) {
+      var _this7 = this;
 
       var res, defaultSceneRoot, mainMeshRenderer, replaceMeshRenderer;
-      return regeneratorRuntime.wrap(function _callee8$(_context8) {
+      return regeneratorRuntime.wrap(function _callee12$(_context12) {
         while (1) {
-          switch (_context8.prev = _context8.next) {
+          switch (_context12.prev = _context12.next) {
             case 0:
-              _context8.next = 2;
+              _context12.next = 2;
               return this.engine.resourceManager.load({
@@ -358,3 +649,3 @@ type: miniprogram.AssetType.Prefab,
             case 2:
-              res = _context8.sent;
+              res = _context12.sent;
               defaultSceneRoot = res.defaultSceneRoot;
@@ -379,3 +670,3 @@ mainMeshRenderer = [];
 
-                      var entity = _this5._modelEntity.findByName(joint.name);
+                      var entity = _this7._modelEntity.findByName(joint.name);
 
@@ -393,9 +684,9 @@ entity && (entity.transform.localMatrix = joint.transform.localMatrix);
             case "end":
-              return _context8.stop();
+              return _context12.stop();
           }
         }
-      }, _callee8, this);
+      }, _callee12, this);
     }));
 
-    function replaceAction(_x5) {
+    function replaceAction(_x7) {
       return _replaceAction.apply(this, arguments);
@@ -407,37 +698,57 @@ }
   /**
-   * Edit blendShape by name.
-   * @param blendShapeName - the name of the blendShape.
-   * @param value - The value of blendShape want to set.
+   * Replace animation by glTF url which includes animation information.
+   * @param url - The url of animation glTF file.
    */
   ;
 
-  _proto.editBlendShape = function editBlendShape(blendShapeName, value) {
-    var info = this._blendShapeNameMap[blendShapeName];
+  _proto.replaceAnimation =
+  /*#__PURE__*/
+  function () {
+    var _replaceAnimation = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee13(url) {
+      var res, animations, animator, animatorController, layer, animatorStateMachine;
+      return regeneratorRuntime.wrap(function _callee13$(_context13) {
+        while (1) {
+          switch (_context13.prev = _context13.next) {
+            case 0:
+              _context13.next = 2;
+              return this.engine.resourceManager.load({
+                type: miniprogram.AssetType.Prefab,
+                url: url
+              });
 
-    if (info) {
-      var rendererIndex = info.rendererIndex,
-          weightIndex = info.weightIndex;
-      this._blendShapeWeights[rendererIndex][weightIndex] = value;
-    } else {
-      miniprogram.Logger.warn("no blendShape: " + blendShapeName + " in current model");
-    }
-  }
-  /**
-   * Get blendShape value by name.
-   * @param blendShapeName - the name of the blendShape.
-   * @returns The blendShape value.
-   */
-  ;
+            case 2:
+              res = _context13.sent;
+              animations = res.animations;
+              animator = this._animator;
+              animatorController = new miniprogram.AnimatorController();
+              layer = new miniprogram.AnimatorControllerLayer("layer");
+              animatorStateMachine = new miniprogram.AnimatorStateMachine();
+              animatorController.addLayer(layer);
+              animator.animatorController = animatorController;
+              layer.stateMachine = animatorStateMachine;
+              this._animationClips = animations;
 
-  _proto.getBlendShapeValue = function getBlendShapeValue(blendShapeName) {
-    var info = this._blendShapeNameMap[blendShapeName];
+              if (animations) {
+                animations.forEach(function (clip) {
+                  var animatorState = animatorStateMachine.addState(clip.name);
+                  animatorState.clip = clip;
+                });
+              }
 
-    if (info) {
-      var rendererIndex = info.rendererIndex,
-          weightIndex = info.weightIndex;
-      return this._blendShapeWeights[rendererIndex][weightIndex];
+              animator.play("Bip001|Take 001|BaseLayer");
+
+            case 14:
+            case "end":
+              return _context13.stop();
+          }
+        }
+      }, _callee13, this);
+    }));
+
+    function replaceAnimation(_x8) {
+      return _replaceAnimation.apply(this, arguments);
     }
 
-    return 0;
-  }
+    return replaceAnimation;
+  }()
   /**
@@ -453,4 +764,4 @@ * Get time duration of animation clip by name.
 
-    return (_this$_animationClips = this._animationClips) === null || _this$_animationClips === void 0 ? void 0 : (_this$_animationClips2 = _this$_animationClips.find(function (_ref4) {
-      var name = _ref4.name;
+    return (_this$_animationClips = this._animationClips) === null || _this$_animationClips === void 0 ? void 0 : (_this$_animationClips2 = _this$_animationClips.find(function (_ref6) {
+      var name = _ref6.name;
       return name === clipName;
@@ -469,9 +780,9 @@ })) === null || _this$_animationClips2 === void 0 ? void 0 : _this$_animationClips2.length;
   _proto._replaceModel = /*#__PURE__*/function () {
-    var _replaceModel3 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee9(modelUrl) {
-      var res, defaultSceneRoot, animations, clone, animator, renderers, rendererIndex, rendererLength, renderer, blendShapeWeights, mesh, weightIndex, weightLength, bsName;
-      return regeneratorRuntime.wrap(function _callee9$(_context9) {
+    var _replaceModel3 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee14(modelUrl) {
+      var res, defaultSceneRoot, animations, clone, i, n, material, renderers, rendererIndex, rendererLength, renderer, blendShapeWeights, mesh, weightIndex, weightLength, bsName;
+      return regeneratorRuntime.wrap(function _callee14$(_context14) {
         while (1) {
-          switch (_context9.prev = _context9.next) {
+          switch (_context14.prev = _context14.next) {
             case 0:
-              _context9.next = 2;
+              _context14.next = 2;
               return this.engine.resourceManager.load({
@@ -483,3 +794,3 @@ type: miniprogram.AssetType.Prefab,
             case 2:
-              res = _context9.sent;
+              res = _context14.sent;
 
@@ -491,6 +802,28 @@ this._destroyLastGLTF();
               this.entity.addChild(clone);
-              this._modelEntity = clone; // animation
+              this._modelEntity = clone;
 
-              animator = clone.getComponent(miniprogram.Animator);
-              this._animator = animator;
+              for (i = 0, n = res.materials.length; i < n; i++) {
+                material = res.materials[i];
+
+                if (material.name == "head") {
+                  this._faceMaterial = material;
+                }
+
+                if (material.name == "body") {
+                  this._bodyMaterial = material;
+                }
+              } // replace texture
+
+
+              if (this._faceMaterial) {
+                this._uvMapping.originalTexture = this._faceMaterial.baseTexture;
+              } // animation
+
+
+              this._animator = this._modelEntity.getComponent(miniprogram.Animator);
+
+              if (this._animator == null) {
+                this._animator = this._modelEntity.addComponent(miniprogram.Animator);
+              }
+
               this._animationClips = animations; // blendShape
@@ -514,3 +847,3 @@
                   for (weightIndex = 0, weightLength = blendShapeWeights.length; weightIndex < weightLength; weightIndex++) {
-                    bsName = mesh.getBlendShapeName(weightIndex);
+                    bsName = mesh.getBlendShapeName ? mesh.getBlendShapeName(weightIndex) : weightIndex + "";
 
@@ -530,15 +863,16 @@ if (!this._blendShapeNameMap) {
 
-              this._hairEntity = this._modelEntity.findByName("HumanNormal_Head_Hair_00");
-              this._eyeEntity = this._modelEntity.findByName("HumanNormal_Head_Eyes_00");
-              this._eyebrowEntity = this._modelEntity.findByName("HumanNormal_Head_Eyebrow_00");
+              this._hairEntity = this._modelEntity.findByName("hair");
+              this._eyeEntity = this._modelEntity.findByName("Eyes");
+              this._eyebrowEntity = this._modelEntity.findByName("Eyebrow");
+              this._clothEntity = this._modelEntity.findByName("cloth");
 
-            case 17:
+            case 20:
             case "end":
-              return _context9.stop();
+              return _context14.stop();
           }
         }
-      }, _callee9, this);
+      }, _callee14, this);
     }));
 
-    function _replaceModel(_x6) {
+    function _replaceModel(_x9) {
       return _replaceModel3.apply(this, arguments);
@@ -551,9 +885,9 @@ }
   _proto._addComponent = /*#__PURE__*/function () {
-    var _addComponent2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee10(url) {
-      var res, defaultSceneRoot, clone, slotEntity;
-      return regeneratorRuntime.wrap(function _callee10$(_context10) {
+    var _addComponent2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee15(url) {
+      var res, defaultSceneRoot;
+      return regeneratorRuntime.wrap(function _callee15$(_context15) {
         while (1) {
-          switch (_context10.prev = _context10.next) {
+          switch (_context15.prev = _context15.next) {
             case 0:
-              _context10.next = 2;
+              _context15.next = 2;
               return this.engine.resourceManager.load({
@@ -565,18 +899,15 @@ type: miniprogram.AssetType.Prefab,
             case 2:
-              res = _context10.sent;
+              res = _context15.sent;
               defaultSceneRoot = res.defaultSceneRoot;
-              clone = defaultSceneRoot.clone();
-              slotEntity = this._modelEntity.findByName("man_Head");
-              slotEntity && slotEntity.addChild(clone);
-              return _context10.abrupt("return", clone);
+              return _context15.abrupt("return", defaultSceneRoot.clone());
 
-            case 8:
+            case 5:
             case "end":
-              return _context10.stop();
+              return _context15.stop();
           }
         }
-      }, _callee10, this);
+      }, _callee15, this);
     }));
 
-    function _addComponent(_x7) {
+    function _addComponent(_x10) {
       return _addComponent2.apply(this, arguments);
@@ -602,3 +933,10 @@ }
     key: "eyeUrl",
-    get:
+    get: // 一级类目
+    // 二级类目
+    // 具体资产
+    // schema
+    // replaced entity
+    // replace texture
+    // ark api for npm
+
     /**
@@ -633,2 +971,20 @@ * ------------- begin: editor config -------------
   }, {
+    key: "beardUrl",
+    get: function get() {
+      return this._beardUrl;
+    },
+    set: function set(url) {
+      this._beardUrl = url;
+      this.replaceBeard(url);
+    }
+  }, {
+    key: "clothUrl",
+    get: function get() {
+      return this._clothUrl;
+    },
+    set: function set(url) {
+      this._clothUrl = url;
+      this.replaceCloth(url);
+    }
+  }, {
     key: "modelUrl",
@@ -648,3 +1004,3 @@ get: function get() {
     set: function set(url) {
-      var _this6 = this;
+      var _this8 = this;
 
@@ -655,6 +1011,22 @@ this._actionUrl = url;
         this._setModelPromise.then(function () {
-          _this6.replaceAction(url);
+          _this8.replaceAction(url);
         });
       }
     }
+  }, {
+    key: "animationUrl",
+    get: function get() {
+      return this._animationUrl;
+    },
+    set: function set(url) {
+      var _this9 = this;
+
+      this._animationUrl = url;
+
+      if (url && this._setModelPromise) {
+        this._setModelPromise.then(function () {
+          _this9.replaceAnimation(url);
+        });
+      }
+    }
     /**
@@ -661,0 +1033,0 @@ * ------------- end: editor config -------------

package.json

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

types/index.d.ts

@@ -1,2 +0,2 @@
-import { Animator, Component } from "oasis-engine";
+import { Animator, Color, Component, Entity } from "oasis-engine";
 declare class ArkComponent extends Component {
@@ -9,5 +9,8 @@ group: string;
     private _actionUrl;
+    private _animationUrl;
     private _hairUrl;
     private _eyeUrl;
     private _eyebrowUrl;
+    private _beardUrl;
+    private _clothUrl;
     private _modelEntity;
@@ -17,2 +20,6 @@ private _hairEntity;
     private _eyebrowEntity;
+    private _faceMaterial;
+    private _bodyMaterial;
+    private _clothEntity;
+    private _uvMapping;
     private _animator;
@@ -31,2 +38,6 @@ private _animationClips;
     set hairUrl(url: string);
+    get beardUrl(): string;
+    set beardUrl(url: string);
+    get clothUrl(): string;
+    set clothUrl(url: string);
     get modelUrl(): string;
@@ -36,2 +47,4 @@ set modelUrl(url: string);
     set actionUrl(url: string);
+    get animationUrl(): string;
+    set animationUrl(url: string);
     /**
@@ -56,3 +69,23 @@ * ------------- end: editor config -------------
     get onReady(): Promise<void>;
+    constructor(entity: Entity);
     /**
+     * Edit blendShape by name.
+     * @param blendShapeName - the name of the blendShape.
+     * @param value - The value of blendShape want to set.
+     */
+    editBlendShape(blendShapeName: string, value: number): void;
+    /**
+     * Get blendShape value by name.
+     * @param blendShapeName - the name of the blendShape.
+     * @returns The blendShape value.
+     */
+    getBlendShapeValue(blendShapeName: string): number;
+    /**
+     * Replace face and body color.
+     * @param roughness - roughness.
+     * @param baseColor - base Color.
+     * @param emissiveColor - emissive Color .
+     */
+    replaceSkinColor(roughness: number, baseColor: Color, emissiveColor: Color): void;
+    /**
      * Replace 3D Model by glTF url.
@@ -63,2 +96,7 @@ * @param url - The url of 3D glTF file.
     /**
+     * Replace 3D beard by texture url.
+     * @param url - The url of texture file.
+     */
+    replaceBeard(url: string): Promise<void>;
+    /**
      * Replace hair by glTF url.
@@ -79,2 +117,7 @@ * @param url - The url of glTF file.
     /**
+     * Replace cloth by glTF url.
+     * @param url - The url of glTF file.
+     */
+    replaceCloth(url: string): Promise<void>;
+    /**
      * Replace action by glTF url which includes action information.
@@ -85,14 +128,7 @@ * @param url - The url of action glTF file.
     /**
-     * Edit blendShape by name.
-     * @param blendShapeName - the name of the blendShape.
-     * @param value - The value of blendShape want to set.
+     * Replace animation by glTF url which includes animation information.
+     * @param url - The url of animation glTF file.
      */
-    editBlendShape(blendShapeName: string, value: number): void;
+    replaceAnimation(url: string): Promise<void>;
     /**
-     * Get blendShape value by name.
-     * @param blendShapeName - the name of the blendShape.
-     * @returns The blendShape value.
-     */
-    getBlendShapeValue(blendShapeName: string): number;
-    /**
      * Get time duration of animation clip by name.
@@ -99,0 +135,0 @@ * @param clipName The name of the animation clip.

No alert changes

Improved metrics

Total package byte prevSize

109218

increased by60.05%

Number of package files

7

increased by16.67%

Lines of code

2834

increased by53.11%

No dependency changes