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

package/dist/index.mjs

@@ -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
  */
 
 import * as THREE from 'three';
@@ -4565,15 +4565,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() {
@@ -4599,7 +4681,7 @@ function getDirectStore(target) {
         return _instanceof1(obj, EffectsObject) && "guid" in obj;
     };
     return EffectsObject;
-}();
+}(EventEmitter);
 
 /**
  * @since 2.0.0
@@ -8410,7 +8492,8 @@ var seed$a = 1;
                         texture = Texture.create(engine, {
                             sourceType: TextureSourceType.image,
                             image: image,
-                            id: generateGUID()
+                            id: generateGUID(),
+                            flipY: true
                         });
                         texture.initialize();
                         return [
@@ -8988,6 +9071,9 @@ var MaterialRenderType;
    * 初始化 GPU 资源
    * @override
    */ _proto.initialize = function initialize() {
+    // OVERRIDE
+    };
+    _proto.createShaderVariant = function createShaderVariant() {
     // OVERRIDE
     };
     _proto.use = function use(render, globalUniforms) {
@@ -12698,6 +12784,7 @@ var GlobalUniforms = function GlobalUniforms() {
     this.floats = {};
     this.ints = {};
     // vector3s: Record<string, vec3> = {};
+    this.vector4s = {};
     this.matrices = {};
     //...
     this.samplers = [] // 存放的sampler名称。
@@ -12934,6 +13021,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
     };
@@ -13886,6 +13976,8 @@ var 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,
@@ -13909,6 +14001,39 @@ var 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);
         }
@@ -13962,9 +14087,13 @@ var 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;
@@ -14010,7 +14139,7 @@ var 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,
@@ -14023,12 +14152,9 @@ var 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([
@@ -14043,11 +14169,11 @@ var 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
         };
     };
@@ -14058,8 +14184,7 @@ var 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;
@@ -14150,6 +14275,7 @@ var 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));
         }
@@ -14161,8 +14287,8 @@ var 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;
@@ -14317,7 +14443,6 @@ var 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,
@@ -18434,11 +18559,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 = {};
@@ -19233,6 +19353,9 @@ function compareTracks(a, b) {
         _this.startTime = 0;
         _this.items = [] // 场景的所有元素
         ;
+        /**
+   * 合成是否冻结标志位
+   */ _this.fezzed = false;
         _this.reusable = false;
         _this.sceneBindings = [];
         _this.graph = new PlayableGraph();
@@ -19269,10 +19392,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);
     };
@@ -19405,6 +19524,8 @@ function compareTracks(a, b) {
                             hitPositions: hitPositions,
                             behavior: hitParams.behavior
                         };
+                        // 触发单个元素的点击事件
+                        item.emit("click", region);
                         regions.push(region);
                         if (stop(region)) {
                             return {
@@ -20640,8 +20761,6 @@ var 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: {}
@@ -24650,89 +24769,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 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 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;
     /**
@@ -24783,7 +24906,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);
@@ -24806,18 +24929,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();
     };
     /**
@@ -24844,7 +24963,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();
         }
@@ -24857,17 +24976,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);
     };
     /**
    * 重置状态函数
@@ -24908,8 +25026,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;
     };
     /**
    * 是否合成需要销毁
@@ -24918,44 +25037,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) {
@@ -24966,13 +25086,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;
@@ -25120,6 +25247,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 元素对象
@@ -25168,12 +25303,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;
         }
     };
@@ -25182,14 +25322,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
+            });
         }
     };
     /**
@@ -25285,7 +25430,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) {
@@ -25483,7 +25627,7 @@ var listOrder = 0;
         }
     ]);
     return Composition;
-}();
+}(EventEmitter);
 
 var SIZEOF_SHORT = 2;
 var SIZEOF_INT = 4;
@@ -27447,7 +27591,7 @@ registerPlugin("sprite", SpriteLoader, VFXItem, true);
 registerPlugin("particle", ParticleLoader, VFXItem, true);
 registerPlugin("cal", CalculateLoader, VFXItem, true);
 registerPlugin("interact", InteractLoader, 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;
@@ -27521,6 +27665,13 @@ var _obj3;
    */ _this.uniforms = {};
         var shader = props == null ? void 0 : props.shader;
         var level = engine.gpuCapability.level;
+        _this.shader = new 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 < maxSpriteMeshItemCount; i++){
             _this.uniforms["uSampler" + i] = new THREE.Uniform(null);
         }
@@ -28701,6 +28852,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: {}
@@ -28728,8 +28881,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;
@@ -28798,6 +28951,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;
@@ -28854,8 +29020,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,
@@ -29080,8 +29258,8 @@ 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 + ".");
 
