@galacean/effects-threejs 2.0.2 → 2.1.0-alpha.0

package/dist/index.js

@@ -3,7 +3,7 @@
  * Description: Galacean Effects runtime threejs plugin for the web
  * Author: Ant Group CO., Ltd.
  * Contributors: 燃然,飂兮,十弦,云垣,茂安,意绮
- * Version: v2.0.2
+ * Version: v2.1.0-alpha.0
  */
 
 'use strict';
@@ -4591,7 +4591,6 @@ function getDirectStore(target) {
 
 /**
  * @since 2.0.0
- * @internal
  */ var EffectsObject = /*#__PURE__*/ function() {
     function EffectsObject(engine) {
         this.engine = engine;
@@ -4627,92 +4626,112 @@ function getDirectStore(target) {
 
 /**
  * @since 2.0.0
- * @internal
  */ var Component = /*#__PURE__*/ function(EffectsObject) {
     _inherits(Component, EffectsObject);
     function Component() {
-        return EffectsObject.apply(this, arguments);
-    }
-    var _proto = Component.prototype;
-    _proto.onAttached = function onAttached() {};
-    _proto.onDestroy = function onDestroy() {};
-    _proto.fromData = function fromData(data) {
-        EffectsObject.prototype.fromData.call(this, data);
-        if (data.item) {
-            this.item = data.item;
-        }
-    };
-    _proto.dispose = function dispose() {
-        this.onDestroy();
-        if (this.item) {
-            removeItem(this.item.components, this);
-        }
-    };
-    _create_class(Component, [
-        {
-            key: "transform",
-            get: /**
-   * 附加到的 VFXItem 对象 Transform 组件
-   */ function get() {
-                return this.item.transform;
-            }
-        }
-    ]);
-    return Component;
-}(EffectsObject);
-/**
- * @since 2.0.0
- * @internal
- */ var Behaviour = /*#__PURE__*/ function(Component) {
-    _inherits(Behaviour, Component);
-    function Behaviour() {
         var _this;
-        _this = Component.apply(this, arguments) || this;
+        _this = EffectsObject.apply(this, arguments) || this;
         _this.isAwakeCalled = false;
         _this.isStartCalled = false;
+        _this.isEnableCalled = false;
         _this._enabled = true;
         return _this;
     }
-    var _proto = Behaviour.prototype;
+    var _proto = Component.prototype;
     /**
    * 生命周期函数，初始化后调用，生命周期内只调用一次
-   */ _proto.awake = function awake() {
+   */ _proto.onAwake = function onAwake() {
     // OVERRIDE
     };
     /**
-   * 在每次设置 enabled 为 true 时触发
+   * 在 enabled 变为 true 时触发
    */ _proto.onEnable = function onEnable() {
     // OVERRIDE
     };
     /**
+   * 在 enabled 变为 false 时触发
+   */ _proto.onDisable = function onDisable() {
+    // OVERRIDE
+    };
+    /**
    * 生命周期函数，在第一次 update 前调用，生命周期内只调用一次
-   */ _proto.start = function start() {
+   */ _proto.onStart = function onStart() {
     // OVERRIDE
     };
     /**
    * 生命周期函数，每帧调用一次
-   */ _proto.update = function update(dt) {
+   */ _proto.onUpdate = function onUpdate(dt) {
     // OVERRIDE
     };
     /**
    * 生命周期函数，每帧调用一次，在 update 之后调用
-   */ _proto.lateUpdate = function lateUpdate(dt) {
+   */ _proto.onLateUpdate = function onLateUpdate(dt) {
+    // OVERRIDE
+    };
+    /**
+   * 生命周期函数，在组件销毁时调用
+   */ _proto.onDestroy = function onDestroy() {
     // OVERRIDE
     };
-    _proto.onAttached = function onAttached() {
-        this.item.itemBehaviours.push(this);
-        if (!this.isAwakeCalled) {
-            this.awake();
-            this.isAwakeCalled = true;
+    /**
+   * @internal
+   */ _proto.enable = function enable() {
+        if (this.item.composition) {
+            this.item.composition.sceneTicking.addComponent(this);
+            this.isEnableCalled = true;
+        }
+        this.onEnable();
+    };
+    /**
+   * @internal
+   */ _proto.disable = function disable() {
+        this.onDisable();
+        if (this.item.composition) {
+            this.isEnableCalled = false;
+            this.item.composition.sceneTicking.removeComponent(this);
+        }
+    };
+    _proto.setVFXItem = function setVFXItem(item) {
+        this.item = item;
+        if (item.isDuringPlay) {
+            if (!this.isAwakeCalled) {
+                this.onAwake();
+                this.isAwakeCalled = true;
+            }
+            if (item.getVisible() && this.enabled) {
+                this.start();
+                this.enable();
+            }
+        }
+    };
+    _proto.fromData = function fromData(data) {
+        EffectsObject.prototype.fromData.call(this, data);
+        if (data.item) {
+            this.item = data.item;
         }
     };
     _proto.dispose = function dispose() {
+        this.onDestroy();
         if (this.item) {
-            removeItem(this.item.itemBehaviours, this);
+            removeItem(this.item.components, this);
         }
-        Component.prototype.dispose.call(this);
     };
-    _create_class(Behaviour, [
+    _proto.start = function start() {
+        if (this.isStartCalled) {
+            return;
+        }
+        this.isStartCalled = true;
+        this.onStart();
+    };
+    _create_class(Component, [
+        {
+            key: "transform",
+            get: /**
+   * 附加到的 VFXItem 对象 Transform 组件
+   */ function get() {
+                return this.item.transform;
+            }
+        },
         {
             key: "isActiveAndEnabled",
             get: /**
@@ -4727,24 +4746,46 @@ function getDirectStore(target) {
                 return this._enabled;
             },
             set: function set(value) {
-                this._enabled = value;
-                if (value) {
-                    if (this.isActiveAndEnabled) {
-                        this.onEnable();
-                    }
-                    if (!this.isStartCalled) {
-                        this.start();
-                        this.isStartCalled = true;
+                if (this.enabled !== value) {
+                    this._enabled = value;
+                    if (value) {
+                        if (this.isActiveAndEnabled) {
+                            this.enable();
+                            if (!this.isStartCalled) {
+                                this.onStart();
+                                this.isStartCalled = true;
+                            }
+                        }
+                    } else {
+                        if (this.isEnableCalled) {
+                            this.disable();
+                        }
                     }
                 }
             }
         }
     ]);
-    return Behaviour;
-}(Component);
+    return Component;
+}(EffectsObject);
 __decorate([
     serialize()
-], Behaviour.prototype, "_enabled", void 0);
+], Component.prototype, "_enabled", void 0);
+/**
+ * @since 2.0.0
+ */ var Behaviour = /*#__PURE__*/ function(Component) {
+    _inherits(Behaviour, Component);
+    function Behaviour() {
+        return Component.apply(this, arguments);
+    }
+    var _proto = Behaviour.prototype;
+    _proto.setVFXItem = function setVFXItem(item) {
+        Component.prototype.setVFXItem.call(this, item);
+    };
+    _proto.dispose = function dispose() {
+        Component.prototype.dispose.call(this);
+    };
+    return Behaviour;
+}(Component);
 
 /**
  * 所有渲染组件的基类
@@ -4754,19 +4795,14 @@ __decorate([
     function RendererComponent() {
         var _this;
         _this = Component.apply(this, arguments) || this;
-        _this.isStartCalled = false;
         _this.materials = [];
         _this._priority = 0;
-        _this._enabled = true;
         return _this;
     }
     var _proto = RendererComponent.prototype;
-    _proto.onEnable = function onEnable() {};
-    _proto.start = function start() {};
-    _proto.update = function update(dt) {};
-    _proto.lateUpdate = function lateUpdate(dt) {};
     _proto.render = function render(renderer) {};
-    _proto.onAttached = function onAttached() {
+    _proto.setVFXItem = function setVFXItem(item) {
+        Component.prototype.setVFXItem.call(this, item);
         this.item.rendererComponents.push(this);
     };
     _proto.fromData = function fromData(data) {
@@ -4791,26 +4827,6 @@ __decorate([
                 this._priority = value;
             }
         },
-        {
-            key: "enabled",
-            get: function get() {
-                return this._enabled;
-            },
-            set: function set(value) {
-                this._enabled = value;
-                if (value) {
-                    this.onEnable();
-                }
-            }
-        },
-        {
-            key: "isActiveAndEnabled",
-            get: /**
-   * 组件是否可以更新，true 更新，false 不更新
-   */ function get() {
-                return this.item.getVisible() && this.enabled;
-            }
-        },
         {
             key: "material",
             get: function get() {
@@ -4833,9 +4849,6 @@ __decorate([
 __decorate([
     serialize()
 ], RendererComponent.prototype, "_priority", void 0);
-__decorate([
-    serialize()
-], RendererComponent.prototype, "_enabled", void 0);
 
 /**
  * 抽象插件类
@@ -4879,7 +4892,7 @@ exports.CameraController = /*#__PURE__*/ function(Behaviour) {
         return _this;
     }
     var _proto = CameraController.prototype;
-    _proto.update = function update() {
+    _proto.onUpdate = function onUpdate() {
         if (this.item.composition && this.item.transform.getValid()) {
             var camera = this.item.composition.camera;
             camera.near = this.options.near;
@@ -8111,7 +8124,7 @@ function _loadVideo() {
                         }, true);
                     }
                     video.addEventListener("error", function(e) {
-                        reject(e);
+                        reject("Load video fail.");
                     });
                 })
             ];
@@ -13277,7 +13290,7 @@ exports.InteractComponent = /*#__PURE__*/ function(RendererComponent) {
         return _this;
     }
     var _proto = InteractComponent.prototype;
-    _proto.start = function start() {
+    _proto.onStart = function onStart() {
         var _this = this;
         var options = this.item.props.content.options;
         var env = this.item.engine.renderer.env;
@@ -13313,8 +13326,11 @@ exports.InteractComponent = /*#__PURE__*/ function(RendererComponent) {
             }
         };
     };
-    _proto.update = function update(dt) {
+    _proto.onUpdate = function onUpdate(dt) {
         var _this_previewContent;
+        if (!this.isActiveAndEnabled) {
+            return;
+        }
         (_this_previewContent = this.previewContent) == null ? void 0 : _this_previewContent.updateMesh();
         if (!this.hasBeenAddedToComposition && this.item.composition) {
             var options = this.item.props.content.options;
@@ -13585,7 +13601,6 @@ function _assert_this_initialized(self) {
 /**
  * 动画图，负责更新所有的动画节点
  * @since 2.0.0
- * @internal
  */ var PlayableGraph = /*#__PURE__*/ function() {
     function PlayableGraph() {
         this.playableOutputs = [];
@@ -13645,7 +13660,6 @@ function _assert_this_initialized(self) {
 /**
  * 动画图可播放节点对象
  * @since 2.0.0
- * @internal
  */ var Playable = /*#__PURE__*/ function() {
     function Playable(graph, inputCount) {
         if (inputCount === void 0) inputCount = 0;
@@ -13659,6 +13673,9 @@ function _assert_this_initialized(self) {
         this.outputs = [];
         this.playState = 0;
         this.traversalMode = 0;
+        /**
+   * 当前本地播放的时间
+   */ this.time = 0;
         graph.addPlayable(this);
         this.inputs = new Array(inputCount);
         this.inputOuputPorts = new Array(inputCount);
@@ -13843,7 +13860,6 @@ function _assert_this_initialized(self) {
 /**
  * 动画图输出节点对象，将动画数据采样到绑定的元素属性上
  * @since 2.0.0
- * @internal
  */ var PlayableOutput = /*#__PURE__*/ function() {
     function PlayableOutput() {
         this.sourceOutputPort = 0;
@@ -13926,13 +13942,17 @@ var SpriteColorPlayable = /*#__PURE__*/ function(Playable) {
         if (!_instanceof1(boundObject, exports.VFXItem)) {
             return;
         }
+        if (!this.spriteComponent) {
+            this.spriteComponent = boundObject.getComponent(exports.SpriteComponent);
+        }
         if (!this.spriteMaterial) {
-            this.spriteMaterial = boundObject.getComponent(exports.SpriteComponent).material;
+            this.spriteMaterial = this.spriteComponent.material;
             var startColor = this.spriteMaterial.getVector4("_Color");
             if (startColor) {
                 this.startColor = startColor.toArray();
             }
         }
+        this.spriteComponent.setAnimationTime(this.time);
         var colorInc = vecFill(tempColor, 1);
         var colorChanged;
         var life = this.time / boundObject.duration;
@@ -13992,7 +14012,6 @@ exports.SpriteComponent = /*#__PURE__*/ function(RendererComponent) {
         _this = RendererComponent.call(this, engine) || this;
         _this.cachePrefix = "-";
         _this.frameAnimationLoop = false;
-        _this.frameAnimationTime = 0;
         _this.color = [
             1,
             1,
@@ -14000,6 +14019,8 @@ exports.SpriteComponent = /*#__PURE__*/ function(RendererComponent) {
             1
         ];
         _this.visible = true;
+        _this.isManualTimeSet = false;
+        _this.frameAnimationTime = 0;
         _this.getHitTestParams = function(force) {
             var ui = _this.interaction;
             if (force || ui) {
@@ -14082,6 +14103,12 @@ exports.SpriteComponent = /*#__PURE__*/ function(RendererComponent) {
         this.renderer.texture = texture;
         this.material.setTexture("uSampler0", texture);
     };
+    /**
+   * @internal
+   */ _proto.setAnimationTime = function setAnimationTime(time) {
+        this.frameAnimationTime = time;
+        this.isManualTimeSet = true;
+    };
     _proto.render = function render(renderer) {
         if (!this.getVisible()) {
             return;
@@ -14094,14 +14121,14 @@ exports.SpriteComponent = /*#__PURE__*/ function(RendererComponent) {
         this.material.setVector2("_Size", this.transform.size);
         renderer.drawGeometry(geo, material);
     };
-    _proto.start = function start() {
+    _proto.onStart = function onStart() {
         this.item.getHitTestParams = this.getHitTestParams;
-        if (this.item.endBehavior === EndBehavior.restart) {
-            this.frameAnimationLoop = true;
-        }
     };
-    _proto.update = function update(dt) {
-        this.frameAnimationTime += dt / 1000;
+    _proto.onUpdate = function onUpdate(dt) {
+        if (!this.isManualTimeSet) {
+            this.frameAnimationTime += dt / 1000;
+            this.isManualTimeSet = false;
+        }
         var time = this.frameAnimationTime;
         var duration = this.item.duration;
         if (time > duration && this.frameAnimationLoop) {
@@ -16496,7 +16523,6 @@ function getTrailMeshShader(trails, particleMaxCount, name, gpuCapability, env)
 
 /**
  * @since 2.0.0
- * @internal
  */ var ParticleSystemRenderer = /*#__PURE__*/ function(RendererComponent) {
     _inherits(ParticleSystemRenderer, RendererComponent);
     function ParticleSystemRenderer(engine, particleMeshProps, trailMeshProps) {
@@ -16521,15 +16547,15 @@ function getTrailMeshShader(trails, particleMaxCount, name, gpuCapability, env)
         return _this;
     }
     var _proto = ParticleSystemRenderer.prototype;
-    _proto.start = function start() {
+    _proto.onStart = function onStart() {
         this._priority = this.item.renderOrder;
         this.particleMesh.gravityModifier.scaleXCoord(this.item.duration);
         for(var _iterator = _create_for_of_iterator_helper_loose(this.meshes), _step; !(_step = _iterator()).done;){
             var mesh = _step.value;
-            mesh.start();
+            mesh.onStart();
         }
     };
-    _proto.update = function update(dt) {
+    _proto.onUpdate = function onUpdate(dt) {
         var time = this.particleMesh.time;
         this.particleMesh.mesh.material.setVector4("uParams", new Vector4(time, this.item.duration, 0, 0));
     };
@@ -16753,7 +16779,7 @@ exports.ParticleSystem = /*#__PURE__*/ function(Component) {
     _proto.getTextures = function getTextures() {
         return this.renderer.getTextures();
     };
-    _proto.start = function start() {
+    _proto.startEmit = function startEmit() {
         if (!this.started || this.ended) {
             this.reset();
             this.started = true;
@@ -16779,7 +16805,7 @@ exports.ParticleSystem = /*#__PURE__*/ function(Component) {
         this.frozen = false;
         this.ended = false;
     };
-    _proto.onUpdate = function onUpdate(delta) {
+    _proto.update = function update(delta) {
         var _this = this;
         if (this.started && !this.frozen) {
             var now = this.lastUpdate + delta / 1000;
@@ -17562,7 +17588,6 @@ function randomArrItem(arr, keepArr) {
 
 /**
  * @since 2.0.0
- * @internal
  */ var ParticleBehaviourPlayable = /*#__PURE__*/ function(Playable) {
     _inherits(ParticleBehaviourPlayable, Playable);
     function ParticleBehaviourPlayable() {
@@ -17580,7 +17605,7 @@ function randomArrItem(arr, keepArr) {
         this.particleSystem = boundObject.getComponent(exports.ParticleSystem);
         if (this.particleSystem) {
             this.particleSystem.name = boundObject.name;
-            this.particleSystem.start();
+            this.particleSystem.startEmit();
             this.particleSystem.initEmitterTransform();
         }
     };
@@ -17600,7 +17625,7 @@ function randomArrItem(arr, keepArr) {
             if (Math.abs(this.time - this.lastTime) < 0.001) {
                 deltaTime = 0;
             }
-            particleSystem.onUpdate(deltaTime);
+            particleSystem.update(deltaTime);
         }
         this.lastTime = this.time;
     };
@@ -18622,7 +18647,6 @@ var tempSize = new Vector3(1, 1, 1);
 var tempPos = new Vector3();
 /**
  * @since 2.0.0
- * @internal
  */ var TransformAnimationPlayable = /*#__PURE__*/ function(AnimationPlayable) {
     _inherits(TransformAnimationPlayable, AnimationPlayable);
     function TransformAnimationPlayable() {
@@ -18784,7 +18808,6 @@ exports.TransformPlayableAsset = __decorate([
 ], exports.TransformPlayableAsset);
 /**
  * @since 2.0.0
- * @internal
  */ var ActivationPlayable = /*#__PURE__*/ function(Playable) {
     _inherits(ActivationPlayable, Playable);
     function ActivationPlayable() {
@@ -18935,7 +18958,6 @@ var AnimationClipPlayable = /*#__PURE__*/ function(Playable) {
 
 /**
  * @since 2.0.0
- * @internal
  */ var TimelineClip = /*#__PURE__*/ function() {
     function TimelineClip() {
         this.start = 0;
@@ -19333,25 +19355,15 @@ var TrackSortWrapper = function TrackSortWrapper(track, originalIndex) {
     this.track = track;
     this.originalIndex = originalIndex;
 };
-function isAncestor(ancestorCandidate, descendantCandidate) {
-    var current = descendantCandidate.parent;
-    while(current){
-        if (current === ancestorCandidate) {
-            return true;
-        }
-        current = current.parent;
-    }
-    return false;
-}
 function compareTracks(a, b) {
     var bindingA = a.track.binding;
     var bindingB = b.track.binding;
     if (!_instanceof1(bindingA, exports.VFXItem) || !_instanceof1(bindingB, exports.VFXItem)) {
         return a.originalIndex - b.originalIndex;
     }
-    if (isAncestor(bindingA, bindingB)) {
+    if (exports.VFXItem.isAncestor(bindingA, bindingB)) {
         return -1;
-    } else if (isAncestor(bindingB, bindingA)) {
+    } else if (exports.VFXItem.isAncestor(bindingB, bindingA)) {
         return 1;
     } else {
         return a.originalIndex - b.originalIndex; // 非父子关系的元素保持原始顺序
@@ -19360,7 +19372,6 @@ function compareTracks(a, b) {
 
 /**
  * @since 2.0.0
- * @internal
  */ var CompositionComponent = /*#__PURE__*/ function(Behaviour) {
     _inherits(CompositionComponent, Behaviour);
     function CompositionComponent() {
@@ -19376,7 +19387,7 @@ function compareTracks(a, b) {
         return _this;
     }
     var _proto = CompositionComponent.prototype;
-    _proto.start = function start() {
+    _proto.onStart = function onStart() {
         var _this_item_props = this.item.props, _this_item_props_startTime = _this_item_props.startTime, startTime = _this_item_props_startTime === void 0 ? 0 : _this_item_props_startTime;
         this.startTime = startTime;
         this.resolveBindings();
@@ -19404,7 +19415,7 @@ function compareTracks(a, b) {
     _proto.getReusable = function getReusable() {
         return this.reusable;
     };
-    _proto.update = function update(dt) {
+    _proto.onUpdate = function onUpdate(dt) {
         var time = this.time;
         this.timelinePlayable.setTime(time);
         this.graph.evaluate(dt);
@@ -19440,7 +19451,9 @@ function compareTracks(a, b) {
                     props.content = itemData.content;
                     item = assetLoader.loadGUID(itemData.id);
                     item.composition = this.item.composition;
-                    var compositionComponent = item.addComponent(CompositionComponent);
+                    var compositionComponent = new CompositionComponent(this.engine);
+                    compositionComponent.item = item;
+                    item.components.push(compositionComponent);
                     compositionComponent.data = props;
                     compositionComponent.refId = refId;
                     item.transform.parentTransform = this.transform;
@@ -19851,8 +19864,8 @@ exports.TextComponent = /*#__PURE__*/ function(SpriteComponent) {
         return _this;
     }
     var _proto = TextComponent.prototype;
-    _proto.update = function update(dt) {
-        SpriteComponent.prototype.update.call(this, dt);
+    _proto.onUpdate = function onUpdate(dt) {
+        SpriteComponent.prototype.onUpdate.call(this, dt);
         this.updateTexture();
     };
     _proto.fromData = function fromData(data) {
@@ -20267,7 +20280,7 @@ exports.EffectComponent = /*#__PURE__*/ function(RendererComponent) {
         return _this;
     }
     var _proto = EffectComponent.prototype;
-    _proto.start = function start() {
+    _proto.onStart = function onStart() {
         this.item.getHitTestParams = this.getHitTestParams;
     };
     _proto.render = function render(renderer) {
@@ -20394,7 +20407,7 @@ exports.PostProcessVolume = /*#__PURE__*/ function(Behaviour) {
         return _this;
     }
     var _proto = PostProcessVolume.prototype;
-    _proto.start = function start() {
+    _proto.onStart = function onStart() {
         var composition = this.item.composition;
         if (composition) {
             composition.globalVolume = this;
@@ -20536,8 +20549,8 @@ exports.VFXItem = /*#__PURE__*/ function(EffectsObject) {
    */ _this.ended = false;
         _this.reusable = false;
         _this.type = ItemType.base;
+        _this.isDuringPlay = false;
         _this.components = [];
-        _this.itemBehaviours = [];
         _this.rendererComponents = [];
         /**
    * 元素可见性，该值的改变会触发 `handleVisibleChanged` 回调
@@ -20547,6 +20560,7 @@ exports.VFXItem = /*#__PURE__*/ function(EffectsObject) {
    * 元素动画的速度
    */ _this.speed = 1;
         _this.listIndex = 0;
+        _this.isEnabled = false;
         _this.eventProcessor = new EventEmitter();
         _this.name = "VFXItem";
         _this.transform.name = _this.name;
@@ -20619,8 +20633,7 @@ exports.VFXItem = /*#__PURE__*/ function(EffectsObject) {
    */ _proto.addComponent = function addComponent(classConstructor) {
         var newComponent = new classConstructor(this.engine);
         this.components.push(newComponent);
-        newComponent.item = this;
-        newComponent.onAttached();
+        newComponent.setVFXItem(this);
         return newComponent;
     };
     /**
@@ -20653,21 +20666,22 @@ exports.VFXItem = /*#__PURE__*/ function(EffectsObject) {
         return res;
     };
     _proto.setParent = function setParent(vfxItem) {
-        if (vfxItem === this) {
+        if (vfxItem === this && !vfxItem) {
             return;
         }
         if (this.parent) {
             removeItem(this.parent.children, this);
         }
         this.parent = vfxItem;
-        if (vfxItem) {
-            if (!VFXItem.isCamera(this)) {
-                this.transform.parentTransform = vfxItem.transform;
-            }
-            vfxItem.children.push(this);
-            if (!this.composition) {
-                this.composition = vfxItem.composition;
-            }
+        if (!VFXItem.isCamera(this)) {
+            this.transform.parentTransform = vfxItem.transform;
+        }
+        vfxItem.children.push(this);
+        if (!this.composition) {
+            this.composition = vfxItem.composition;
+        }
+        if (!this.isDuringPlay && vfxItem.isDuringPlay) {
+            this.beginPlay();
         }
     };
     /**
@@ -20698,6 +20712,7 @@ exports.VFXItem = /*#__PURE__*/ function(EffectsObject) {
    */ _proto.setVisible = function setVisible(visible) {
         if (this.visible !== visible) {
             this.visible = !!visible;
+            this.onActiveChanged();
         }
     };
     /**
@@ -20822,6 +20837,57 @@ exports.VFXItem = /*#__PURE__*/ function(EffectsObject) {
         }
         return undefined;
     };
+    /**
+   * @internal
+   */ _proto.beginPlay = function beginPlay() {
+        this.isDuringPlay = true;
+        if (this.composition && this.visible && !this.isEnabled) {
+            this.onEnable();
+        }
+        for(var _iterator = _create_for_of_iterator_helper_loose(this.children), _step; !(_step = _iterator()).done;){
+            var child = _step.value;
+            if (!child.isDuringPlay) {
+                child.beginPlay();
+            }
+        }
+    };
+    /**
+   * @internal
+   */ _proto.onActiveChanged = function onActiveChanged() {
+        if (!this.isEnabled) {
+            this.onEnable();
+        } else {
+            this.onDisable();
+        }
+    };
+    /**
+   * @internal
+   */ _proto.onEnable = function onEnable() {
+        this.isEnabled = true;
+        for(var _iterator = _create_for_of_iterator_helper_loose(this.components), _step; !(_step = _iterator()).done;){
+            var component = _step.value;
+            if (component.enabled && !component.isStartCalled) {
+                component.onStart();
+            }
+        }
+        for(var _iterator1 = _create_for_of_iterator_helper_loose(this.components), _step1; !(_step1 = _iterator1()).done;){
+            var component1 = _step1.value;
+            if (component1.enabled && !component1.isEnableCalled) {
+                component1.enable();
+            }
+        }
+    };
+    /**
+   * @internal
+   */ _proto.onDisable = function onDisable() {
+        this.isEnabled = false;
+        for(var _iterator = _create_for_of_iterator_helper_loose(this.components), _step; !(_step = _iterator()).done;){
+            var component = _step.value;
+            if (component.enabled && component.isEnableCalled) {
+                component.disable();
+            }
+        }
+    };
     _proto.fromData = function fromData(data) {
         EffectsObject.prototype.fromData.call(this, data);
         var id = data.id, name = data.name, delay = data.delay, parentId = data.parentId, endBehavior = data.endBehavior, transform = data.transform, _data_listIndex = data.listIndex, listIndex = _data_listIndex === void 0 ? 0 : _data_listIndex, _data_duration = data.duration, duration = _data_duration === void 0 ? 0 : _data_duration;
@@ -20871,14 +20937,10 @@ exports.VFXItem = /*#__PURE__*/ function(EffectsObject) {
         if (duration <= 0) {
             throw new Error("Item duration can't be less than 0, see " + HELP_LINK["Item duration can't be less than 0"] + ".");
         }
-        this.itemBehaviours.length = 0;
         this.rendererComponents.length = 0;
         for(var _iterator = _create_for_of_iterator_helper_loose(this.components), _step; !(_step = _iterator()).done;){
             var component = _step.value;
             component.item = this;
-            if (_instanceof1(component, Behaviour)) {
-                this.itemBehaviours.push(component);
-            }
             if (_instanceof1(component, RendererComponent)) {
                 this.rendererComponents.push(component);
             }
@@ -20983,6 +21045,16 @@ exports.VFXItem = /*#__PURE__*/ function(EffectsObject) {
     VFXItem.isExtraCamera = function isExtraCamera(item) {
         return item.id === "extra-camera" && item.name === "extra-camera";
     };
+    VFXItem.isAncestor = function isAncestor(ancestorCandidate, descendantCandidate) {
+        var current = descendantCandidate.parent;
+        while(current){
+            if (current === ancestorCandidate) {
+                return true;
+            }
+            current = current.parent;
+        }
+        return false;
+    };
     _create_class(VFXItem, [
         {
             key: "content",
@@ -21649,7 +21721,6 @@ var SerializationHelper = /*#__PURE__*/ function() {
 
 /**
  * @since 2.0.0
- * @internal
  */ var AssetLoader = /*#__PURE__*/ function() {
     function AssetLoader(engine) {
         this.engine = engine;
@@ -24121,7 +24192,7 @@ var seed$1 = 1;
                                 ];
                             case 6:
                                 e = _state.sent();
-                                throw new Error("Failed to load. Check the template or if the URL is " + (isVideo ? "video" : "image") + " type, URL: " + url + ", Error: " + e.message + ".");
+                                throw new Error("Failed to load. Check the template or if the URL is " + (isVideo ? "video" : "image") + " type, URL: " + url + ", Error: " + (e.message || e) + ".");
                             case 7:
                                 return [
                                     3,
@@ -24856,6 +24927,109 @@ var listOrder = 0;
     return CompositionSourceManager;
 }();
 
+var SceneTicking = /*#__PURE__*/ function() {
+    function SceneTicking() {
+        this.update = new UpdateTickData();
+        this.lateUpdate = new LateUpdateTickData();
+    }
+    var _proto = SceneTicking.prototype;
+    _proto.addComponent = function addComponent(obj) {
+        if (obj.onUpdate !== Component.prototype.onUpdate) {
+            this.update.addComponent(obj);
+        }
+        if (obj.onLateUpdate !== Component.prototype.onLateUpdate) {
+            this.lateUpdate.addComponent(obj);
+        }
+    };
+    _proto.removeComponent = function removeComponent(obj) {
+        if (obj.onUpdate !== Component.prototype.onUpdate) {
+            this.update.removeComponent(obj);
+        }
+        if (obj.onLateUpdate !== Component.prototype.onLateUpdate) {
+            this.lateUpdate.removeComponent(obj);
+        }
+    };
+    _proto.clear = function clear() {
+        this.update.clear();
+        this.lateUpdate.clear();
+    };
+    return SceneTicking;
+}();
+var TickData = /*#__PURE__*/ function() {
+    function TickData() {
+        this.components = [];
+        this.ticks = [];
+    }
+    var _proto = TickData.prototype;
+    _proto.tick = function tick(dt) {
+        this.tickComponents(this.components, dt);
+        for(var i = 0; i < this.ticks.length; i++){
+            this.ticks[i](dt);
+        }
+    };
+    _proto.tickComponents = function tickComponents(components, dt) {
+    // To be implemented in derived classes
+    };
+    _proto.addComponent = function addComponent(component) {
+        if (!this.components.includes(component)) {
+            this.components.push(component);
+        }
+    };
+    _proto.removeComponent = function removeComponent(component) {
+        var index = this.components.indexOf(component);
+        if (index > -1) {
+            this.components.splice(index, 1);
+        }
+    };
+    _proto.addTick = function addTick(method, callee) {
+        var tick = method.bind(callee);
+        if (!this.ticks.includes(tick)) {
+            this.ticks.push(tick);
+        }
+    };
+    _proto.clear = function clear() {
+        this.components = [];
+    };
+    return TickData;
+}();
+var UpdateTickData = /*#__PURE__*/ function(TickData) {
+    _inherits(UpdateTickData, TickData);
+    function UpdateTickData() {
+        return TickData.apply(this, arguments);
+    }
+    var _proto = UpdateTickData.prototype;
+    _proto.tickComponents = function tickComponents(components, dt) {
+        for(var _iterator = _create_for_of_iterator_helper_loose(components), _step; !(_step = _iterator()).done;){
+            var component = _step.value;
+            component.onUpdate(dt);
+        }
+    };
+    return UpdateTickData;
+}(TickData);
+var LateUpdateTickData = /*#__PURE__*/ function(TickData) {
+    _inherits(LateUpdateTickData, TickData);
+    function LateUpdateTickData() {
+        return TickData.apply(this, arguments);
+    }
+    var _proto = LateUpdateTickData.prototype;
+    _proto.tickComponents = function tickComponents(components, dt) {
+        for(var _iterator = _create_for_of_iterator_helper_loose(components), _step; !(_step = _iterator()).done;){
+            var component = _step.value;
+            component.onLateUpdate(dt);
+        }
+    };
+    return LateUpdateTickData;
+} // function compareComponents (a: Component, b: Component): number {
+ //   const itemA = a.item;
+ //   const itemB = b.item;
+ //   if (VFXItem.isAncestor(itemA, itemB)) {
+ //     return -1;
+ //   } else {
+ //     return 1;
+ //   }
+ // }
+(TickData);
+
 /**
  * 合成抽象类：核心对象，通常一个场景只包含一个合成，可能会有多个合成。
  * 合成中包含了相关的 Item 元素，支持对 Item 元素的创建、更新和销毁。
@@ -24865,6 +25039,7 @@ var listOrder = 0;
     function Composition(props, scene) {
         var _this;
         _this = EventEmitter.call(this) || this;
+        _this.sceneTicking = new SceneTicking();
         /**
    * 动画播放速度
    */ _this.speed = 1;
@@ -24902,9 +25077,12 @@ var listOrder = 0;
         _this.rootItem = new exports.VFXItem(_this.getEngine(), sourceContent);
         _this.rootItem.name = "rootItem";
         _this.rootItem.composition = _assert_this_initialized(_this);
-        _this.rootComposition = _this.rootItem.addComponent(CompositionComponent);
+        // Spawn rootCompositionComponent
+        _this.rootComposition = new CompositionComponent(_this.getEngine());
         _this.rootComposition.startTime = sourceContent.startTime;
         _this.rootComposition.data = sourceContent;
+        _this.rootComposition.item = _this.rootItem;
+        _this.rootItem.components.push(_this.rootComposition);
         var imageUsage = !reusable && imgUsage;
         _this.width = width;
         _this.height = height;
@@ -24938,7 +25116,6 @@ var listOrder = 0;
         _this.rendererOptions = null;
         _this.rootComposition.createContent();
         _this.buildItemTree(_this.rootItem);
-        _this.callAwake(_this.rootItem);
         _this.rootItem.onEnd = function() {
             window.setTimeout(function() {
                 _this.emit("end", {
@@ -24950,6 +25127,16 @@ var listOrder = 0;
         return _this;
     }
     var _proto = Composition.prototype;
+    _proto.initializeSceneTicking = function initializeSceneTicking(item) {
+        for(var _iterator = _create_for_of_iterator_helper_loose(item.components), _step; !(_step = _iterator()).done;){
+            var component = _step.value;
+            this.sceneTicking.addComponent(component);
+        }
+        for(var _iterator1 = _create_for_of_iterator_helper_loose(item.children), _step1; !(_step1 = _iterator1()).done;){
+            var child = _step1.value;
+            this.initializeSceneTicking(child);
+        }
+    };
     /**
    * 获取合成的时长
    */ _proto.getDuration = function getDuration() {
@@ -25052,7 +25239,7 @@ var listOrder = 0;
             this.resume();
         }
         if (!this.rootComposition.isStartCalled) {
-            this.rootComposition.start();
+            this.rootComposition.onStart();
             this.rootComposition.isStartCalled = true;
         }
         this.forwardTime(time + this.startTime);
@@ -25129,9 +25316,12 @@ var listOrder = 0;
         // 更新 model-tree-plugin
         this.updatePluginLoaders(deltaTime);
         // scene VFXItem components lifetime function.
-        this.callStart(this.rootItem);
-        this.callUpdate(this.rootItem, time);
-        this.callLateUpdate(this.rootItem, time);
+        if (!this.rootItem.isDuringPlay) {
+            this.callAwake(this.rootItem);
+            this.rootItem.beginPlay();
+        }
+        this.sceneTicking.update.tick(time);
+        this.sceneTicking.lateUpdate.tick(time);
         this.updateCamera();
         this.prepareRender();
         if (this.shouldDispose()) {
@@ -25184,11 +25374,11 @@ var listOrder = 0;
         return t;
     };
     _proto.callAwake = function callAwake(item) {
-        for(var _iterator = _create_for_of_iterator_helper_loose(item.itemBehaviours), _step; !(_step = _iterator()).done;){
-            var itemBehaviour = _step.value;
-            if (!itemBehaviour.isAwakeCalled) {
-                itemBehaviour.awake();
-                itemBehaviour.isAwakeCalled = true;
+        for(var _iterator = _create_for_of_iterator_helper_loose(item.components), _step; !(_step = _iterator()).done;){
+            var component = _step.value;
+            if (!component.isAwakeCalled) {
+                component.onAwake();
+                component.isAwakeCalled = true;
             }
         }
         for(var _iterator1 = _create_for_of_iterator_helper_loose(item.children), _step1; !(_step1 = _iterator1()).done;){
@@ -25196,72 +25386,6 @@ var listOrder = 0;
             this.callAwake(child);
         }
     };
-    _proto.callStart = function callStart(item) {
-        for(var _iterator = _create_for_of_iterator_helper_loose(item.itemBehaviours), _step; !(_step = _iterator()).done;){
-            var itemBehaviour = _step.value;
-            if (itemBehaviour.isActiveAndEnabled && !itemBehaviour.isStartCalled) {
-                itemBehaviour.start();
-                itemBehaviour.isStartCalled = true;
-            }
-        }
-        for(var _iterator1 = _create_for_of_iterator_helper_loose(item.rendererComponents), _step1; !(_step1 = _iterator1()).done;){
-            var rendererComponent = _step1.value;
-            if (rendererComponent.isActiveAndEnabled && !rendererComponent.isStartCalled) {
-                rendererComponent.start();
-                rendererComponent.isStartCalled = true;
-            }
-        }
-        for(var _iterator2 = _create_for_of_iterator_helper_loose(item.children), _step2; !(_step2 = _iterator2()).done;){
-            var child = _step2.value;
-            this.callStart(child);
-        }
-    };
-    _proto.callUpdate = function callUpdate(item, dt) {
-        for(var _iterator = _create_for_of_iterator_helper_loose(item.itemBehaviours), _step; !(_step = _iterator()).done;){
-            var itemBehaviour = _step.value;
-            if (itemBehaviour.isActiveAndEnabled && itemBehaviour.isStartCalled) {
-                itemBehaviour.update(dt);
-            }
-        }
-        for(var _iterator1 = _create_for_of_iterator_helper_loose(item.rendererComponents), _step1; !(_step1 = _iterator1()).done;){
-            var rendererComponent = _step1.value;
-            if (rendererComponent.isActiveAndEnabled && rendererComponent.isStartCalled) {
-                rendererComponent.update(dt);
-            }
-        }
-        for(var _iterator2 = _create_for_of_iterator_helper_loose(item.children), _step2; !(_step2 = _iterator2()).done;){
-            var child = _step2.value;
-            if (exports.VFXItem.isComposition(child)) {
-                if (child.ended && child.endBehavior === EndBehavior.restart) {
-                    child.ended = false;
-                    // TODO K帧动画在元素重建后需要 tick ，否则会导致元素位置和 k 帧第一帧位置不一致
-                    this.callUpdate(child, 0);
-                } else {
-                    this.callUpdate(child, dt);
-                }
-            } else {
-                this.callUpdate(child, dt);
-            }
-        }
-    };
-    _proto.callLateUpdate = function callLateUpdate(item, dt) {
-        for(var _iterator = _create_for_of_iterator_helper_loose(item.itemBehaviours), _step; !(_step = _iterator()).done;){
-            var itemBehaviour = _step.value;
-            if (itemBehaviour.isActiveAndEnabled && itemBehaviour.isStartCalled) {
-                itemBehaviour.lateUpdate(dt);
-            }
-        }
-        for(var _iterator1 = _create_for_of_iterator_helper_loose(item.rendererComponents), _step1; !(_step1 = _iterator1()).done;){
-            var rendererComponent = _step1.value;
-            if (rendererComponent.isActiveAndEnabled && rendererComponent.isStartCalled) {
-                rendererComponent.lateUpdate(dt);
-            }
-        }
-        for(var _iterator2 = _create_for_of_iterator_helper_loose(item.children), _step2; !(_step2 = _iterator2()).done;){
-            var child = _step2.value;
-            this.callLateUpdate(child, dt);
-        }
-    };
     /**
    * 构建父子树，同时保存到 itemCacheMap 中便于查找
    */ _proto.buildItemTree = function buildItemTree(compVFXItem) {
@@ -27135,7 +27259,6 @@ var FBGeometryDataT = /*#__PURE__*/ function() {
 
 /**
  * @since 2.0.0
- * @internal
  */ var EffectsPackage = /*#__PURE__*/ function() {
     function EffectsPackage() {
         this.exportObjectDatas = [];
@@ -27544,11 +27667,12 @@ var FBGeometryDataT = /*#__PURE__*/ function() {
     return Engine;
 }();
 
+var DEFAULT_FPS = 60;
 /**
  * 定时器类
  */ var Ticker = /*#__PURE__*/ function() {
     function Ticker(fps) {
-        if (fps === void 0) fps = 60;
+        if (fps === void 0) fps = DEFAULT_FPS;
         this.paused = true;
         this.lastTime = 0;
         // deltaTime
@@ -27683,7 +27807,7 @@ registerPlugin("sprite", SpriteLoader, exports.VFXItem, true);
 registerPlugin("particle", ParticleLoader, exports.VFXItem, true);
 registerPlugin("cal", CalculateLoader, exports.VFXItem, true);
 registerPlugin("interact", InteractLoader, exports.VFXItem, true);
-var version$1 = "2.0.2";
+var version$1 = "2.1.0-alpha.0";
 logger.info("Core version: " + version$1 + ".");
 
 var _obj;
@@ -28616,8 +28740,8 @@ var seed = 1;
         this.material = mtl;
         this.mesh.material = mtl.material;
     };
-    _proto.start = function start() {
-        Mesh.prototype.start.call(this);
+    _proto.onStart = function onStart() {
+        Mesh.prototype.onStart.call(this);
         this.engine.threeGroup.add(this.mesh);
     };
     /**
@@ -29224,8 +29348,8 @@ exports.ThreeSpriteComponent = /*#__PURE__*/ function(SpriteComponent) {
             }
         }
     };
-    _proto.start = function start() {
-        SpriteComponent.prototype.start.call(this);
+    _proto.onStart = function onStart() {
+        SpriteComponent.prototype.onStart.call(this);
         this.engine.threeGroup.add(this.threeMesh);
     };
     _proto.render = function render(renderer) {
@@ -29296,8 +29420,8 @@ exports.ThreeTextComponent = /*#__PURE__*/ function(ThreeSpriteComponent) {
         return _this;
     }
     var _proto = ThreeTextComponent.prototype;
-    _proto.update = function update(dt) {
-        ThreeSpriteComponent.prototype.update.call(this, dt);
+    _proto.onUpdate = function onUpdate(dt) {
+        ThreeSpriteComponent.prototype.onUpdate.call(this, dt);
         this.updateTexture(false);
     };
     _proto.fromData = function fromData(data) {
@@ -29364,7 +29488,7 @@ setMaxSpriteMeshItemCount(8);
  */ Mesh.create = function(engine, props) {
     return new ThreeMesh(engine, props);
 };
-var version = "2.0.2";
+var version = "2.1.0-alpha.0";
 logger.info("THREEJS plugin version: " + version + ".");
 
 exports.AbstractPlugin = AbstractPlugin;
@@ -29392,6 +29516,7 @@ exports.Composition = Composition;
 exports.CompositionComponent = CompositionComponent;
 exports.CompositionSourceManager = CompositionSourceManager;
 exports.DEFAULT_FONTS = DEFAULT_FONTS;
+exports.DEFAULT_FPS = DEFAULT_FPS;
 exports.Database = Database;
 exports.Downloader = Downloader;
 exports.EFFECTS_COPY_MESH_NAME = EFFECTS_COPY_MESH_NAME;