@galacean/effects-threejs 0.0.1-alpha.0 → 0.0.1-alpha.2

package/dist/index.js

@@ -3,7 +3,7 @@
  * Description: Galacean Effects runtime threejs plugin for the web
  * Author: Ant Group CO., Ltd.
  * Contributors: 燃然,飂兮,十弦,云垣,茂安,意绮
- * Version: v0.0.1-alpha.0
+ * Version: v0.0.1-alpha.2
  */
 
 'use strict';
@@ -6145,8 +6145,8 @@ var PLAYER_OPTIONS_ENV_EDITOR = 'editor';
 var FILTER_NAME_NONE = 'none';
 var DEG2RAD = 0.017453292519943295;
 var HELP_LINK = {
-    'Filter not imported': 'https://yuque.antfin.com/huoxing/knaszl/qtnsf2g9ofigggor#n4Y1K',
-    'Item duration can\'t be less than 0': 'https://yuque.antfin.com/huoxing/knaszl/wozlz0#vFPqF',
+    'Filter not imported': 'https://galacean.antgroup.com/effects/#/user/gasrv4ka5sacrwpg',
+    'Item duration can\'t be less than 0': 'https://galacean.antgroup.com/effects/#/user/gasrv4ka5sacrwpg',
 };
 
 /**
@@ -6689,7 +6689,7 @@ function asserts(condition, msg) {
  * Name: @galacean/effects-specification
  * Description: Galacean Effects JSON Specification
  * Author: Ant Group CO., Ltd.
- * Version: v0.0.1
+ * Version: v1.0.0
  */
 
 /*********************************************/