-export { AbstractPlugin, ActivationPlayable, ActivationPlayableAsset, ActivationTrack, AnimationClip, AnimationClipPlayable, AssetLoader, AssetManager, BYTES_TYPE_MAP, Behaviour, BezierCurve, BezierCurvePath, BezierCurveQuat, BinaryAsset, COMPRESSED_TEXTURE, CONSTANT_MAP_BLEND, CONSTANT_MAP_DEPTH, CONSTANT_MAP_STENCIL_FUNC, CONSTANT_MAP_STENCIL_OP, COPY_FRAGMENT_SHADER, COPY_MESH_SHADER_ID, COPY_VERTEX_SHADER, CalculateLoader, Camera, CameraController, CameraVFXItemLoader, Component, Composition, CompositionComponent, CompositionSourceManager, DEFAULT_FONTS, Database, DestroyOptions, Downloader, EFFECTS_COPY_MESH_NAME, EVENT_TYPE_CLICK, EVENT_TYPE_TOUCH_END, EVENT_TYPE_TOUCH_MOVE, EVENT_TYPE_TOUCH_START, EffectComponent, EffectsObject, EffectsPackage, Engine, EventSystem, FilterMode, Float16ArrayWrapper, Framebuffer, GLSLVersion, GPUCapability, Geometry, GlobalUniforms, GradientValue, HELP_LINK, HitTestType, InteractComponent, InteractLoader, InteractMesh, Item, ItemBehaviour, KTXTexture, LineSegments, LinearValue, Material, MaterialDataBlock, MaterialRenderType, Mesh, ObjectBindingTrack, OrderType, PLAYER_OPTIONS_ENV_EDITOR, POST_PROCESS_SETTINGS, ParticleBehaviourPlayable, ParticleBehaviourPlayableAsset, ParticleLoader, ParticleMesh, ParticleSystem, ParticleSystemRenderer, PassTextureCache, PathSegments, PluginSystem, PostProcessVolume, RENDER_PASS_NAME_PREFIX, RENDER_PREFER_LOOKUP_TEXTURE, RUNTIME_ENV, RandomSetValue, RandomValue, RandomVectorValue, RenderFrame, RenderPass, RenderPassAttachmentStorageType, RenderPassDestroyAttachmentType, RenderPassPriorityNormal, RenderPassPriorityPostprocess, RenderPassPriorityPrepare, RenderTargetHandle, RenderTextureFormat, Renderbuffer, Renderer, RendererComponent, RuntimeClip, SEMANTIC_MAIN_PRE_COLOR_ATTACHMENT_0, SEMANTIC_MAIN_PRE_COLOR_ATTACHMENT_SIZE_0, SEMANTIC_PRE_COLOR_ATTACHMENT_0, SEMANTIC_PRE_COLOR_ATTACHMENT_SIZE_0, SPRITE_VERTEX_STRIDE, SemanticMap, SerializationHelper, Shader, ShaderCompileResultStatus, ShaderType, ShaderVariant, SpriteColorPlayable, SpriteColorPlayableAsset, SpriteColorTrack, SpriteComponent, SpriteLoader, StaticValue, SubCompositionPlayableAsset, SubCompositionTrack, TEMPLATE_USE_OFFSCREEN_CANVAS, TEXTURE_UNIFORM_MAP, TextComponent, TextComponentBase, TextLayout, TextLoader, TextStyle, Texture, TextureFactory, TextureLoadAction, TextureSourceType, TextureStoreAction, ThreeComposition, ThreeDisplayObject, ThreeEngine, ThreeMaterial, ThreeSpriteComponent, ThreeTextComponent, ThreeTexture, Ticker, TimelineAsset, TimelineClip, TimelinePlayable, TrackAsset, TrackSortWrapper, TrackType, Transform, TransformAnimationPlayable, TransformPlayableAsset, TransformTrack, VFXItem, ValueGetter, addByOrder, addItem, addItemWithOrder, applyMixins, assertExist, asserts, base64ToFile, blend, calculateTranslation, canvasPool, colorGradingFrag, colorStopsFromGradient, colorToArr$1 as colorToArr, combineImageTemplate, compatible_frag as compatibleFrag, compatible_vert as compatibleVert, createCopyShader, createGLContext, createKeyFrameMeta, createShaderWithMacros, createShape, createValueGetter, decimalEqual, defaultGlobalVolume, defaultPlugins, deserializeMipmapTexture, earcut, effectsClass, effectsClassStore, enlargeBuffer, ensureFixedNumber, ensureVec3, findPreviousRenderPass, gaussianDown_frag as gaussianDownFrag, gaussianDownHFrag, gaussianDownVFrag, gaussianUpFrag, generateEmptyTypedArray, generateGUID, generateHalfFloatTexture, generateTransparentTexture, generateWhiteTexture, getBackgroundImage, getColorFromGradientStops, getConfig, getDefaultTemplateCanvasPool, getDefaultTextureFactory, getGeometryByShape, getGeometryTriangles, getImageItemRenderInfo, getKTXTextureOptions, getKeyFrameMetaByRawValue, getMergedStore, getParticleMeshShader, getPixelRatio, getPreMultiAlpha, getStandardComposition, getStandardImage, getStandardItem, getStandardJSON, getTextureSize, glContext, glType2VertexFormatType, gpuTimer, imageDataFromColor, imageDataFromGradient, initErrors, initGLContext, integrate, interpolateColor, isAlipayMiniApp, isAndroid, isArray, isCanvas, isFunction, isIOS, isIOSByUA, isMiniProgram, isObject, isSceneJSON, isSceneURL, isSceneWithOptions, isSimulatorCellPhone, isString, isUniformStruct, isUniformStructArray, isValidFontFamily, isWebGL2, isWechatMiniApp, itemFrag, itemFrameFrag, itemVert, loadAVIFOptional, loadBinary, loadBlob, loadImage, loadMedia, loadVideo, loadWebPOptional, logger, index as math, maxSpriteMeshItemCount, modifyMaxKeyframeShader, nearestPowerOfTwo, noop, normalizeColor, numberToFix, parsePercent$1 as parsePercent, particleFrag, particleOriginTranslateMap$1 as particleOriginTranslateMap, particleUniformTypeMap, particleVert, pluginLoaderMap, pointOnLine, randomInRange, registerPlugin, removeItem, rotateVec2, screenMeshVert, serialize, setBlendMode, setConfig, setDefaultTextureFactory, setMaskMode, setMaxSpriteMeshItemCount, setRayFromCamera, setSideMode, setSpriteMeshMaxItemCountByGPU, setUniformValue, sortByOrder, index$1 as spec, spriteMeshShaderFromFilter, spriteMeshShaderFromRenderInfo, spriteMeshShaderIdFromRenderInfo, thresholdFrag, throwDestroyedError, trailVert, translatePoint, trianglesFromRect, unregisterPlugin, valIfUndefined, value, valueDefine, vecAssign, vecFill, vecMulCombine, vecNormalize, version, vertexFormatType2GLType };
+export { AbstractPlugin, ActivationPlayable, ActivationPlayableAsset, ActivationTrack, AnimationClip, AnimationClipPlayable, AssetLoader, AssetManager, BYTES_TYPE_MAP, Behaviour, BezierCurve, BezierCurvePath, BezierCurveQuat, BinaryAsset, COMPRESSED_TEXTURE, CONSTANT_MAP_BLEND, CONSTANT_MAP_DEPTH, CONSTANT_MAP_STENCIL_FUNC, CONSTANT_MAP_STENCIL_OP, COPY_FRAGMENT_SHADER, COPY_MESH_SHADER_ID, COPY_VERTEX_SHADER, CalculateLoader, Camera, CameraController, CameraVFXItemLoader, Component, Composition, CompositionComponent, CompositionSourceManager, DEFAULT_FONTS, Database, DestroyOptions, Downloader, EFFECTS_COPY_MESH_NAME, EVENT_TYPE_CLICK, EVENT_TYPE_TOUCH_END, EVENT_TYPE_TOUCH_MOVE, EVENT_TYPE_TOUCH_START, EffectComponent, EffectsObject, EffectsPackage, Engine, EventEmitter, EventSystem, FilterMode, Float16ArrayWrapper, Framebuffer, GLSLVersion, GPUCapability, Geometry, GlobalUniforms, GradientValue, HELP_LINK, HitTestType, InteractComponent, InteractLoader, InteractMesh, Item, ItemBehaviour, KTXTexture, LineSegments, LinearValue, Material, MaterialDataBlock, MaterialRenderType, Mesh, ObjectBindingTrack, OrderType, PLAYER_OPTIONS_ENV_EDITOR, POST_PROCESS_SETTINGS, ParticleBehaviourPlayable, ParticleBehaviourPlayableAsset, ParticleLoader, ParticleMesh, ParticleSystem, ParticleSystemRenderer, PassTextureCache, PathSegments, PluginSystem, PostProcessVolume, RENDER_PASS_NAME_PREFIX, RENDER_PREFER_LOOKUP_TEXTURE, RUNTIME_ENV, RandomSetValue, RandomValue, RandomVectorValue, RenderFrame, RenderPass, RenderPassAttachmentStorageType, RenderPassDestroyAttachmentType, RenderPassPriorityNormal, RenderPassPriorityPostprocess, RenderPassPriorityPrepare, RenderTargetHandle, RenderTextureFormat, Renderbuffer, Renderer, RendererComponent, RuntimeClip, SEMANTIC_MAIN_PRE_COLOR_ATTACHMENT_0, SEMANTIC_MAIN_PRE_COLOR_ATTACHMENT_SIZE_0, SEMANTIC_PRE_COLOR_ATTACHMENT_0, SEMANTIC_PRE_COLOR_ATTACHMENT_SIZE_0, SPRITE_VERTEX_STRIDE, SemanticMap, SerializationHelper, Shader, ShaderCompileResultStatus, ShaderType, ShaderVariant, SpriteColorPlayable, SpriteColorPlayableAsset, SpriteColorTrack, SpriteComponent, SpriteLoader, StaticValue, SubCompositionPlayableAsset, SubCompositionTrack, TEMPLATE_USE_OFFSCREEN_CANVAS, TEXTURE_UNIFORM_MAP, TextComponent, TextComponentBase, TextLayout, TextLoader, TextStyle, Texture, TextureFactory, TextureLoadAction, TextureSourceType, TextureStoreAction, ThreeComposition, ThreeDisplayObject, ThreeEngine, ThreeMaterial, ThreeSpriteComponent, ThreeTextComponent, ThreeTexture, Ticker, TimelineAsset, TimelineClip, TimelinePlayable, TrackAsset, TrackSortWrapper, TrackType, Transform, TransformAnimationPlayable, TransformPlayableAsset, TransformTrack, VFXItem, ValueGetter, addByOrder, addItem, addItemWithOrder, applyMixins, assertExist, asserts, base64ToFile, blend, calculateTranslation, canvasPool, colorGradingFrag, colorStopsFromGradient, colorToArr$1 as colorToArr, combineImageTemplate, compatible_frag as compatibleFrag, compatible_vert as compatibleVert, createCopyShader, createGLContext, createKeyFrameMeta, createShaderWithMacros, createShape, createValueGetter, decimalEqual, defaultGlobalVolume, defaultPlugins, deserializeMipmapTexture, earcut, effectsClass, effectsClassStore, enlargeBuffer, ensureFixedNumber, ensureVec3, findPreviousRenderPass, gaussianDown_frag as gaussianDownFrag, gaussianDownHFrag, gaussianDownVFrag, gaussianUpFrag, generateEmptyTypedArray, generateGUID, generateHalfFloatTexture, generateTransparentTexture, generateWhiteTexture, getBackgroundImage, getColorFromGradientStops, getConfig, getDefaultTemplateCanvasPool, getDefaultTextureFactory, getGeometryByShape, getGeometryTriangles, getImageItemRenderInfo, getKTXTextureOptions, getKeyFrameMetaByRawValue, getMergedStore, getParticleMeshShader, getPixelRatio, getPreMultiAlpha, getStandardComposition, getStandardImage, getStandardItem, getStandardJSON, getTextureSize, glContext, glType2VertexFormatType, gpuTimer, imageDataFromColor, imageDataFromGradient, initErrors, initGLContext, integrate, interpolateColor, isAlipayMiniApp, isAndroid, isArray, isCanvas, isFunction, isIOS, isIOSByUA, isMiniProgram, isObject, isSceneJSON, isSceneURL, isSceneWithOptions, isSimulatorCellPhone, isString, isUniformStruct, isUniformStructArray, isValidFontFamily, isWebGL2, isWechatMiniApp, itemFrag, itemFrameFrag, itemVert, loadAVIFOptional, loadBinary, loadBlob, loadImage, loadMedia, loadVideo, loadWebPOptional, logger, index as math, maxSpriteMeshItemCount, modifyMaxKeyframeShader, nearestPowerOfTwo, noop, normalizeColor, numberToFix, parsePercent$1 as parsePercent, particleFrag, particleOriginTranslateMap$1 as particleOriginTranslateMap, particleUniformTypeMap, particleVert, pluginLoaderMap, pointOnLine, randomInRange, registerPlugin, removeItem, rotateVec2, screenMeshVert, serialize, setBlendMode, setConfig, setDefaultTextureFactory, setMaskMode, setMaxSpriteMeshItemCount, setRayFromCamera, setSideMode, setSpriteMeshMaxItemCountByGPU, setUniformValue, sortByOrder, index$1 as spec, spriteMeshShaderFromFilter, spriteMeshShaderFromRenderInfo, spriteMeshShaderIdFromRenderInfo, thresholdFrag, throwDestroyedError, trailVert, translatePoint, trianglesFromRect, unregisterPlugin, valIfUndefined, value, valueDefine, vecAssign, vecFill, vecMulCombine, vecNormalize, version, vertexFormatType2GLType };
 //# sourceMappingURL=index.mjs.map