@galacean/effects-threejs 2.0.0-alpha.30 → 2.0.0-alpha.32

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.0-alpha.30
+ * Version: v2.0.0-alpha.32
  */
 
 'use strict';
@@ -4589,15 +4589,97 @@ function getDirectStore(target) {
     return decoratorInitialStore.get(classKey);
 }
 
+function _assert_this_initialized(self) {
+    if (self === void 0) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+    return self;
+}
+
+var EventEmitter = function EventEmitter() {
+    var _this = this;
+    var _this1 = this;
+    this.listeners = {};
+    /**
+   * 移除事件监听器
+   * @param eventName - 事件名称
+   * @param listener - 事件监听器
+   * @returns
+   */ this.off = function(eventName, listener) {
+        if (!_this.listeners[eventName]) {
+            return;
+        }
+        _this.listeners[eventName] = _this.listeners[eventName].filter(function(param) {
+            var l = param.listener;
+            return l !== listener;
+        });
+    };
+    /**
+   * 监听事件
+   * @param eventName - 事件名称
+   * @param listener - 事件监听器
+   * @param options - 事件监听器选项
+   * @returns
+   */ this.on = function(eventName, listener, options) {
+        _this.listeners[eventName] = _this.listeners[eventName] || [];
+        _this.listeners[eventName].push({
+            listener: listener,
+            options: options
+        });
+        return function() {
+            return _this.off(eventName, listener);
+        };
+    };
+    /**
+   * 一次性监听事件
+   * @param eventName - 事件名称
+   * @param listener - 事件监听器
+   */ this.once = function(eventName, listener) {
+        _this.on(eventName, listener, {
+            once: true
+        });
+    };
+    /**
+   * 触发事件
+   * @param eventName - 事件名称
+   * @param args - 事件参数
+   */ this.emit = function(eventName) {
+        for(var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++){
+            args[_key - 1] = arguments[_key];
+        }
+        var _this_listeners_eventName;
+        (_this_listeners_eventName = _this1.listeners[eventName]) == null ? void 0 : _this_listeners_eventName.forEach(function(param) {
+            var listener = param.listener, options = param.options;
+            listener.apply(void 0, [].concat(args));
+            if (options == null ? void 0 : options.once) {
+                _this1.off(eventName, listener);
+            }
+        });
+    };
+    /**
+   * 获取事件名称对应的所有监听器
+   * @param eventName - 事件名称
+   * @returns - 返回事件名称对应的所有监听器
+   */ this.getListeners = function(eventName) {
+        var _this_listeners_eventName;
+        return ((_this_listeners_eventName = _this.listeners[eventName]) == null ? void 0 : _this_listeners_eventName.map(function(param) {
+            var listener = param.listener;
+            return listener;
+        })) || [];
+    };
+};
+
 /**
  * @since 2.0.0
  * @internal
- */ var EffectsObject = /*#__PURE__*/ function() {
+ */ var EffectsObject = /*#__PURE__*/ function(EventEmitter) {
+    _inherits(EffectsObject, EventEmitter);
     function EffectsObject(engine) {
-        this.engine = engine;
-        this.guid = generateGUID();
-        this.taggedProperties = {};
-        this.engine.addInstance(this);
+        var _this;
+        _this = EventEmitter.call(this) || this;
+        _this.engine = engine;
+        _this.guid = generateGUID();
+        _this.taggedProperties = {};
+        _this.engine.addInstance(_assert_this_initialized(_this));
+        return _this;
     }
     var _proto = EffectsObject.prototype;
     _proto.getInstanceId = function getInstanceId() {
@@ -4623,7 +4705,7 @@ function getDirectStore(target) {
         return _instanceof1(obj, EffectsObject) && "guid" in obj;
     };
     return EffectsObject;
-}();
+}(EventEmitter);
 
 /**
  * @since 2.0.0
@@ -8434,7 +8516,8 @@ var seed$a = 1;
                         texture = Texture.create(engine, {
                             sourceType: exports.TextureSourceType.image,
                             image: image,
-                            id: generateGUID()
+                            id: generateGUID(),
+                            flipY: true
                         });
                         texture.initialize();
                         return [
@@ -9012,6 +9095,9 @@ exports.MaterialRenderType = void 0;
    * 初始化 GPU 资源
    * @override
    */ _proto.initialize = function initialize() {
+    // OVERRIDE
+    };
+    _proto.createShaderVariant = function createShaderVariant() {
     // OVERRIDE
     };
     _proto.use = function use(render, globalUniforms) {
@@ -12722,6 +12808,7 @@ var GlobalUniforms = function GlobalUniforms() {
     this.floats = {};
     this.ints = {};
     // vector3s: Record<string, vec3> = {};
+    this.vector4s = {};
     this.matrices = {};
     //...
     this.samplers = [] // 存放的sampler名称。
@@ -12958,6 +13045,9 @@ var Renderer = /*#__PURE__*/ function() {
     _proto.setGlobalInt = function setGlobalInt(name, value) {
     // OVERRIDE
     };
+    _proto.setGlobalVector4 = function setGlobalVector4(name, value) {
+    // OVERRIDE
+    };
     _proto.setGlobalMatrix = function setGlobalMatrix(name, value) {
     // OVERRIDE
     };
@@ -13910,6 +14000,8 @@ exports.SpriteComponent = /*#__PURE__*/ function(RendererComponent) {
     function SpriteComponent(engine, props) {
         var _this;
         _this = RendererComponent.call(this, engine) || this;
+        _this.cachePrefix = "-";
+        _this.frameAnimationLoop = false;
         _this.frameAnimationTime = 0;
         _this.color = [
             1,
@@ -13933,6 +14025,39 @@ exports.SpriteComponent = /*#__PURE__*/ function(RendererComponent) {
                 }
             }
         };
+        _this.name = "MSprite" + seed$4++;
+        _this.renderer = {
+            renderMode: RenderMode.BILLBOARD,
+            blending: BlendingMode.ALPHA,
+            texture: _this.engine.emptyTexture,
+            occlusion: false,
+            transparentOcclusion: false,
+            side: SideMode.DOUBLE,
+            mask: 0,
+            maskMode: MaskMode.NONE,
+            order: 0
+        };
+        _this.emptyTexture = _this.engine.emptyTexture;
+        _this.splits = singleSplits;
+        _this.renderInfo = getImageItemRenderInfo(_assert_this_initialized(_this));
+        var geometry = _this.createGeometry(glContext.TRIANGLES);
+        var material = _this.createMaterial(_this.renderInfo, 2);
+        _this.worldMatrix = Matrix4.fromIdentity();
+        _this.material = material;
+        _this.geometry = geometry;
+        _this.material.setVector4("_Color", new Vector4().setFromArray([
+            1,
+            1,
+            1,
+            1
+        ]));
+        _this.material.setVector4("_TexOffset", new Vector4().setFromArray([
+            0,
+            0,
+            1,
+            1
+        ]));
+        _this.setItem();
         if (props) {
             _this.fromData(props);
         }
@@ -13986,9 +14111,13 @@ exports.SpriteComponent = /*#__PURE__*/ function(RendererComponent) {
         this.frameAnimationTime += dt / 1000;
         var time = this.frameAnimationTime;
         var duration = this.item.duration;
+        if (time > duration && this.frameAnimationLoop) {
+            time = time % duration;
+        }
         var life = Math.min(Math.max(time / duration, 0.0), 1.0);
         var ta = this.textureSheetAnimation;
         if (ta) {
+            var _this_material_getVector4;
             var total = ta.total || ta.row * ta.col;
             var texRectX = 0;
             var texRectY = 0;
@@ -14034,7 +14163,7 @@ exports.SpriteComponent = /*#__PURE__*/ function(RendererComponent) {
                     dy
                 ];
             }
-            this.material.getVector4("_TexOffset").setFromArray([
+            (_this_material_getVector4 = this.material.getVector4("_TexOffset")) == null ? void 0 : _this_material_getVector4.setFromArray([
                 texRectX + texOffset[0],
                 texRectH + texRectY - texOffset[1],
                 dx,
@@ -14047,12 +14176,9 @@ exports.SpriteComponent = /*#__PURE__*/ function(RendererComponent) {
             this.item.composition.destroyTextures(this.getTextures());
         }
     };
-    _proto.getItemInitData = function getItemInitData(item, idx, pointStartIndex, textureIndex) {
-        var geoData = item.geoData;
-        if (!geoData) {
-            geoData = item.geoData = this.getItemGeometryData(item, idx);
-        }
-        var index = geoData.index;
+    _proto.getItemInitData = function getItemInitData() {
+        this.geoData = this.getItemGeometryData();
+        var _this_geoData = this.geoData, index = _this_geoData.index, atlasOffset = _this_geoData.atlasOffset;
         var idxCount = index.length;
         // @ts-expect-error
         var indexData = this.wireframe ? new Uint8Array([
@@ -14067,11 +14193,11 @@ exports.SpriteComponent = /*#__PURE__*/ function(RendererComponent) {
         ]) : new index.constructor(idxCount);
         if (!this.wireframe) {
             for(var i = 0; i < idxCount; i++){
-                indexData[i] = pointStartIndex + index[i];
+                indexData[i] = 0 + index[i];
             }
         }
         return {
-            atlasOffset: geoData.atlasOffset,
+            atlasOffset: atlasOffset,
             index: indexData
         };
     };
@@ -14082,8 +14208,7 @@ exports.SpriteComponent = /*#__PURE__*/ function(RendererComponent) {
             addItem(textures, texture);
         }
         texture = this.renderer.texture;
-        var textureIndex = texture ? textures.indexOf(texture) : -1;
-        var data = this.getItemInitData(this, 0, 0, textureIndex);
+        var data = this.getItemInitData();
         var renderer = this.renderer;
         var texParams = this.material.getVector4("_TexParams");
         texParams.x = renderer.occlusion ? +renderer.transparentOcclusion : 1;
@@ -14174,6 +14299,7 @@ exports.SpriteComponent = /*#__PURE__*/ function(RendererComponent) {
         setBlendMode(material, states.blendMode);
         setMaskMode(material, states.maskMode);
         setSideMode(material, states.side);
+        material.shader.shaderData.properties = 'uSampler0("uSampler0",2D) = "white" {}';
         if (!material.hasUniform("_Color")) {
             material.setVector4("_Color", new Vector4(0, 0, 0, 1));
         }
@@ -14185,8 +14311,8 @@ exports.SpriteComponent = /*#__PURE__*/ function(RendererComponent) {
         }
         return material;
     };
-    _proto.getItemGeometryData = function getItemGeometryData(item, aIndex) {
-        var splits = item.splits, renderer = item.renderer, textureSheetAnimation = item.textureSheetAnimation;
+    _proto.getItemGeometryData = function getItemGeometryData() {
+        var _this = this, splits = _this.splits, renderer = _this.renderer, textureSheetAnimation = _this.textureSheetAnimation;
         var sx = 1, sy = 1;
         if (renderer.shape) {
             var _renderer_shape = renderer.shape, _renderer_shape_index = _renderer_shape.index, index = _renderer_shape_index === void 0 ? [] : _renderer_shape_index, _renderer_shape_aPoint = _renderer_shape.aPoint, aPoint = _renderer_shape_aPoint === void 0 ? [] : _renderer_shape_aPoint;
@@ -14341,7 +14467,6 @@ exports.SpriteComponent = /*#__PURE__*/ function(RendererComponent) {
         this.worldMatrix = Matrix4.fromIdentity();
         this.material = material;
         this.geometry = geometry;
-        this.name = "MSprite" + seed$4++;
         var startColor = options.startColor || [
             1,
             1,
@@ -18458,11 +18583,6 @@ var CalculateLoader = /*#__PURE__*/ function(AbstractPlugin) {
     return CalculateLoader;
 }(AbstractPlugin);
 
-function _assert_this_initialized(self) {
-    if (self === void 0) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-    return self;
-}
-
 var AnimationStream = /*#__PURE__*/ function() {
     function AnimationStream(playable) {
         this.curveValues = {};
@@ -19257,6 +19377,9 @@ function compareTracks(a, b) {
         _this.startTime = 0;
         _this.items = [] // 场景的所有元素
         ;
+        /**
+   * 合成是否冻结标志位
+   */ _this.fezzed = false;
         _this.reusable = false;
         _this.sceneBindings = [];
         _this.graph = new PlayableGraph();
@@ -19293,10 +19416,6 @@ function compareTracks(a, b) {
     };
     _proto.update = function update(dt) {
         var time = this.time;
-        // 主合成 rootItem 没有绑定轨道，增加结束行为判断。
-        if (this.item.isEnded(this.time) && !this.item.parent) {
-            this.item.ended = true;
-        }
         this.timelinePlayable.setTime(time);
         this.graph.evaluate(dt);
     };
@@ -19429,6 +19548,8 @@ function compareTracks(a, b) {
                             hitPositions: hitPositions,
                             behavior: hitParams.behavior
                         };
+                        // 触发单个元素的点击事件
+                        item.emit("click", region);
                         regions.push(region);
                         if (stop(region)) {
                             return {
@@ -20664,8 +20785,6 @@ exports.VFXItem = /*#__PURE__*/ function(EffectsObject) {
         this.parentId = parentId;
         this.duration = duration;
         this.endBehavior = endBehavior;
-        //@ts-expect-error
-        this.oldId = data.oldId;
         if (!data.content) {
             data.content = {
                 options: {}
@@ -24674,89 +24793,93 @@ var listOrder = 0;
  * 合成抽象类：核心对象，通常一个场景只包含一个合成，可能会有多个合成。
  * 合成中包含了相关的 Item 元素，支持对 Item 元素的创建、更新和销毁。
  * 也负责 Item 相关的动画播放控制，和持有渲染帧数据。
- */ var Composition = /*#__PURE__*/ function() {
+ */ var Composition = /*#__PURE__*/ function(EventEmitter) {
+    _inherits(Composition, EventEmitter);
     function Composition(props, scene) {
-        var _this = this;
+        var _this;
+        _this = EventEmitter.call(this) || this;
         /**
    * 动画播放速度
-   */ this.speed = 1;
+   */ _this.speed = 1;
         /**
    * 用于保存与当前合成相关的插件数据
-   */ this.loaderData = {};
+   */ _this.loaderData = {};
         /**
    * 预合成数组
-   */ this.refContent = [];
+   */ _this.refContent = [];
         /**
    * 预合成的合成属性，在 content 中会被其元素属性覆盖
-   */ this.refCompositionProps = new Map();
+   */ _this.refCompositionProps = new Map();
         // TODO: 待优化
-        this.assigned = false;
+        _this.assigned = false;
         /**
    * 销毁状态位
-   */ this.destroyed = false;
-        this.postLoaders = [];
+   */ _this.destroyed = false;
+        _this.postLoaders = [];
         /**
    * 合成暂停/播放 标识
-   */ this.paused = false;
-        this.lastVideoUpdateTime = 0;
-        var _props_reusable = props.reusable, reusable = _props_reusable === void 0 ? false : _props_reusable, _props_speed = props.speed, speed = _props_speed === void 0 ? 1 : _props_speed, _props_baseRenderOrder = props.baseRenderOrder, baseRenderOrder = _props_baseRenderOrder === void 0 ? 0 : _props_baseRenderOrder, renderer = props.renderer, onPlayerPause = props.onPlayerPause, onMessageItem = props.onMessageItem, onEnd = props.onEnd, event = props.event, width = props.width, height = props.height;
-        this.compositionSourceManager = new CompositionSourceManager(scene, renderer.engine);
+   */ _this.paused = false;
+        _this.lastVideoUpdateTime = 0;
+        var _props_reusable = props.reusable, reusable = _props_reusable === void 0 ? false : _props_reusable, _props_speed = props.speed, speed = _props_speed === void 0 ? 1 : _props_speed, _props_baseRenderOrder = props.baseRenderOrder, baseRenderOrder = _props_baseRenderOrder === void 0 ? 0 : _props_baseRenderOrder, renderer = props.renderer, event = props.event, width = props.width, height = props.height, handleItemMessage = props.handleItemMessage;
+        _this.compositionSourceManager = new CompositionSourceManager(scene, renderer.engine);
         scene.jsonScene.imgUsage = undefined;
         if (reusable) {
-            this.keepResource = true;
+            _this.keepResource = true;
             scene.textures = undefined;
             scene.consumed = true;
         }
-        var _this_compositionSourceManager = this.compositionSourceManager, sourceContent = _this_compositionSourceManager.sourceContent, pluginSystem = _this_compositionSourceManager.pluginSystem, imgUsage = _this_compositionSourceManager.imgUsage, totalTime = _this_compositionSourceManager.totalTime, refCompositionProps = _this_compositionSourceManager.refCompositionProps;
+        var _this_compositionSourceManager = _this.compositionSourceManager, sourceContent = _this_compositionSourceManager.sourceContent, pluginSystem = _this_compositionSourceManager.pluginSystem, imgUsage = _this_compositionSourceManager.imgUsage, totalTime = _this_compositionSourceManager.totalTime, refCompositionProps = _this_compositionSourceManager.refCompositionProps;
         assertExist(sourceContent);
-        this.renderer = renderer;
-        this.refCompositionProps = refCompositionProps;
-        this.rootItem = new exports.VFXItem(this.getEngine(), sourceContent);
-        this.rootItem.name = "rootItem";
-        this.rootItem.composition = this;
-        this.rootComposition = this.rootItem.addComponent(CompositionComponent);
-        this.rootComposition.data = sourceContent;
+        _this.renderer = renderer;
+        _this.refCompositionProps = refCompositionProps;
+        _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);
+        _this.rootComposition.startTime = sourceContent.startTime;
+        _this.rootComposition.data = sourceContent;
         var imageUsage = !reusable && imgUsage;
-        this.width = width;
-        this.height = height;
-        this.renderOrder = baseRenderOrder;
-        this.id = sourceContent.id;
-        this.renderer = renderer;
-        this.texInfo = imageUsage != null ? imageUsage : {};
-        this.event = event;
+        _this.width = width;
+        _this.height = height;
+        _this.renderOrder = baseRenderOrder;
+        _this.id = sourceContent.id;
+        _this.renderer = renderer;
+        _this.texInfo = imageUsage != null ? imageUsage : {};
+        _this.event = event;
         var _scene_startTime, _scene_timeInfos_asyncCompile;
-        this.statistic = {
+        _this.statistic = {
             loadTime: totalTime != null ? totalTime : 0,
             loadStart: (_scene_startTime = scene.startTime) != null ? _scene_startTime : 0,
             firstFrameTime: 0,
             precompileTime: (_scene_timeInfos_asyncCompile = scene.timeInfos["asyncCompile"]) != null ? _scene_timeInfos_asyncCompile : scene.timeInfos["syncCompile"]
         };
-        this.reusable = reusable;
-        this.speed = speed;
-        this.autoRefTex = !this.keepResource && imageUsage && this.rootItem.endBehavior !== EndBehavior.restart;
-        this.name = sourceContent.name;
-        this.pluginSystem = pluginSystem;
-        this.pluginSystem.initializeComposition(this, scene);
-        this.camera = new Camera(this.name, _extends({}, sourceContent == null ? void 0 : sourceContent.camera, {
+        _this.reusable = reusable;
+        _this.speed = speed;
+        _this.autoRefTex = !_this.keepResource && imageUsage && _this.rootItem.endBehavior !== EndBehavior.restart;
+        _this.name = sourceContent.name;
+        _this.pluginSystem = pluginSystem;
+        _this.pluginSystem.initializeComposition(_assert_this_initialized(_this), scene);
+        _this.camera = new Camera(_this.name, _extends({}, sourceContent == null ? void 0 : sourceContent.camera, {
             aspect: width / height
         }));
-        this.url = scene.url;
-        this.assigned = true;
-        this.globalTime = 0;
-        this.interactive = true;
-        this.onPlayerPause = onPlayerPause;
-        this.onMessageItem = onMessageItem;
-        this.onEnd = onEnd;
-        this.createRenderFrame();
-        this.rendererOptions = null;
-        this.rootComposition.createContent();
-        this.buildItemTree(this.rootItem);
-        this.rootItem.onEnd = function() {
+        _this.url = scene.url;
+        _this.assigned = true;
+        _this.globalTime = 0;
+        _this.interactive = true;
+        _this.handleItemMessage = handleItemMessage;
+        _this.createRenderFrame();
+        _this.rendererOptions = null;
+        _this.rootComposition.createContent();
+        _this.buildItemTree(_this.rootItem);
+        _this.rootItem.onEnd = function() {
             window.setTimeout(function() {
-                _this.onEnd == null ? void 0 : _this.onEnd.call(_this, _this);
+                _this.emit("end", {
+                    composition: _assert_this_initialized(_this)
+                });
             }, 0);
         };
-        this.pluginSystem.resetComposition(this, this.renderFrame);
+        _this.pluginSystem.resetComposition(_assert_this_initialized(_this), _this.renderFrame);
+        return _this;
     }
     var _proto = Composition.prototype;
     /**
@@ -24807,7 +24930,7 @@ var listOrder = 0;
         if (this.rootItem.ended && this.reusable) {
             this.restart();
         }
-        if (!this.rootComposition.started) {
+        if (this.rootComposition.started) {
             this.gotoAndPlay(this.time - this.startTime);
         } else {
             this.gotoAndPlay(0);
@@ -24830,18 +24953,14 @@ var listOrder = 0;
    * 跳转合成到指定时间播放
    * @param time - 相对 startTime 的时间
    */ _proto.gotoAndPlay = function gotoAndPlay(time) {
+        this.setTime(time);
         this.resume();
-        if (!this.rootComposition.started) {
-            this.rootComposition.start();
-            this.rootComposition.started = true;
-        }
-        this.forwardTime(time + this.startTime);
     };
     /**
    * 跳转合成到指定时间并暂停
    * @param time - 相对 startTime 的时间
    */ _proto.gotoAndStop = function gotoAndStop(time) {
-        this.gotoAndPlay(time);
+        this.setTime(time);
         this.pause();
     };
     /**
@@ -24868,7 +24987,7 @@ var listOrder = 0;
             this.rootComposition.start();
             this.rootComposition.started = true;
         }
-        this.forwardTime(time + this.startTime, true);
+        this.forwardTime(time + this.startTime);
         if (pause) {
             this.pause();
         }
@@ -24881,17 +25000,16 @@ var listOrder = 0;
    * 前进合成到指定时间
    * @param time - 相对0时刻的时间
    * @param skipRender - 是否跳过渲染
-   */ _proto.forwardTime = function forwardTime(time, skipRender) {
-        if (skipRender === void 0) skipRender = false;
+   */ _proto.forwardTime = function forwardTime(time) {
         var deltaTime = time * 1000 - this.rootComposition.time * 1000;
         var reverse = deltaTime < 0;
         var step = 15;
         var t = Math.abs(deltaTime);
         var ss = reverse ? -step : step;
         for(t; t > step; t -= step){
-            this.update(ss, skipRender);
+            this.update(ss);
         }
-        this.update(reverse ? -t : t, skipRender);
+        this.update(reverse ? -t : t);
     };
     /**
    * 重置状态函数
@@ -24932,8 +25050,9 @@ var listOrder = 0;
    * 是否合成需要重新播放
    * @returns 重新播放合成标志位
    */ _proto.shouldRestart = function shouldRestart() {
-        var _this_rootItem = this.rootItem, ended = _this_rootItem.ended, endBehavior = _this_rootItem.endBehavior;
-        return ended && endBehavior === EndBehavior.restart;
+        var _this_rootItem = this.rootItem, duration = _this_rootItem.duration, endBehavior = _this_rootItem.endBehavior;
+        var time = this.rootComposition.time;
+        return endBehavior === EndBehavior.restart && duration - time < 0.02;
     };
     /**
    * 是否合成需要销毁
@@ -24942,44 +25061,45 @@ var listOrder = 0;
         if (this.reusable) {
             return false;
         }
-        var _this_rootItem = this.rootItem, ended = _this_rootItem.ended, endBehavior = _this_rootItem.endBehavior;
+        var endBehavior = this.rootItem.endBehavior;
+        if (this.rootItem.isEnded(this.time)) {
+            this.rootItem.ended = true;
+        }
         // TODO: 合成结束行为
-        return ended && (!endBehavior || endBehavior === END_BEHAVIOR_PAUSE_AND_DESTROY);
+        return this.rootItem.ended && endBehavior === EndBehavior.destroy;
     };
     /**
    * 合成更新，针对所有 item 的更新
    * @param deltaTime - 更新的时间步长
    * @param skipRender - 是否需要渲染
-   */ _proto.update = function update(deltaTime, skipRender) {
-        if (skipRender === void 0) skipRender = false;
+   */ _proto.update = function update(deltaTime) {
         if (!this.assigned || this.paused) {
             return;
         }
+        var time = this.getUpdateTime(deltaTime * this.speed);
+        this.globalTime += time;
+        this.updateRootComposition();
         if (this.shouldRestart()) {
+            this.emit("end", {
+                composition: this
+            });
             this.restart();
         // restart then tick to avoid flicker
         }
-        var time = this.getUpdateTime(deltaTime * this.speed);
-        this.globalTime += time;
-        if (this.rootComposition.isActiveAndEnabled) {
-            var localTime = this.toLocalTime(this.globalTime / 1000);
-            this.rootComposition.time = localTime;
-        }
         this.updateVideo();
         // 更新 model-tree-plugin
         this.updatePluginLoaders(deltaTime);
         this.callStart(this.rootItem);
         this.callUpdate(this.rootItem, time);
         this.callLateUpdate(this.rootItem, time);
-        // this.extraCamera?.getComponent(TimelineComponent)?.update(deltaTime);
         this.updateCamera();
         if (this.shouldDispose()) {
-            this.onEnd == null ? void 0 : this.onEnd.call(this, this);
+            this.emit("end", {
+                composition: this
+            });
             this.dispose();
         } else {
-            if (!skipRender) {
-                this.prepareRender();
-            }
+            this.prepareRender();
         }
     };
     _proto.toLocalTime = function toLocalTime(time) {
@@ -24990,13 +25110,20 @@ var listOrder = 0;
                 localTime = localTime % duration;
             } else if (this.rootItem.endBehavior === EndBehavior.freeze) {
                 localTime = Math.min(duration, localTime);
+                if (localTime === duration) {
+                    if (!this.rootComposition.fezzed) {
+                        this.rootComposition.fezzed = true;
+                        this.emit("end", {
+                            composition: this
+                        });
+                    }
+                }
             }
         }
         return localTime;
     };
     _proto.getUpdateTime = function getUpdateTime(t) {
         var startTimeInMs = this.startTime * 1000;
-        // const content = this.rootItem;
         var now = this.rootComposition.time * 1000;
         if (t < 0 && now + t < startTimeInMs) {
             return startTimeInMs - now;
@@ -25144,6 +25271,14 @@ var listOrder = 0;
         });
     };
     /**
+   * 更新主合成组件
+   */ _proto.updateRootComposition = function updateRootComposition() {
+        if (this.rootComposition.isActiveAndEnabled) {
+            var localTime = this.toLocalTime(this.globalTime / 1000);
+            this.rootComposition.time = localTime;
+        }
+    };
+    /**
    * 通过名称获取元素
    * @param name - 元素名称
    * @returns 元素对象
@@ -25192,12 +25327,17 @@ var listOrder = 0;
    * @param type - 交互类型
    */ _proto.addInteractiveItem = function addInteractiveItem(item, type) {
         if (type === InteractType.MESSAGE) {
-            this.onMessageItem == null ? void 0 : this.onMessageItem.call(this, {
+            this.handleItemMessage({
                 name: item.name,
                 phrase: MESSAGE_ITEM_PHRASE_BEGIN,
                 id: item.id,
                 compositionId: this.id
             });
+            item.emit("message", {
+                name: item.name,
+                phrase: MESSAGE_ITEM_PHRASE_BEGIN,
+                id: item.id
+            });
             return item.id;
         }
     };
@@ -25206,14 +25346,19 @@ var listOrder = 0;
    * @param item - 交互元素
    * @param type - 交互类型
    */ _proto.removeInteractiveItem = function removeInteractiveItem(item, type) {
-        // MESSAGE ITEM的结束行为
+        // MESSAGE ITEM 的结束行为
         if (type === InteractType.MESSAGE) {
-            this.onMessageItem == null ? void 0 : this.onMessageItem.call(this, {
+            this.handleItemMessage({
                 name: item.name,
                 phrase: MESSAGE_ITEM_PHRASE_END,
                 id: item.id,
                 compositionId: this.id
             });
+            item.emit("message", {
+                name: item.name,
+                phrase: MESSAGE_ITEM_PHRASE_END,
+                id: item.id
+            });
         }
     };
     /**
@@ -25309,7 +25454,6 @@ var listOrder = 0;
         this.update = function() {
             logger.error("Update disposed composition: " + _this.name + ".");
         };
-        this.onPlayerPause = noop;
         this.dispose = noop;
         if (textures && this.keepResource) {
             textures.forEach(function(tex) {
@@ -25507,7 +25651,7 @@ var listOrder = 0;
         }
     ]);
     return Composition;
-}();
+}(EventEmitter);
 
 var SIZEOF_SHORT = 2;
 var SIZEOF_INT = 4;
@@ -27471,7 +27615,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.0-alpha.30";
+var version$1 = "2.0.0-alpha.32";
 logger.info("Core version: " + version$1 + ".");
 
 var _obj;
@@ -27545,6 +27689,13 @@ var _obj3;
    */ _this.uniforms = {};
         var shader = props == null ? void 0 : props.shader;
         var level = engine.gpuCapability.level;
+        _this.shader = new exports.Shader(engine);
+        _this.shader.shaderData = _extends({}, shader, {
+            id: generateGUID(),
+            dataType: DataType.Shader,
+            vertex: (shader == null ? void 0 : shader.vertex) || "",
+            fragment: (shader == null ? void 0 : shader.fragment) || ""
+        });
         for(var i = 0; i < exports.maxSpriteMeshItemCount; i++){
             _this.uniforms["uSampler" + i] = new THREE__namespace.Uniform(null);
         }
@@ -28725,6 +28876,8 @@ var ThreeRenderer = /*#__PURE__*/ function(Renderer) {
         var _this;
         _this = Renderer.call(this) || this;
         _this.engine = new ThreeEngine(gl);
+        _this.engine.renderer = _assert_this_initialized(_this);
+        _this.env = "";
         _this.renderingData = {
             //@ts-expect-error
             currentFrame: {}
@@ -28752,8 +28905,8 @@ var ThreeRenderer = /*#__PURE__*/ function(Renderer) {
         var _this;
         _this = _THREE_Group.call(this) || this;
         _this.compositions = [];
-        _this.baseCompositionIndex = 0;
         _this.env = "";
+        _this.baseCompositionIndex = 0;
         var width = options.width, height = options.height, camera = options.camera;
         _this.renderer = new ThreeRenderer(context);
         _this.width = width;
@@ -28822,6 +28975,19 @@ var ThreeRenderer = /*#__PURE__*/ function(Renderer) {
             });
         })();
     };
+    _proto.pause = function pause() {
+        this.dispatchEvent({
+            type: "pause"
+        });
+        this.compositions.forEach(function(composition) {
+            composition.pause();
+        });
+    };
+    _proto.resume = function resume() {
+        this.compositions.forEach(function(composition) {
+            composition.resume();
+        });
+    };
     _proto.createComposition = function createComposition(url, options) {
         if (options === void 0) options = {};
         var _this = this;
@@ -28878,8 +29044,20 @@ var ThreeRenderer = /*#__PURE__*/ function(Renderer) {
                         composition = new ThreeComposition(_extends({}, opts, {
                             width: _this.width,
                             height: _this.height,
-                            renderer: _this.renderer
+                            renderer: _this.renderer,
+                            handleItemMessage: function(message) {
+                                _this.dispatchEvent({
+                                    type: "message",
+                                    message: message
+                                });
+                            }
                         }), scene);
+                        composition.on("end", function() {
+                            _this.dispatchEvent({
+                                type: "end",
+                                composition: composition
+                            });
+                        });
                         _this.renderer.engine.setOptions({
                             threeCamera: _this.camera,
                             threeGroup: _this,
@@ -29104,7 +29282,7 @@ setMaxSpriteMeshItemCount(8);
  */ Mesh.create = function(engine, props) {
     return new ThreeMesh(engine, props);
 };
-var version = "2.0.0-alpha.30";
+var version = "2.0.0-alpha.32";
 logger.info("THREEJS plugin version: " + version + ".");
 
 exports.AbstractPlugin = AbstractPlugin;
@@ -29142,6 +29320,7 @@ exports.EVENT_TYPE_TOUCH_START = EVENT_TYPE_TOUCH_START;
 exports.EffectsObject = EffectsObject;
 exports.EffectsPackage = EffectsPackage;
 exports.Engine = Engine;
+exports.EventEmitter = EventEmitter;
 exports.EventSystem = EventSystem;
 exports.Float16ArrayWrapper = Float16ArrayWrapper;
 exports.Framebuffer = Framebuffer;