@@ -7162,7 +7162,7 @@ var ItemEndBehavior$1;
 (function (ItemEndBehavior) {
     ItemEndBehavior[ItemEndBehavior["destroy"] = END_BEHAVIOR_DESTROY$1] = "destroy";
     ItemEndBehavior[ItemEndBehavior["loop"] = END_BEHAVIOR_RESTART$1] = "loop";
-    ItemEndBehavior[ItemEndBehavior["forward"] = END_BEHAVIOR_FREEZE$1] = "forward";
+    ItemEndBehavior[ItemEndBehavior["freeze"] = END_BEHAVIOR_FREEZE$1] = "freeze";
 })(ItemEndBehavior$1 || (ItemEndBehavior$1 = {}));
 var ParentItemEndBehavior$1;
 (function (ParentItemEndBehavior) {
@@ -9762,12 +9762,11 @@ var VFXItem = /** @class */ (function () {
          */
         this._frozen = false;
         var id = props.id, name = props.name, delay = props.delay, parentId = props.parentId, endBehavior = props.endBehavior, transform = props.transform, _a = props.listIndex, listIndex = _a === void 0 ? 0 : _a, _b = props.duration, duration = _b === void 0 ? 0 : _b;
-        var rootTransform = composition.rootTransform;
         this.composition = composition;
         this.id = id;
         this.name = name;
         this.delay = delay;
-        this.transform = new Transform(__assign$1({ name: this.name }, transform), rootTransform);
+        this.transform = new Transform(__assign$1({ name: this.name }, transform), composition.transform);
         this.parentId = parentId;
         this.duration = duration;
         this.delayInms = (delay || 0) * 1000;
@@ -9775,6 +9774,7 @@ var VFXItem = /** @class */ (function () {
         this.endBehavior = endBehavior;
         this.lifetime = -(this.delayInms / this.durInms);
         this.listIndex = listIndex;
+        this.speed = 1;
         this.onConstructed(props);
         if (duration <= 0) {
             throw Error("Item duration can't be less than 0, see ".concat(HELP_LINK['Item duration can\'t be less than 0']));
@@ -9853,6 +9853,20 @@ var VFXItem = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
+    /**
+     * 设置元素的动画速度
+     * @param speed - 速度
+     */
+    VFXItem.prototype.setSpeed = function (speed) {
+        this.speed = speed;
+    };
+    /**
+     * 获取元素的动画速度
+     * @returns
+     */
+    VFXItem.prototype.getSpeed = function () {
+        return this.speed;
+    };
     /**
      * 重置元素状态属性
      */
@@ -9908,11 +9922,12 @@ var VFXItem = /** @class */ (function () {
     };
     /**
      * 内部使用的更新回调，请不要重写此方法，重写 `onItemUpdate` 方法
-     * @param dt
+     * @param deltaTime
      */
-    VFXItem.prototype.onUpdate = function (dt) {
+    VFXItem.prototype.onUpdate = function (deltaTime) {
         var _a, _b;
         if (this.started && !this.frozen && this.composition) {
+            var dt = deltaTime * this.speed;
             var time = (this.timeInms += dt);
             this.time += dt / 1000;
             var now = time - this.delayInms;
@@ -9924,7 +9939,6 @@ var VFXItem = /** @class */ (function () {
                 this.composition.itemLifetimeEvent(this, true);
             }
             if (!this.delaying) {
-                var endBehavior = this.endBehavior;
                 var lifetime = now / this.durInms;
                 var ended = this.isEnded(now);
                 var shouldUpdate = true;
@@ -9936,36 +9950,37 @@ var VFXItem = /** @class */ (function () {
                         this.composition.itemLifetimeEvent(this, false);
                         this.onEnd();
                     }
-                    if (endBehavior !== END_BEHAVIOR_FORWARD$1 && endBehavior !== END_BEHAVIOR_RESTART$1) {
+                    // 注意：不要定义私有变量替换 this.endBehavior，直接使用 this 上的！！！（Chrome 下会出现 endBehavior 为 5 时，能进入以下判断）
+                    if (this.endBehavior !== END_BEHAVIOR_FORWARD$1 && this.endBehavior !== END_BEHAVIOR_RESTART$1) {
                         this.ended = true;
                         this.transform.setValid(false);
-                        if (endBehavior === END_BEHAVIOR_PAUSE$1 ||
-                            endBehavior === END_BEHAVIOR_PAUSE_AND_DESTROY$1) {
+                        if (this.endBehavior === END_BEHAVIOR_PAUSE$1 ||
+                            this.endBehavior === END_BEHAVIOR_PAUSE_AND_DESTROY$1) {
                             (_b = (_a = this.composition).handlePlayerPause) === null || _b === void 0 ? void 0 : _b.call(_a, this);
                         }
-                        else if (endBehavior === END_BEHAVIOR_FREEZE$1) {
+                        else if (this.endBehavior === END_BEHAVIOR_FREEZE$1) {
                             this.transform.setValid(true);
                             shouldUpdate = true;
                             lifetime = 1;
                         }
                         if (!this.reusable) {
-                            if (endBehavior === END_BEHAVIOR_DESTROY$1 ||
-                                endBehavior === END_BEHAVIOR_PAUSE_AND_DESTROY$1 ||
-                                endBehavior === END_BEHAVIOR_DESTROY_CHILDREN$1) {
+                            if (this.endBehavior === END_BEHAVIOR_DESTROY$1 ||
+                                this.endBehavior === END_BEHAVIOR_PAUSE_AND_DESTROY$1 ||
+                                this.endBehavior === END_BEHAVIOR_DESTROY_CHILDREN$1) {
                                 return this.dispose();
                             }
-                            else if (endBehavior === END_BEHAVIOR_PAUSE$1) {
+                            else if (this.endBehavior === END_BEHAVIOR_PAUSE$1) {
                                 this.endBehavior = END_BEHAVIOR_FORWARD$1;
                             }
                         }
-                        else if (endBehavior === END_BEHAVIOR_DESTROY$1) {
+                        else if (this.endBehavior === END_BEHAVIOR_DESTROY$1) {
                             this.setVisible(false);
                         }
                         lifetime = Math.min(lifetime, 1);
                     }
                     else {
                         shouldUpdate = true;
-                        if (endBehavior === END_BEHAVIOR_RESTART$1) {
+                        if (this.endBehavior === END_BEHAVIOR_RESTART$1) {
                             this.ended = true;
                             lifetime = lifetime % 1;
                         }
@@ -10014,6 +10029,22 @@ var VFXItem = /** @class */ (function () {
     VFXItem.prototype.onEnd = function () {
         // OVERRIDE
     };
+    /**
+     * 通过指定 r、g、b、a 值设置元素的颜色
+     * @param {number} r
+     * @param {number} g
+     * @param {number} b
+     * @param {number} a
+     * @internal
+     */
+    VFXItem.prototype.setColor = function (r, g, b, a) {
+    };
+    /**
+     * 设置元素的透明度
+     * @param opacity - 透明度值，范围 [0,1]
+     */
+    VFXItem.prototype.setOpacity = function (opacity) {
+    };
     /**
      * 获取元素显隐属性
      */
@@ -10065,6 +10096,57 @@ var VFXItem = /** @class */ (function () {
     VFXItem.prototype.getNodeTransform = function (itemId) {
         return this.transform;
     };
+    /**
+     * 设置元素在 3D 坐标轴上相对移动
+     */
+    VFXItem.prototype.translate = function (x, y, z) {
+        this.transform.translate(x, y, z);
+    };
+    /**
+     * 设置元素在 3D 坐标轴上相对旋转（角度）
+     */
+    VFXItem.prototype.rotate = function (x, y, z) {
+        var q = [0, 0, 0, 1];
+        quatFromRotation(q, x, y, z);
+        quatStar(q, q);
+        this.transform.rotateByQuat(q);
+    };
+    /**
+     * 设置元素在 3D 坐标轴上相对缩放
+     */
+    VFXItem.prototype.scale = function (x, y, z) {
+        this.transform.scaleBy(x, y, z);
+    };
+    /**
+     * 设置元素的在画布上的像素位置
+     */
+    VFXItem.prototype.setPositionByPixel = function (x, y) {
+        if (this.composition) {
+            var z = this.transform.getWorldPosition()[2];
+            var _a = __read$1(this.composition.camera.getInverseVPRatio(z), 2), rx = _a[0], ry = _a[1];
+            var width = this.composition.renderer.getWidth() / 2;
+            var height = this.composition.renderer.getHeight() / 2;
+            this.transform.setPosition(2 * x * rx / width, -2 * y * ry / height, z);
+        }
+    };
+    /**
+     * 设置元素在 3D 坐标轴的位置
+     */
+    VFXItem.prototype.setPosition = function (x, y, z) {
+        this.transform.setPosition(x, y, z);
+    };
+    /**
+     * 设置元素在 3D 坐标轴的角度
+     */
+    VFXItem.prototype.setRotation = function (x, y, z) {
+        this.transform.setRotation(x, y, z);
+    };
+    /**
+     * 设置元素在 3D 坐标轴的缩放
+     */
+    VFXItem.prototype.setScale = function (x, y, z) {
+        this.transform.setScale(x, y, z);
+    };
     /**
      * 获取元素包围盒
      * @override
@@ -10119,6 +10201,15 @@ var VFXItem = /** @class */ (function () {
         }
         this.started = false;
     };
+    VFXItem.prototype.translateByPixel = function (x, y) {
+        if (this.composition) {
+            var z = this.transform.getWorldPosition()[2];
+            var _a = __read$1(this.composition.camera.getInverseVPRatio(z), 2), rx = _a[0], ry = _a[1];
+            var width = this.composition.renderer.getWidth() / 2;
+            var height = this.composition.renderer.getHeight() / 2;
+            this.transform.translate(2 * x * rx / width, -2 * y * ry / height, 0);
+        }
+    };
     /**
      * 销毁元素
      */
@@ -11178,6 +11269,21 @@ function generateHalfFloatTexture(engine, data, width, height) {
     });
 }
 
+var RUNTIME_ENV = 'runtime_env';
+var LOG_TYPE = 'galacean-effects';
+var RENDER_PREFER_LOOKUP_TEXTURE = 'lookup_texture';
+// 数据模板使用 offscreen canvas 绘制
+var TEMPLATE_USE_OFFSCREEN_CANVAS = 'offscreen_canvas';
+// 后处理配置相关
+var POST_PROCESS_SETTINGS = 'post_process_settings';
+var config = {};
+function getConfig(name) {
+    return config[name];
+}
+function setConfig(name, value) {
+    return config[name] = value;
+}
+
 var HEADER_LEN = 12 + 13 * 4; // identifier + header elements (not including key value meta-data pairs)
 var COMPRESSED_2D = 0; // uses a gl.compressedTexImage2D()
 //const COMPRESSED_3D = 1; // uses a gl.compressedTexImage3D()
@@ -11226,15 +11332,24 @@ var KTXTexture = /** @class */ (function () {
         // value of zero is an indication to generate mipmaps @ runtime.  Not usually allowed for compressed, so disregard.
         this.numberOfMipmapLevels = Math.max(1, this.numberOfMipmapLevels);
         if (this.pixelHeight === 0 || this.pixelDepth !== 0) {
-            console.warn('only 2D textures currently supported');
+            console.warn({
+                content: 'only 2D textures currently supported',
+                type: LOG_TYPE,
+            });
             return;
         }
         if (this.numberOfArrayElements !== 0) {
-            console.warn('texture arrays not currently supported');
+            console.warn({
+                content: 'texture arrays not currently supported',
+                type: LOG_TYPE,
+            });
             return;
         }
         if (this.numberOfFaces !== facesExpected) {
-            console.warn('number of faces expected' + facesExpected + ', but found ' + this.numberOfFaces);
+            console.warn({
+                content: 'number of faces expected' + facesExpected + ', but found ' + this.numberOfFaces,
+                type: LOG_TYPE,
+            });
             return;
         }
         // we now have a completely validated file, so could use existence of loadType as success
@@ -11921,20 +12036,6 @@ function generateEmptyTypedArray(type) {
     return new Float32Array(0);
 }
 
-var RUNTIME_ENV = 'runtime_env';
-var RENDER_PREFER_LOOKUP_TEXTURE = 'lookup_texture';
-// 数据模板使用 offscreen canvas 绘制
-var TEMPLATE_USE_OFFSCREEN_CANVAS = 'offscreen_canvas';
-// 后处理配置相关
-var POST_PROCESS_SETTINGS = 'post_process_settings';
-var config = {};
-function getConfig(name) {
-    return config[name];
-}
-function setConfig(name, value) {
-    return config[name] = value;
-}
-
 var seed$8 = 1;
 /**
  * Mesh 抽象类
@@ -14271,14 +14372,10 @@ var SpriteMesh = /** @class */ (function () {
         var uSize = [1, 1, 1, 0];
         var uQuat = [0, 0, 1, 1];
         var uColor = selfData.color || [mainDataArray[uColorStart], mainDataArray[uColorStart + 1], mainDataArray[uColorStart + 2], mainDataArray[uColorStart + 3]];
-        // if (selfData.startSize) {
-        //   selfData.transform.scaleBy(1 / selfData.startSize[0], 1 / selfData.startSize[1], 1);
-        // }
+        if (!isNaN(item.getCustomOpacity())) {
+            uColor[3] = item.getCustomOpacity();
+        }
         selfData.transform.assignWorldTRS(uPos, uQuat, uSize);
-        // TODO 兼容改变锚点，位置不移动
-        // if (selfData.startSize) {
-        //   selfData.transform.scaleBy(selfData.startSize[0], selfData.startSize[1], 1);
-        // }
         /* 要过包含父节点颜色/透明度变化的动画的帧对比 打开这段兼容代码 */
         // vecMulCombine(uColor, selfData.color, parentData.color);
         /***********************/
@@ -15459,6 +15556,9 @@ var CalculateItem = /** @class */ (function () {
         get: function () {
             return this.basicTransform.scale;
         },
+        set: function (scale) {
+            this.basicTransform.scale = scale;
+        },
         enumerable: false,
         configurable: true
     });
@@ -15657,6 +15757,21 @@ var SpriteItem = /** @class */ (function (_super) {
         }
         return ret;
     };
+    /**
+     * @internal
+     */
+    SpriteItem.prototype.setColor = function (r, g, b, a) {
+        this.customColor = [r, g, b, a];
+    };
+    SpriteItem.prototype.setOpacity = function (opacity) {
+        this.customOpacity = opacity;
+    };
+    /**
+     * @internal
+     */
+    SpriteItem.prototype.getCustomOpacity = function () {
+        return this.customOpacity;
+    };
     SpriteItem.prototype.getRenderData = function (_time, init) {
         var ret = _super.prototype.getRenderData.call(this, _time, init);
         var colorInc = vecFill(tempColor, 1);
@@ -15664,18 +15779,23 @@ var SpriteItem = /** @class */ (function (_super) {
         var time = _time < 0 ? _time : Math.max(_time, 0.);
         var duration = this.options.duration;
         var life = time / duration < 0 ? 0 : (time / duration > 1 ? 1 : time / duration);
-        var opacityOverLifetime = this.opacityOverLifetime;
-        var colorOverLifetime = this.colorOverLifetime;
-        if (colorOverLifetime) {
-            colorInc = getColorFromGradientStops(colorOverLifetime, life, true);
-            colorChanged = true;
-        }
-        if (opacityOverLifetime) {
-            colorInc[3] *= opacityOverLifetime.getValue(life);
-            colorChanged = true;
+        if (this.customColor) {
+            ret.color = this.customColor;
         }
-        if (colorChanged || init) {
-            ret.color = vecMulCombine(this.startColor, colorInc, this.options.startColor);
+        else {
+            var opacityOverLifetime = this.opacityOverLifetime;
+            var colorOverLifetime = this.colorOverLifetime;
+            if (colorOverLifetime) {
+                colorInc = getColorFromGradientStops(colorOverLifetime, life, true);
+                colorChanged = true;
+            }
+            if (opacityOverLifetime) {
+                colorInc[3] *= opacityOverLifetime.getValue(life);
+                colorChanged = true;
+            }
+            if (colorChanged || init) {
+                ret.color = vecMulCombine(this.startColor, colorInc, this.options.startColor);
+            }
         }
         var ta = this.textureSheetAnimation;
         if (ta) {
@@ -15780,6 +15900,15 @@ var SpriteVFXItem = /** @class */ (function (_super) {
         this.transform.assignWorldTRS(pos);
         return pos;
     };
+    /**
+     * @internal
+     */
+    SpriteVFXItem.prototype.setColor = function (r, g, b, a) {
+        this.content.setColor(r, g, b, a);
+    };
+    SpriteVFXItem.prototype.setOpacity = function (opacity) {
+        this.content.setOpacity(opacity);
+    };
     /**
      * 获取图层包围盒的类型和世界坐标
      * @returns
@@ -18462,6 +18591,32 @@ var ParticleSystem = /** @class */ (function () {
             this.trailMesh.mesh.setVisible(visible);
         }
     };
+    ParticleSystem.prototype.setOpacity = function (opacity) {
+        var material = this.particleMesh.mesh.material;
+        var geometry = this.particleMesh.mesh.geometry;
+        var originalColor = material.getVector4('uOpacityOverLifetimeValue') || [1, 1, 1, 1];
+        material.setVector4('uOpacityOverLifetimeValue', [originalColor[0], originalColor[1], originalColor[2], opacity]);
+        var data = geometry.getAttributeData('aColor') || [];
+        for (var i = 0; i < data.length; i += 32) {
+            data[i * 8 + 7] = opacity;
+        }
+    };
+    /**
+     * @internal
+     */
+    ParticleSystem.prototype.setColor = function (r, g, b, a) {
+        var material = this.particleMesh.mesh.material;
+        var geometry = this.particleMesh.mesh.geometry;
+        var originalColor = material.getVector4('uOpacityOverLifetimeValue') || [1, 1, 1, 1];
+        material.setVector4('uOpacityOverLifetimeValue', [originalColor[0], originalColor[1], originalColor[2], a]);
+        var data = geometry.getAttributeData('aColor') || [];
+        for (var i = 0; i < data.length; i += 32) {
+            data[i * 8 + 4] = r;
+            data[i * 8 + 5] = g;
+            data[i * 8 + 6] = b;
+            data[i * 8 + 7] = a;
+        }
+    };
     ParticleSystem.prototype.setParentTransform = function (transform) {
         this.parentTransform = transform;
     };
@@ -19012,6 +19167,15 @@ var ParticleVFXItem = /** @class */ (function (_super) {
             content.meshes.forEach(function (mesh) { return mesh.dispose({ material: { textures: exports.DestroyOptions.keep } }); });
         }
     };
+    /**
+     * @internal
+     */
+    ParticleVFXItem.prototype.setColor = function (r, g, b, a) {
+        this.content.setColor(r, g, b, a);
+    };
+    ParticleVFXItem.prototype.setOpacity = function (opacity) {
+        this.content.setOpacity(opacity);
+    };
     ParticleVFXItem.prototype.stopParticleEmission = function () {
         if (this.content) {
             this.content.emissionStopped = true;
@@ -19320,6 +19484,9 @@ var CalculateVFXItem = /** @class */ (function (_super) {
             /********************/
         }
     };
+    CalculateVFXItem.prototype.setScale = function (x, y, z) {
+        this.content.startSize = [x, y, z];
+    };
     CalculateVFXItem.prototype.getHitTestParams = function (force) {
     };
     CalculateVFXItem.prototype.getRenderData = function () {
@@ -20903,11 +21070,12 @@ var TextItem = /** @class */ (function (_super) {
         var layout = this.textLayout;
         var fontScale = style.fontScale;
         var width = (layout.width + style.fontOffset) * fontScale;
+        var height = layout.height * fontScale;
         var fontSize = style.fontSize * fontScale;
         var lineHeight = layout.lineHeight * fontScale;
         this.char = this.text.split('');
         this.canvas.width = width;
-        this.canvas.height = layout.height * fontScale;
+        this.canvas.height = height;
         context.clearRect(0, 0, width, this.canvas.height);
         // fix bug 1/255
         context.fillStyle = 'rgba(255, 255, 255, 0.0039)';
@@ -20972,12 +21140,16 @@ var TextItem = /** @class */ (function (_super) {
         }
         //与 toDataURL() 两种方式都需要像素读取操作
         var imageData = context.getImageData(0, 0, this.canvas.width, this.canvas.height);
-        (_a = this.mesh) === null || _a === void 0 ? void 0 : _a.mesh.material.setTexture('uSampler0', Texture.createWithData(this.engine, imageData, {
+        (_a = this.mesh) === null || _a === void 0 ? void 0 : _a.mesh.material.setTexture('uSampler0', Texture.createWithData(this.engine, {
+            data: new Uint8Array(imageData.data),
+            width: imageData.width,
+            height: imageData.height,
+        }, {
             flipY: true,
             magFilter: glContext.LINEAR,
             minFilter: glContext.LINEAR,
-            wrapS: glContext.REPEAT,
-            wrapT: glContext.REPEAT,
+            wrapS: glContext.CLAMP_TO_EDGE,
+            wrapT: glContext.CLAMP_TO_EDGE,
         }));
         this.isDirty = false;
     };
@@ -21121,7 +21293,7 @@ var TextLoader = /** @class */ (function (_super) {
         return _this;
     }
     TextLoader.prototype.onCompositionDestroyed = function (composition) {
-        if (composition.reusable || composition.keepResource) {
+        if (composition.reusable) {
             this.addItems.forEach(function (vfxitem) {
                 var _a;
                 (_a = vfxitem.content.mesh) === null || _a === void 0 ? void 0 : _a.mesh.dispose({ material: { textures: exports.DestroyOptions.keep } });
@@ -22075,6 +22247,16 @@ var Camera = /** @class */ (function () {
     Camera.prototype.getModelViewProjection = function (out, model) {
         return mat4multiply(out, this.viewProjectionMatrix, model);
     };
+    /**
+     * 获取归一化坐标和 3D 世界坐标的换算比例
+     * @param z - 当前的位置 z
+     */
+    Camera.prototype.getInverseVPRatio = function (z) {
+        var pos = [0, 0, 0];
+        var nz = vec3MulMat4(pos, [0, 0, z], this.getViewProjectionMatrix())[2];
+        vec3MulMat4(pos, [1, 1, nz], this.getInverseViewProjectionMatrix());
+        return pos;
+    };
     /**
      * 设置相机的旋转四元数
      * @param value - 旋转四元数
@@ -22265,7 +22447,7 @@ var filters = {
  * Name: @galacean/effects-specification
  * Description: Galacean Effects JSON Specification
  * Author: Ant Group CO., Ltd.
- * Version: v0.0.1
+ * Version: v1.0.0
  */
 
 /*********************************************/
@@ -22736,7 +22918,7 @@ var ItemEndBehavior;
 (function (ItemEndBehavior) {
     ItemEndBehavior[ItemEndBehavior["destroy"] = END_BEHAVIOR_DESTROY] = "destroy";
     ItemEndBehavior[ItemEndBehavior["loop"] = END_BEHAVIOR_RESTART] = "loop";
-    ItemEndBehavior[ItemEndBehavior["forward"] = END_BEHAVIOR_FREEZE] = "forward";
+    ItemEndBehavior[ItemEndBehavior["freeze"] = END_BEHAVIOR_FREEZE] = "freeze";
 })(ItemEndBehavior || (ItemEndBehavior = {}));
 var ParentItemEndBehavior;
 (function (ParentItemEndBehavior) {
@@ -22982,7 +23164,12 @@ function __read(o, n) {
         finally { if (e) throw e.error; }
     }
     return ar;
-}
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
 
 function arrAdd(arr, item) {
     if (!arr.includes(item)) {
@@ -23604,7 +23791,7 @@ function version21Migration(json) {
         composition.items.forEach(function (item) {
             if (item.type === ItemType.null) {
                 if (item.endBehavior === ItemEndBehavior.destroy) {
-                    item.endBehavior = ItemEndBehavior.forward;
+                    item.endBehavior = ItemEndBehavior.freeze;
                 }
             }
         });
@@ -23612,6 +23799,24 @@ function version21Migration(json) {
     json.version = '2.1';
     return json;
 }
+/**
+ * 2.2 以下版本数据适配（mars-player@2.5.0 及以上版本支持 2.2 以下数据的适配）
+ */
+function version22Migration(json) {
+    var _a;
+    var singleVersion = (_a = json.version) === null || _a === void 0 ? void 0 : _a.split('.');
+    if (!singleVersion || Number(singleVersion[0]) > 2 || (Number(singleVersion[0]) === 2 && Number(singleVersion[1]) >= 2)) {
+        return json;
+    }
+    json.compositions.forEach(function (composition) {
+        composition.items.forEach(function (item) {
+            if (item.type === ItemType.mesh || item.type === ItemType.light) {
+                item.endBehavior = item.endBehavior === 1 ? ItemEndBehavior.destroy : item.endBehavior;
+            }
+        });
+    });
+    return json;
+}
 
 var v0 = /^(\d+)\.(\d+)\.(\d+)(-(\w+)\.\d+)?$/;
 var standardVersion = /^(\d+)\.(\d+)$/;
@@ -23621,6 +23826,8 @@ function getStandardJSON(json) {
     if (!json || typeof json !== 'object') {
         throw Error('expect a json object');
     }
+    // 修正老版本数据中，meshItem以及lightItem结束行为错误问题
+    version22Migration(json);
     if (v0.test(json.version)) {
         reverseParticle = ((_a = (/^(\d+)/).exec(json.version)) === null || _a === void 0 ? void 0 : _a[0]) === '0';
         return version21Migration(getStandardJSONFromV0(json));
@@ -24219,7 +24426,10 @@ var AssetManager = /** @class */ (function () {
                                 // 触发插件系统 pluginSystem 的回调 prepareResource
                                 _d.sent();
                                 totalTime = performance.now() - startTime;
-                                console.debug("".concat(timeLabel, ": ").concat(totalTime.toFixed(4), "ms, ").concat(timeInfos.join(' ')));
+                                console.info({
+                                    content: "".concat(timeLabel, ": ").concat(totalTime.toFixed(4), "ms, ").concat(timeInfos.join(' ')),
+                                    type: LOG_TYPE,
+                                });
                                 window.clearTimeout(loadTimer);
                                 scene.totalTime = totalTime;
                                 scene.startTime = startTime;
@@ -24343,7 +24553,10 @@ var AssetManager = /** @class */ (function () {
                                 return [3 /*break*/, 4];
                             case 3:
                                 _b.sent();
-                                console.warn("Invalid fonts source: ".concat(font.fontURL));
+                                console.warn({
+                                    content: "Invalid fonts source: ".concat(font.fontURL),
+                                    type: LOG_TYPE,
+                                });
                                 return [3 /*break*/, 4];
                             case 4: return [2 /*return*/];
                         }
@@ -24750,6 +24963,9 @@ var CompVFXItem = /** @class */ (function (_super) {
         this.tempQueue.length = 0;
         this.itemsToRemove.length = 0;
     };
+    CompVFXItem.prototype.handleVisibleChanged = function (visible) {
+        this.items.forEach(function (item) { return item.setVisible(visible); });
+    };
     CompVFXItem.prototype.getUpdateTime = function (t) {
         var startTime = this.startTimeInms;
         var now = this.timeInms;
@@ -24817,6 +25033,7 @@ var CompVFXItem = /** @class */ (function (_super) {
     };
     /**
      * 获取指定元素当前时刻真正起作用的父元素, 需要在元素生命周期内获取
+     * @internal
      * @param item - 指定元素
      * @return 当父元素生命周期结束时，返回空
      */
@@ -24927,17 +25144,22 @@ var Composition = /** @class */ (function () {
         this.paused = false;
         this.lastVideoUpdateTime = 0;
         this.postLoaders = [];
-        var keepResource = props.keepResource, _b = props.reusable, reusable = _b === void 0 ? false : _b, _c = props.baseRenderOrder, baseRenderOrder = _c === void 0 ? 0 : _c, renderer = props.renderer, handlePlayerPause = props.handlePlayerPause, handleMessageItem = props.handleMessageItem, handleEnd = props.handleEnd, event = props.event, width = props.width, height = props.height;
+        var _b = props.reusable, reusable = _b === void 0 ? false : _b, _c = props.speed, speed = _c === void 0 ? 1 : _c, _d = props.baseRenderOrder, baseRenderOrder = _d === void 0 ? 0 : _d, renderer = props.renderer, handlePlayerPause = props.handlePlayerPause, handleMessageItem = props.handleMessageItem, handleEnd = props.handleEnd, event = props.event, width = props.width, height = props.height;
         this.compositionSourceManager = new CompositionSourceManager(scene, renderer.engine);
         scene.jsonScene.imgUsage = undefined;
-        if (!keepResource) {
+        if (reusable) {
+            this.keepResource = true;
             scene.textures = undefined;
             scene.consumed = true;
         }
-        var _d = this.compositionSourceManager, sourceContent = _d.sourceContent, pluginSystem = _d.pluginSystem, imgUsage = _d.imgUsage, totalTime = _d.totalTime, renderLevel = _d.renderLevel;
+        var _e = this.compositionSourceManager, sourceContent = _e.sourceContent, pluginSystem = _e.pluginSystem, imgUsage = _e.imgUsage, totalTime = _e.totalTime, renderLevel = _e.renderLevel;
         assertExist(sourceContent);
         var vfxItem = new CompVFXItem(sourceContent, this);
         var imageUsage = (!reusable && imgUsage);
+        this.transform = new Transform({
+            name: this.name,
+        });
+        vfxItem.transform = this.transform;
         this.globalVolume = sourceContent.globalVolume;
         this.width = width;
         this.height = height;
@@ -24948,21 +25170,19 @@ var Composition = /** @class */ (function () {
         this.event = event;
         this.statistic = { loadTime: totalTime !== null && totalTime !== void 0 ? totalTime : 0, loadStart: (_a = scene.startTime) !== null && _a !== void 0 ? _a : 0, firstFrameTime: 0 };
         this.reusable = reusable;
+        this.speed = speed;
         this.renderLevel = renderLevel;
-        this.handlePlayerPause = handlePlayerPause;
-        this.handleMessageItem = handleMessageItem;
-        this.handleEnd = handleEnd;
-        this.rootTransform = new Transform();
-        vfxItem.transform = this.rootTransform;
-        this.autoRefTex = !keepResource && imageUsage && vfxItem.endBehavior !== END_BEHAVIOR_RESTART$1;
+        this.autoRefTex = !this.keepResource && imageUsage && vfxItem.endBehavior !== END_BEHAVIOR_RESTART$1;
         this.content = vfxItem;
         this.name = vfxItem.name;
-        this.rootTransform.name = this.name;
         this.pluginSystem = pluginSystem;
         this.pluginSystem.initializeComposition(this, scene);
         this.camera = new Camera(this.name, __assign$1(__assign$1({}, sourceContent === null || sourceContent === void 0 ? void 0 : sourceContent.camera), { aspect: width / height }));
         this.url = scene.url;
         this.assigned = true;
+        this.handlePlayerPause = handlePlayerPause;
+        this.handleMessageItem = handleMessageItem;
+        this.handleEnd = handleEnd;
         this.createRenderFrame();
         this.reset();
     }
@@ -25007,6 +25227,12 @@ var Composition = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
+    /**
+     * 获取合成的时长
+     */
+    Composition.prototype.getDuration = function () {
+        return this.content.duration;
+    };
     Object.defineProperty(Composition.prototype, "isDestroyed", {
         /**
          * 获取销毁状态
@@ -25024,7 +25250,7 @@ var Composition = /** @class */ (function () {
         this.content.reset();
         this.prepareRender();
         this.reset();
-        this.rootTransform.setValid(true);
+        this.transform.setValid(true);
         this.content.start();
         this.forwardTime(this.startTime);
         this.content.onUpdate(0);
@@ -25044,11 +25270,25 @@ var Composition = /** @class */ (function () {
     Composition.prototype.getIndex = function () {
         return this.renderOrder;
     };
+    /**
+     * 设置合成的动画速度
+     * @param speed - 速度
+     */
+    Composition.prototype.setSpeed = function (speed) {
+        this.speed = speed;
+    };
+    /**
+     * 获取合成的动画速度
+     * @returns
+     */
+    Composition.prototype.getSpeed = function () {
+        return this.speed;
+    };
     Composition.prototype.play = function () {
-        if (this.paused) {
-            this.resume();
+        if (this.content.ended && this.reusable) {
+            this.restart();
         }
-        this.content.start();
+        this.gotoAndPlay(this.time);
     };
     /**
      * 暂停合成的播放
@@ -25063,12 +25303,16 @@ var Composition = /** @class */ (function () {
         this.paused = false;
     };
     Composition.prototype.gotoAndPlay = function (time) {
+        this.resume();
+        if (!this.content.started) {
+            this.content.start();
+            this.forwardTime(this.startTime);
+        }
+        this.forwardTime(time);
     };
-    Composition.prototype.gotoAndPause = function (time) {
-    };
-    // TODO: 待废弃
-    Composition.prototype.start = function () {
-        this.content.start();
+    Composition.prototype.gotoAndStop = function (time) {
+        this.gotoAndPlay(time);
+        this.pause();
     };
     /**
      *
@@ -25085,29 +25329,29 @@ var Composition = /** @class */ (function () {
     };
     /**
      * 跳到指定时间点（不做任何播放行为）
-     *
-     * @param time - 时间点（秒），可正可负
+     * @param time - 指定的时间
      */
     Composition.prototype.setTime = function (time) {
+        var pause = this.paused;
+        if (pause) {
+            this.resume();
+        }
+        this.forwardTime(time, true);
+        if (pause) {
+            this.pause();
+        }
     };
-    /**
-     * 快进/快退指定时间间隔
-     * @param timeInSeconds - 需要快进/快退的时间长度（秒），可正可负
-     */
-    Composition.prototype.forwardTime = function (timeInSeconds) {
-        var time = Math.round(timeInSeconds * 1000);
-        if (time) {
-            var reverse = time < 0;
-            var step = 15;
-            var t = Math.abs(time);
-            for (var ss = reverse ? -step : step; t > step; t -= step) {
-                this.update(ss);
-            }
-            if (t > 0) {
-                var ss = reverse ? -t : t;
-                this.update(ss);
-            }
+    Composition.prototype.forwardTime = function (time, skipRender) {
+        if (skipRender === void 0) { skipRender = false; }
+        var deltaTime = (this.startTime + Math.max(0, time)) * 1000 - this.content.timeInms;
+        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(reverse ? -t : t, skipRender);
     };
     /**
      * 重置状态函数
@@ -25149,14 +25393,19 @@ var Composition = /** @class */ (function () {
      * @returns 销毁合成标志位
      */
     Composition.prototype.shouldDispose = function () {
+        if (this.reusable) {
+            return false;
+        }
         var _a = this.content, ended = _a.ended, endBehavior = _a.endBehavior;
         return ended && (!endBehavior || endBehavior === END_BEHAVIOR_PAUSE_AND_DESTROY$1);
     };
     /**
      * 合成更新，针对所有 item 的更新
      * @param deltaTime - 更新的时间步长
+     * @param skipRender - 是否需要渲染
      */
-    Composition.prototype.update = function (deltaTime) {
+    Composition.prototype.update = function (deltaTime, skipRender) {
+        if (skipRender === void 0) { skipRender = false; }
         if (!this.assigned || this.paused) {
             return;
         }
@@ -25173,7 +25422,9 @@ var Composition = /** @class */ (function () {
             this.dispose();
         }
         else {
-            this.prepareRender();
+            if (!skipRender) {
+                this.prepareRender();
+            }
         }
     };
     /**
@@ -25461,7 +25712,10 @@ var Composition = /** @class */ (function () {
         (_a = this.rendererOptions) === null || _a === void 0 ? void 0 : _a.emptyTexture.dispose();
         (_b = this.pluginSystem) === null || _b === void 0 ? void 0 : _b.destroyComposition(this);
         this.update = function () {
-            console.error("Update disposed composition: ".concat(_this.name, "."));
+            console.error({
+                content: "Update disposed composition: ".concat(_this.name, "."),
+                type: LOG_TYPE,
+            });
         };
         this.handlePlayerPause = noop;
         this.dispose = noop;
@@ -25480,6 +25734,34 @@ var Composition = /** @class */ (function () {
     Composition.prototype.setEditorTransform = function (scale, dx, dy) {
         this.renderFrame.editorTransform = [scale, scale, dx, dy];
     };
+    /**
+     * 合成整体在水平方向移动 x 像素，垂直方向移动 y 像素
+     */
+    Composition.prototype.translateByPixel = function (x, y) {
+        if (!this.renderer) {
+            console.warn('Can not translate position when container not assigned');
+            return;
+        }
+        this.content.translateByPixel(x, y);
+    };
+    /**
+     * 设置合成在 3D 坐标轴上相对移动
+     */
+    Composition.prototype.translate = function (x, y, z) {
+        this.content.translate(x, y, z);
+    };
+    /**
+     * 设置合成在 3D 坐标轴上相对旋转（角度）
+     */
+    Composition.prototype.rotate = function (x, y, z) {
+        this.content.rotate(x, y, z);
+    };
+    /**
+     * 设置合成在 3D 坐标轴上相对缩放
+     */
+    Composition.prototype.scale = function (x, y, z) {
+        this.content.scale(x, y, z);
+    };
     /**
      * 卸载贴图纹理方法，减少内存
      */
@@ -25519,14 +25801,6 @@ var Composition = /** @class */ (function () {
     };
     return Composition;
 }());
-/**
- * 根据 id 查找对应的合成，可能找不到
- * @param compositions - 合成列表
- * @param id - 目标合成 id
- */
-function getComposition(compositions, id) {
-    return compositions.find(function (f) { return f.id === id; });
-}
 
 /**
  * Engine 基类，负责维护所有 GPU 资源的销毁
@@ -25632,7 +25906,10 @@ var Engine = /** @class */ (function () {
             info.push("Tex ".concat(this.textures.length));
         }
         if (info.length > 0) {
-            console.warn("Release GPU memory: ".concat(info.join(', ')));
+            console.warn({
+                content: "Release GPU memory: ".concat(info.join(', ')),
+                type: LOG_TYPE,
+            });
         }
         this.renderPasses.forEach(function (pass) {
             pass.dispose();
@@ -27273,8 +27550,11 @@ Geometry.create = function (engine, options) {
 Mesh.create = function (engine, props) {
     return new ThreeMesh(engine, props);
 };
-var version = "0.0.1-alpha.0";
-console.info('[Galacean Effects THREEJS] version: ' + "0.0.1-alpha.0");
+var version = "0.0.1-alpha.2";
+console.info({
+    content: '[Galacean Effects THREEJS] version: ' + "0.0.1-alpha.2",
+    type: LOG_TYPE,
+});
 
 exports.AbstractPlugin = AbstractPlugin;
 exports.AssetManager = AssetManager;
@@ -27323,6 +27603,7 @@ exports.InteractLoader = InteractLoader;
 exports.InteractMesh = InteractMesh;
 exports.InteractVFXItem = InteractVFXItem;
 exports.KTXTexture = KTXTexture;
+exports.LOG_TYPE = LOG_TYPE;
 exports.LineSegments = LineSegments;
 exports.LinearValue = LinearValue;
 exports.Material = Material;
@@ -27442,7 +27723,6 @@ exports.generateEmptyTypedArray = generateEmptyTypedArray;
 exports.generateHalfFloatTexture = generateHalfFloatTexture;
 exports.getBackgroundImage = getBackgroundImage;
 exports.getColorFromGradientStops = getColorFromGradientStops;
-exports.getComposition = getComposition;
 exports.getConfig = getConfig;
 exports.getDefaultTemplateCanvasPool = getDefaultTemplateCanvasPool;
 exports.getDefaultTextureFactory = getDefaultTextureFactory;