@galacean/effects-threejs 2.7.0-alpha.2 → 2.7.0-beta.0

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.7.0-alpha.2
+ * Version: v2.7.0-beta.0
  */
 
 import * as THREE from 'three';
@@ -3660,15 +3660,30 @@ var MaterialBlending;
 var TextOverflow;
 (function(TextOverflow) {
     /**
-     * display 模式下，会显示所有文本，文本大小会根据边界框调整。
-     */ TextOverflow[TextOverflow["display"] = 0] = "display";
+     * visible 模式下，文本内容超出边界框时，会继续显示内容，不进行裁剪或缩放。
+     */ TextOverflow[TextOverflow["visible"] = 0] = "visible";
+    /**
+     * display 模式下，会显示所有文本，文本字号大小会根据边界框调整。
+     */ TextOverflow[TextOverflow["display"] = 1] = "display";
     /**
      * clip 模式下，当文本内容超出边界框时，多余的会被截断。
-     */ TextOverflow[TextOverflow["clip"] = 1] = "clip";
+     */ TextOverflow[TextOverflow["clip"] = 2] = "clip";
     /**
      * ellipsis 模式下，会使用（...）来代替超出边界框的内容。
-     */ TextOverflow[TextOverflow["ellipsis"] = 2] = "ellipsis";
+     */ TextOverflow[TextOverflow["ellipsis"] = 3] = "ellipsis";
 })(TextOverflow || (TextOverflow = {}));
+var TextSizeMode;
+(function(TextSizeMode) {
+    /**
+     * 自适应宽度
+     */ TextSizeMode[TextSizeMode["autoWidth"] = 0] = "autoWidth";
+    /**
+     * 自适应高度
+     */ TextSizeMode[TextSizeMode["autoHeight"] = 1] = "autoHeight";
+    /**
+     * 固定宽高
+     */ TextSizeMode[TextSizeMode["fixed"] = 2] = "fixed";
+})(TextSizeMode || (TextSizeMode = {}));
 var TextBaseline;
 (function(TextBaseline) {
     /**
@@ -4010,6 +4025,7 @@ var index$1 = /*#__PURE__*/Object.freeze({
     get MaterialBlending () { return MaterialBlending; },
     get RenderMode3D () { return RenderMode3D; },
     get TextOverflow () { return TextOverflow; },
+    get TextSizeMode () { return TextSizeMode; },
     get TextBaseline () { return TextBaseline; },
     get TextAlignment () { return TextAlignment; },
     get TextWeight () { return TextWeight; },
@@ -4124,10 +4140,16 @@ function getDirectStore(target) {
    * 反序列化函数
    *
    * @param data - 对象的序列化的数据
-   */ _proto.fromData = function fromData(data) {};
+   */ _proto.fromData = function fromData(data) {
+        if (data.id !== undefined) {
+            this.setInstanceId(data.id);
+        }
+    };
     /**
-   *
-   */ _proto.dispose = function dispose() {};
+   * 销毁当前对象
+   */ _proto.dispose = function dispose() {
+        this.engine.removeInstance(this.guid);
+    };
     /**
    *
    * @param obj
@@ -5221,7 +5243,7 @@ var Pose = /*#__PURE__*/ function() {
         }
         for(var _iterator2 = _create_for_of_iterator_helper_loose(skeleton.defaultColorPropertyValues), _step2; !(_step2 = _iterator2()).done;){
             var defaultColor = _step2.value;
-            this.colorPropertyValues.push(defaultColor);
+            this.colorPropertyValues.push(new Color().copyFrom(defaultColor));
         }
     }
     var _proto = Pose.prototype;
@@ -6696,7 +6718,7 @@ var Skeleton = /*#__PURE__*/ function() {
                 break;
             case 1:
                 this.colorAnimatedObjects.push(animatedObject);
-                this.defaultColorPropertyValues.push(directTarget[lastPropertyName]);
+                this.defaultColorPropertyValues.push(new Color().copyFrom(directTarget[lastPropertyName]));
                 this.pathToObjectIndex.set(totalPath, this.colorAnimatedObjects.length - 1);
         }
     };
@@ -6993,6 +7015,7 @@ function _create_class(Constructor, protoProps, staticProps) {
         if (this.item) {
             removeItem(this.item.components, this);
         }
+        EffectsObject.prototype.dispose.call(this);
     };
     _proto.start = function start() {
         if (this.isStartCalled) {
@@ -12183,9 +12206,8 @@ var seed$8 = 1;
         this.destroyed = true;
         if (this.engine !== undefined) {
             this.engine.removeMesh(this);
-            // @ts-expect-error
-            this.engine = undefined;
         }
+        RendererComponent.prototype.dispose.call(this);
     };
     _create_class(Mesh, [
         {
@@ -13341,8 +13363,6 @@ var seed$6 = 1;
         this.clearAction = clearAction;
         this.name = "RenderFrame" + seed$6++;
         var firstRP = renderPasses[0];
-        this.emptyTexture = generateWhiteTexture(engine);
-        this.transparentTexture = generateTransparentTexture(engine);
         this.camera = camera;
         this.keepColorBuffer = keepColorBuffer;
         this.renderPassInfoMap.set(firstRP, {
@@ -13391,8 +13411,6 @@ var seed$6 = 1;
         }
         this.passTextureCache.dispose();
         this._renderPasses.length = 0;
-        this.emptyTexture.dispose();
-        this.transparentTexture.dispose();
         if (this.resource) {
             var _this_resource_depthStencil_texture, _this_resource_depthStencil;
             this.resource.color_a.dispose();
@@ -14052,7 +14070,7 @@ var Renderer = /*#__PURE__*/ function() {
         _this.renderer = {
             renderMode: RenderMode.MESH,
             blending: BlendingMode.ALPHA,
-            texture: _this.engine.emptyTexture,
+            texture: _this.engine.whiteTexture,
             occlusion: false,
             transparentOcclusion: false,
             side: SideMode.DOUBLE,
@@ -14260,7 +14278,7 @@ var Renderer = /*#__PURE__*/ function() {
         this.renderer = {
             renderMode: (_renderer_renderMode = renderer.renderMode) != null ? _renderer_renderMode : RenderMode.MESH,
             blending: (_renderer_blending = renderer.blending) != null ? _renderer_blending : BlendingMode.ALPHA,
-            texture: renderer.texture ? this.engine.findObject(renderer.texture) : this.engine.emptyTexture,
+            texture: renderer.texture ? this.engine.findObject(renderer.texture) : this.engine.whiteTexture,
             occlusion: !!renderer.occlusion,
             transparentOcclusion: !!renderer.transparentOcclusion || this.maskManager.maskMode === MaskMode.MASK,
             side: (_renderer_side = renderer.side) != null ? _renderer_side : SideMode.DOUBLE,
@@ -16104,20 +16122,26 @@ function oldBezierKeyFramesToNew(props) {
         keyDatas.push(keyData);
         lastControl = p2;
     }
-    var calculateSlop = function(p0, p1) {
+    var calculateSlope = function(p0, p1) {
         return (p1.y - p0.y) / (p1.x - p0.x + NumberEpsilon);
     };
     for(var i1 = 0; i1 < keyDatas.length; i1++){
         var leftControl = keyDatas[i1].leftControl;
         var value = keyDatas[i1].value;
         var rightControl = keyDatas[i1].rightControl;
-        var outSlop = calculateSlop(value, rightControl);
-        var inSlop = calculateSlop(leftControl, value);
+        var inSlope = 0;
+        var outSlope = 0;
+        if (i1 > 0) {
+            inSlope = calculateSlope(leftControl, value);
+        }
+        if (i1 < keyDatas.length - 1) {
+            outSlope = calculateSlope(value, rightControl);
+        }
         var keyframe = {
             time: value.x,
             value: value.y,
-            inSlope: inSlop,
-            outSlope: outSlop,
+            inSlope: inSlope,
+            outSlope: outSlope,
             inWeight: 0,
             outWeight: 0,
             tangentMode: keyDatas[i1].tangentMode,
@@ -16254,8 +16278,6 @@ var ShapeComponent = /*#__PURE__*/ function(RendererComponent) {
     function ShapeComponent(engine) {
         var _this;
         _this = RendererComponent.call(this, engine) || this;
-        _this.hasStroke = false;
-        _this.hasFill = false;
         _this.shapeDirty = true;
         _this.materialDirty = true;
         _this.graphicsPath = new GraphicsPath();
@@ -16274,6 +16296,8 @@ var ShapeComponent = /*#__PURE__*/ function(RendererComponent) {
         /**
    * 用于点击测试的碰撞器
    */ _this.meshCollider = new MeshCollider();
+        _this.fillMaterials = [];
+        _this.strokeMaterials = [];
         _this.getHitTestParams = function(force) {
             var sizeMatrix = Matrix4.fromScale(_this.transform.size.x, _this.transform.size.y, 1);
             var worldMatrix = sizeMatrix.premultiply(_this.transform.getWorldMatrix());
@@ -16285,15 +16309,15 @@ var ShapeComponent = /*#__PURE__*/ function(RendererComponent) {
                         behavior: 0,
                         type: area.type,
                         triangles: area.area,
-                        backfaceCulling: _this.renderer.side === SideMode.FRONT
+                        backfaceCulling: _this.rendererOptions.side === SideMode.FRONT
                     };
                 }
             }
         };
-        _this.renderer = {
+        _this.rendererOptions = {
             renderMode: RenderMode.MESH,
             blending: BlendingMode.ALPHA,
-            texture: _this.engine.emptyTexture,
+            texture: _this.engine.whiteTexture,
             occlusion: false,
             transparentOcclusion: false,
             side: SideMode.DOUBLE,
@@ -16381,25 +16405,6 @@ var ShapeComponent = /*#__PURE__*/ function(RendererComponent) {
             indexCount: 0,
             vertexCount: 0
         });
-        // Create Material
-        //-------------------------------------------------------------------------
-        var materialProps = {
-            shader: {
-                vertex: vert,
-                fragment: frag,
-                glslVersion: GLSLVersion.GLSL1
-            }
-        };
-        var fillMaterial = Material.create(engine, materialProps);
-        var strokeMaterial = Material.create(engine, materialProps);
-        fillMaterial.depthMask = false;
-        fillMaterial.depthTest = true;
-        fillMaterial.blending = true;
-        _this.material = fillMaterial;
-        strokeMaterial.depthMask = false;
-        strokeMaterial.depthTest = true;
-        strokeMaterial.blending = true;
-        _this.materials[1] = strokeMaterial;
         return _this;
     }
     var _proto = ShapeComponent.prototype;
@@ -16427,18 +16432,26 @@ var ShapeComponent = /*#__PURE__*/ function(RendererComponent) {
         if (!this.isActiveAndEnabled) {
             return;
         }
-        var previousColorMask0 = this.material.colorMask;
-        var previousColorMask1 = this.materials[1].colorMask;
-        this.material.colorMask = false;
-        this.materials[1].colorMask = false;
-        this.draw(renderer);
-        this.material.colorMask = previousColorMask0;
-        this.materials[1].colorMask = previousColorMask1;
+        var previousColorMask = false;
+        for(var i = 0; i < this.fillMaterials.length; i++){
+            previousColorMask = this.fillMaterials[i].colorMask;
+            this.fillMaterials[i].colorMask = false;
+            renderer.drawGeometry(this.geometry, this.transform.getWorldMatrix(), this.fillMaterials[i], 0);
+            this.fillMaterials[i].colorMask = previousColorMask;
+        }
+        for(var i1 = 0; i1 < this.strokeMaterials.length; i1++){
+            previousColorMask = this.strokeMaterials[i1].colorMask;
+            this.strokeMaterials[i1].colorMask = false;
+            renderer.drawGeometry(this.geometry, this.transform.getWorldMatrix(), this.strokeMaterials[i1], 1);
+            this.strokeMaterials[i1].colorMask = previousColorMask;
+        }
     };
     _proto.draw = function draw(renderer) {
-        for(var i = 0; i < this.materials.length; i++){
-            var material = this.materials[i];
-            renderer.drawGeometry(this.geometry, this.transform.getWorldMatrix(), material, i);
+        for(var i = 0; i < this.fillMaterials.length; i++){
+            renderer.drawGeometry(this.geometry, this.transform.getWorldMatrix(), this.fillMaterials[i], 0);
+        }
+        for(var i1 = 0; i1 < this.strokeMaterials.length; i1++){
+            renderer.drawGeometry(this.geometry, this.transform.getWorldMatrix(), this.strokeMaterials[i1], 1);
         }
     };
     _proto.getBoundingBox = function getBoundingBox() {
@@ -16452,7 +16465,7 @@ var ShapeComponent = /*#__PURE__*/ function(RendererComponent) {
         var vertices = [];
         var indices = [];
         // Triangulate shapePrimitives, build fill and stroke shape geometry
-        if (this.hasFill) {
+        if (this.fills.length > 0) {
             for(var _iterator = _create_for_of_iterator_helper_loose(shapePrimitives), _step; !(_step = _iterator()).done;){
                 var shapePrimitive = _step.value;
                 var shape = shapePrimitive.shape;
@@ -16464,7 +16477,7 @@ var ShapeComponent = /*#__PURE__*/ function(RendererComponent) {
             }
         }
         var fillIndexCount = indices.length;
-        if (this.hasStroke) {
+        if (this.strokes.length > 0) {
             for(var _iterator1 = _create_for_of_iterator_helper_loose(shapePrimitives), _step1; !(_step1 = _iterator1()).done;){
                 var shapePrimitive1 = _step1.value;
                 var shape1 = shapePrimitive1.shape;
@@ -16602,40 +16615,12 @@ var ShapeComponent = /*#__PURE__*/ function(RendererComponent) {
         }
     };
     _proto.updateMaterials = function updateMaterials() {
-        for(var _iterator = _create_for_of_iterator_helper_loose(this.materials), _step; !(_step = _iterator()).done;){
-            var material = _step.value;
-            var renderer = this.renderer;
-            var side = renderer.side, occlusion = renderer.occlusion, blendMode = renderer.blending, mask = renderer.mask, texture = renderer.texture;
-            var maskMode = this.maskManager.maskMode;
-            material.blending = true;
-            material.depthTest = true;
-            material.depthMask = occlusion;
-            material.stencilRef = mask !== undefined ? [
-                mask,
-                mask
-            ] : undefined;
-            setBlendMode(material, blendMode);
-            // 兼容旧数据中模板需要渲染的情况
-            setMaskMode(material, maskMode);
-            setSideMode(material, side);
-            material.shader.shaderData.properties = '_MainTex("_MainTex",2D) = "white" {}';
-            material.setVector4("_TexOffset", new Vector4(0, 0, 1, 1));
-            material.setTexture("_MainTex", texture);
-            var preMultiAlpha = getPreMultiAlpha(blendMode);
-            var texParams = new Vector4();
-            texParams.x = renderer.occlusion ? +renderer.transparentOcclusion : 1;
-            texParams.y = preMultiAlpha;
-            texParams.z = renderer.renderMode;
-            texParams.w = maskMode;
-            material.setVector4("_TexParams", texParams);
-            if (texParams.x === 0 || this.maskManager.alphaMaskEnabled) {
-                material.enableMacro("ALPHA_CLIP");
-            } else {
-                material.disableMacro("ALPHA_CLIP");
-            }
+        for(var i = 0; i < this.fills.length; i++){
+            this.updatePaintMaterial(this.fillMaterials[i], this.fills[i]);
+        }
+        for(var i1 = 0; i1 < this.strokes.length; i1++){
+            this.updatePaintMaterial(this.strokeMaterials[i1], this.strokes[i1]);
         }
-        this.updatePaintMaterial(this.material, this.fills[0]);
-        this.updatePaintMaterial(this.materials[1], this.strokes[0]);
     };
     _proto.updatePaintMaterial = function updatePaintMaterial(material, paint) {
         material.setFloat("_FillType", paint.type);
@@ -16672,6 +16657,46 @@ var ShapeComponent = /*#__PURE__*/ function(RendererComponent) {
         material.setVector2("_StartPoint", startPoint);
         material.setVector2("_EndPoint", endPoint);
     };
+    _proto.createMaterialFromRendererOptions = function createMaterialFromRendererOptions(rendererOptions) {
+        var materialProps = {
+            shader: {
+                vertex: vert,
+                fragment: frag,
+                glslVersion: GLSLVersion.GLSL1
+            }
+        };
+        var material = Material.create(this.engine, materialProps);
+        var renderer = rendererOptions;
+        var side = renderer.side, occlusion = renderer.occlusion, blendMode = renderer.blending, mask = renderer.mask, texture = renderer.texture;
+        var maskMode = this.maskManager.maskMode;
+        material.blending = true;
+        material.depthTest = true;
+        material.depthMask = occlusion;
+        material.stencilRef = mask !== undefined ? [
+            mask,
+            mask
+        ] : undefined;
+        setBlendMode(material, blendMode);
+        // 兼容旧数据中模板需要渲染的情况
+        setMaskMode(material, maskMode);
+        setSideMode(material, side);
+        material.shader.shaderData.properties = '_ImageTex("_ImageTex",2D) = "white" {}';
+        material.setVector4("_TexOffset", new Vector4(0, 0, 1, 1));
+        material.setTexture("_ImageTex", texture);
+        var preMultiAlpha = getPreMultiAlpha(blendMode);
+        var texParams = new Vector4();
+        texParams.x = renderer.occlusion ? +renderer.transparentOcclusion : 1;
+        texParams.y = preMultiAlpha;
+        texParams.z = renderer.renderMode;
+        texParams.w = maskMode;
+        material.setVector4("_TexParams", texParams);
+        if (texParams.x === 0 || this.maskManager.alphaMaskEnabled) {
+            material.enableMacro("ALPHA_CLIP");
+        } else {
+            material.disableMacro("ALPHA_CLIP");
+        }
+        return material;
+    };
     _proto.fromData = function fromData(data) {
         RendererComponent.prototype.fromData.call(this, data);
         this.shapeDirty = true;
@@ -16680,11 +16705,11 @@ var ShapeComponent = /*#__PURE__*/ function(RendererComponent) {
         }
         var _data_renderer;
         var renderer = (_data_renderer = data.renderer) != null ? _data_renderer : {};
-        var _renderer_renderMode, _renderer_blending, _renderer_side;
-        this.renderer = {
-            renderMode: (_renderer_renderMode = renderer.renderMode) != null ? _renderer_renderMode : RenderMode.MESH,
+        var _renderer_blending, _renderer_side;
+        this.rendererOptions = {
+            renderMode: RenderMode.MESH,
             blending: (_renderer_blending = renderer.blending) != null ? _renderer_blending : BlendingMode.ALPHA,
-            texture: renderer.texture ? this.engine.findObject(renderer.texture) : this.engine.emptyTexture,
+            texture: renderer.texture ? this.engine.findObject(renderer.texture) : this.engine.whiteTexture,
             occlusion: !!renderer.occlusion,
             transparentOcclusion: !!renderer.transparentOcclusion || this.maskManager.maskMode === MaskMode.MASK,
             side: (_renderer_side = renderer.side) != null ? _renderer_side : SideMode.DOUBLE,
@@ -16696,22 +16721,21 @@ var ShapeComponent = /*#__PURE__*/ function(RendererComponent) {
         this.strokeWidth = (_data_strokeWidth = data.strokeWidth) != null ? _data_strokeWidth : 1;
         var _data_strokeJoin;
         this.strokeJoin = (_data_strokeJoin = data.strokeJoin) != null ? _data_strokeJoin : LineJoin.Miter;
-        for(var _iterator = _create_for_of_iterator_helper_loose(data.strokes), _step; !(_step = _iterator()).done;){
-            var stroke = _step.value;
-            var strokeParam = stroke;
-            if (strokeParam) {
-                this.hasStroke = true;
-                this.strokes[0] = this.createPaint(strokeParam);
-            }
-        }
-        for(var _iterator1 = _create_for_of_iterator_helper_loose(data.fills), _step1; !(_step1 = _iterator1()).done;){
-            var fill = _step1.value;
-            var fillParam = fill;
-            if (fillParam) {
-                this.hasFill = true;
-                this.fills[0] = this.createPaint(fillParam);
-            }
-        }
+        this.fills.length = 0;
+        this.fillMaterials.length = 0;
+        for(var _iterator = _create_for_of_iterator_helper_loose(data.fills), _step; !(_step = _iterator()).done;){
+            var fill = _step.value;
+            this.fills.push(this.createPaint(fill));
+            this.fillMaterials.push(this.createMaterialFromRendererOptions(this.rendererOptions));
+        }
+        this.strokes.length = 0;
+        this.strokeMaterials.length = 0;
+        for(var _iterator1 = _create_for_of_iterator_helper_loose(data.strokes), _step1; !(_step1 = _iterator1()).done;){
+            var stroke = _step1.value;
+            this.strokes.push(this.createPaint(stroke));
+            this.strokeMaterials.push(this.createMaterialFromRendererOptions(this.rendererOptions));
+        }
+        this.materials = [].concat(this.fillMaterials, this.strokeMaterials);
         switch(data.type){
             case ShapePrimitiveType.Custom:
                 {
@@ -17229,11 +17253,11 @@ var vertex = "\nprecision highp float;\n\nattribute vec2 aPoint;\nuniform vec4 u
 var fragment = "\nprecision highp float;\n\n#define fragColor gl_FragColor\n\nvarying vec4 vColor;\nvoid main() {\n  gl_FragColor = vColor*vColor.a;\n}\n";
 var seed$5 = 1;
 var InteractMesh = /*#__PURE__*/ function() {
-    function InteractMesh(props, rendererOptions, transform, engine) {
+    function InteractMesh(props, transform, engine) {
         this.transform = transform;
         this.engine = engine;
         this.color = props.options.previewColor;
-        var material = this.createMaterial(rendererOptions);
+        var material = this.createMaterial();
         var geometry = this.createGeometry();
         this.mesh = this.createMesh(geometry, material);
         this.updateMesh();
@@ -17256,7 +17280,7 @@ var InteractMesh = /*#__PURE__*/ function() {
         material.setVector4("uPos", uPos);
         material.setQuaternion("uQuat", tempQuat);
     };
-    _proto.createMaterial = function createMaterial(rendererOptions) {
+    _proto.createMaterial = function createMaterial() {
         var _this_engine_renderer;
         var macros = [
             [
@@ -17270,7 +17294,6 @@ var InteractMesh = /*#__PURE__*/ function() {
                 vertex: vertex,
                 fragment: fragment,
                 glslVersion: GLSLVersion.GLSL1,
-                cacheId: "" + rendererOptions.cachePrefix + "_effects_interact",
                 macros: macros
             }
         };
@@ -17392,19 +17415,33 @@ var InteractComponent = /*#__PURE__*/ function(RendererComponent) {
         return _this;
     }
     var _proto = InteractComponent.prototype;
-    _proto.getDragRangeX = function getDragRangeX() {
+    /**
+   * 获取拖拽范围 X 轴
+   * @returns 拖拽范围 [min, max]
+   */ _proto.getDragRangeX = function getDragRangeX() {
         return this.dragRange.dxRange;
     };
-    _proto.setDragRangeX = function setDragRangeX(min, max) {
+    /**
+   * 设置拖拽范围 X 轴
+   * @param min 最小值
+   * @param max 最大值
+   */ _proto.setDragRangeX = function setDragRangeX(min, max) {
         this.dragRange.dxRange = [
             min,
             max
         ];
     };
-    _proto.getDragRangeY = function getDragRangeY() {
+    /**
+   * 获取拖拽范围 Y 轴
+   * @returns 拖拽范围 [min, max]
+   */ _proto.getDragRangeY = function getDragRangeY() {
         return this.dragRange.dyRange;
     };
-    _proto.setDragRangeY = function setDragRangeY(min, max) {
+    /**
+   * 设置拖拽范围 Y 轴
+   * @param min 最小值
+   * @param max 最大值
+   */ _proto.setDragRangeY = function setDragRangeY(min, max) {
         this.dragRange.dyRange = [
             min,
             max
@@ -17412,15 +17449,11 @@ var InteractComponent = /*#__PURE__*/ function(RendererComponent) {
     };
     _proto.onStart = function onStart() {
         var env = this.item.engine.renderer.env;
-        var composition = this.item.composition;
         var _this_interactData_options = this.interactData.options, type = _this_interactData_options.type, showPreview = _this_interactData_options.showPreview;
         if (type === InteractType.CLICK) {
             this.clickable = true;
             if (showPreview && env === PLAYER_OPTIONS_ENV_EDITOR) {
-                var rendererOptions = composition == null ? void 0 : composition.getRendererOptions();
-                if (rendererOptions !== undefined) {
-                    this.previewContent = new InteractMesh(this.item.props.content, rendererOptions, this.transform, this.engine);
-                }
+                this.previewContent = new InteractMesh(this.item.props.content, this.transform, this.engine);
             }
         }
         if (this.previewContent) {
@@ -17629,7 +17662,10 @@ var InteractComponent = /*#__PURE__*/ function(RendererComponent) {
             }
         }
     };
-    _proto.canInteract = function canInteract() {
+    /**
+   * 是否可以交互
+   * @returns
+   */ _proto.canInteract = function canInteract() {
         var _this_item_composition;
         return Boolean((_this_item_composition = this.item.composition) == null ? void 0 : _this_item_composition.interactive) && this._interactive;
     };
@@ -17664,7 +17700,9 @@ var InteractComponent = /*#__PURE__*/ function(RendererComponent) {
             get: function get() {
                 return this._interactive;
             },
-            set: function set(enable) {
+            set: /**
+   * 是否响应点击和拖拽交互事件
+   */ function set(enable) {
                 this._interactive = enable;
                 if (!enable) {
                     // 立刻停止惯性滑动
@@ -18421,6 +18459,12 @@ var tmpScale = new Vector3(1, 1, 1);
         this./**
    * @internal
    */ transform = new Transform();
+        this./**
+   * 画布的像素宽度
+   */ pixelWidth = 0;
+        this./**
+   * 画布的像素高度
+   */ pixelHeight = 0;
         this.viewportMatrix = Matrix4.fromIdentity();
         this.viewMatrix = Matrix4.fromIdentity();
         this.projectionMatrix = Matrix4.fromIdentity();
@@ -18435,7 +18479,7 @@ var tmpScale = new Vector3(1, 1, 1);
             0,
             0,
             0
-        ] : _options_rotation;
+        ] : _options_rotation, _options_pixelWidth = options.pixelWidth, pixelWidth = _options_pixelWidth === void 0 ? 0 : _options_pixelWidth, _options_pixelHeight = options.pixelHeight, pixelHeight = _options_pixelHeight === void 0 ? 0 : _options_pixelHeight;
         var euler = new Euler(rotation[0], rotation[1], rotation[2]);
         var quat = new Quaternion().setFromEuler(euler);
         this.options = {
@@ -18445,6 +18489,8 @@ var tmpScale = new Vector3(1, 1, 1);
             aspect: aspect,
             clipMode: clipMode
         };
+        this.pixelWidth = pixelWidth;
+        this.pixelHeight = pixelHeight;
         this.transform.setPosition(position[0], position[1], position[2]);
         this.transform.setQuaternion(quat.x, quat.y, quat.z, quat.w);
         this.dirty = true;
@@ -18591,6 +18637,48 @@ var tmpScale = new Vector3(1, 1, 1);
             this.dirty = false;
         }
     };
+    /**
+   * 将世界坐标转换为屏幕像素坐标
+   * @param position - 世界坐标
+   * @param out - 输出的屏幕坐标，如果不传则创建新的 Vector3
+   * @returns 屏幕坐标 (x, y 为像素坐标，左下角为(0,0)，右上角为(width,height)，z 为深度比例 [0,1]，0=近平面，1=远平面)
+   */ _proto.worldToScreenPoint = function worldToScreenPoint(position, out) {
+        this.updateMatrix();
+        var result = out != null ? out : new Vector3();
+        var vpMatrix = this.getViewProjectionMatrix();
+        // 应用视图投影矩阵，得到 NDC 坐标 [-1, 1]
+        result.set(position.x, position.y, position.z);
+        vpMatrix.projectPoint(result, result);
+        // 将 NDC 坐标转换为像素坐标
+        // NDC: x,y in [-1, 1], 其中 (-1,-1) 是左下角，(1,1) 是右上角
+        // Screen: x,y in [0, width/height], 其中 (0,0) 是左下角
+        result.x = (result.x + 1) * 0.5 * this.pixelWidth;
+        result.y = (result.y + 1) * 0.5 * this.pixelHeight;
+        // 将 NDC z 值从 [-1, 1] 转换为深度比例 [0, 1]
+        // -1 (近平面) -> 0, 1 (远平面) -> 1
+        result.z = (result.z + 1) * 0.5;
+        return result;
+    };
+    /**
+   * 将屏幕像素坐标转换为世界坐标
+   * @param position - 屏幕坐标 (x, y 为像素坐标，左下角为(0,0)，z 为深度比例 [0,1]，0=近平面，1=远平面)
+   * @param out - 输出的世界坐标，如果不传则创建新的 Vector3
+   * @returns 世界坐标
+   */ _proto.screenToWorldPoint = function screenToWorldPoint(position, out) {
+        this.updateMatrix();
+        var result = out != null ? out : new Vector3();
+        var invVPMatrix = this.getInverseViewProjectionMatrix();
+        // 将像素坐标转换为 NDC 坐标 [-1, 1]
+        var ndcX = position.x / this.pixelWidth * 2 - 1;
+        var ndcY = position.y / this.pixelHeight * 2 - 1;
+        // 将深度比例 [0, 1] 转换为 NDC z 值 [-1, 1]
+        // 0 (近平面) -> -1, 1 (远平面) -> 1
+        var ndcZ = position.z * 2 - 1;
+        // 应用逆视图投影矩阵
+        result.set(ndcX, ndcY, ndcZ);
+        invVPMatrix.projectPoint(result, result);
+        return result;
+    };
     _create_class(Camera, [
         {
             key: "near",
@@ -21452,7 +21540,6 @@ function modifyMaxKeyframeShader(shader, maxVertex, maxFrag) {
     var _proto = ParticleSystemRenderer.prototype;
     _proto.onStart = function onStart() {
         this._priority = this.item.renderOrder;
-        this.particleMesh.gravityModifier.scaleXCoord(this.item.duration);
         for(var _iterator = _create_for_of_iterator_helper_loose(this.meshes), _step; !(_step = _iterator()).done;){
             var mesh = _step.value;
             mesh.onStart();
@@ -22413,7 +22500,6 @@ var ParticleSystem = /*#__PURE__*/ function(Component) {
             };
         }
         this.item.getHitTestParams = this.getHitTestParams;
-        this.item._content = this;
     };
     _create_class(ParticleSystem, [
         {
@@ -22938,7 +23024,7 @@ var tempPos = new Vector3();
    */ _proto.sampleAnimation = function sampleAnimation() {
         var _this = this;
         var boundItem = this.boundObject;
-        var duration = boundItem.duration;
+        var duration = this.getDuration();
         var life = this.time / duration;
         life = life < 0 ? 0 : life > 1 ? 1 : life;
         if (this.sizeXOverLifetime) {
@@ -23408,41 +23494,45 @@ var ObjectBindingTrack = /*#__PURE__*/ function(TrackAsset) {
         if (!_instanceof1(boundItem, VFXItem)) {
             return;
         }
-        var hasActiveTrack = false;
         for(var _iterator = _create_for_of_iterator_helper_loose(this.getChildTracks()), _step; !(_step = _iterator()).done;){
             var childTrack = _step.value;
             if (_instanceof1(childTrack, ActivationTrack)) {
-                hasActiveTrack = true;
+                // 添加粒子动画 clip // TODO 待移除
+                if (boundItem.getComponent(ParticleSystem)) {
+                    var particleTrack = timelineAsset.createTrack(ParticleTrack, this, "ParticleTrack");
+                    for(var _iterator1 = _create_for_of_iterator_helper_loose(childTrack.getClips()), _step1; !(_step1 = _iterator1()).done;){
+                        var activationClip = _step1.value;
+                        var particleClip = particleTrack.createClip(ParticleBehaviourPlayableAsset);
+                        particleClip.start = activationClip.start;
+                        particleClip.duration = activationClip.duration;
+                        particleClip.endBehavior = activationClip.endBehavior;
+                    }
+                }
+                // 添加图层帧动画动画时间 clip // TODO 待移除
+                if (boundItem.getComponent(SpriteComponent)) {
+                    var componentTimeTrack = timelineAsset.createTrack(SpriteComponentTimeTrack, this, "SpriteComponentTimeTrack");
+                    for(var _iterator2 = _create_for_of_iterator_helper_loose(childTrack.getClips()), _step2; !(_step2 = _iterator2()).done;){
+                        var activationClip1 = _step2.value;
+                        var clip = componentTimeTrack.createClip(ComponentTimePlayableAsset);
+                        clip.start = activationClip1.start;
+                        clip.duration = activationClip1.duration;
+                        clip.endBehavior = activationClip1.endBehavior;
+                    }
+                }
+                // 添加图层帧动画动画时间 clip // TODO 待移除
+                if (boundItem.getComponent(EffectComponent)) {
+                    var componentTimeTrack1 = timelineAsset.createTrack(EffectComponentTimeTrack, this, "EffectComponentTimeTrack");
+                    for(var _iterator3 = _create_for_of_iterator_helper_loose(childTrack.getClips()), _step3; !(_step3 = _iterator3()).done;){
+                        var activationClip2 = _step3.value;
+                        var clip1 = componentTimeTrack1.createClip(ComponentTimePlayableAsset);
+                        clip1.start = activationClip2.start;
+                        clip1.duration = activationClip2.duration;
+                        clip1.endBehavior = activationClip2.endBehavior;
+                    }
+                }
                 break;
             }
         }
-        if (!hasActiveTrack) {
-            return;
-        }
-        // 添加粒子动画 clip // TODO 待移除
-        if (boundItem.getComponent(ParticleSystem)) {
-            var particleTrack = timelineAsset.createTrack(ParticleTrack, this, "ParticleTrack");
-            var particleClip = particleTrack.createClip(ParticleBehaviourPlayableAsset);
-            particleClip.start = boundItem.start;
-            particleClip.duration = boundItem.duration;
-            particleClip.endBehavior = boundItem.endBehavior;
-        }
-        // 添加图层帧动画动画时间 clip // TODO 待移除
-        if (boundItem.getComponent(SpriteComponent)) {
-            var componentTimeTrack = timelineAsset.createTrack(SpriteComponentTimeTrack, this, "SpriteComponentTimeTrack");
-            var clip = componentTimeTrack.createClip(ComponentTimePlayableAsset);
-            clip.start = boundItem.start;
-            clip.duration = boundItem.duration;
-            clip.endBehavior = boundItem.endBehavior;
-        }
-        // 添加图层帧动画动画时间 clip // TODO 待移除
-        if (boundItem.getComponent(EffectComponent)) {
-            var componentTimeTrack1 = timelineAsset.createTrack(EffectComponentTimeTrack, this, "EffectComponentTimeTrack");
-            var clip1 = componentTimeTrack1.createClip(ComponentTimePlayableAsset);
-            clip1.start = boundItem.start;
-            clip1.duration = boundItem.duration;
-            clip1.endBehavior = boundItem.endBehavior;
-        }
     };
     return ObjectBindingTrack;
 }(TrackAsset);
@@ -24227,13 +24317,14 @@ var LateUpdateTickData = /*#__PURE__*/ function(TickData) {
         _this.pluginSystem = scene.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
+            aspect: width / height,
+            pixelWidth: width,
+            pixelHeight: height
         }));
         _this.url = scene.url;
         _this.interactive = true;
         _this.handleItemMessage = handleItemMessage;
         _this.createRenderFrame();
-        _this.rendererOptions = null;
         Composition.buildItemTree(_this.rootItem);
         _this.rootComposition.setChildrenRenderOrder(0);
         _this.pluginSystem.resetComposition(_assert_this_initialized(_this), _this.renderFrame);
@@ -24289,9 +24380,11 @@ var LateUpdateTickData = /*#__PURE__*/ function(TickData) {
             this.restart();
         }
         if (this.rootComposition.isStartCalled) {
-            this.gotoAndPlay(this.time - this.startTime);
+            this.setTime(this.time - this.startTime);
+            this.resume();
         } else {
-            this.gotoAndPlay(0);
+            this.setTime(0);
+            this.resume();
         }
     };
     /**
@@ -24323,6 +24416,9 @@ var LateUpdateTickData = /*#__PURE__*/ function(TickData) {
    * @param time - 相对 startTime 的时间
    */ _proto.gotoAndPlay = function gotoAndPlay(time) {
         this.setTime(time);
+        this.emit("goto", {
+            time: time
+        });
         this.resume();
     };
     /**
@@ -24330,6 +24426,9 @@ var LateUpdateTickData = /*#__PURE__*/ function(TickData) {
    * @param time - 相对 startTime 的时间
    */ _proto.gotoAndStop = function gotoAndStop(time) {
         this.setTime(time);
+        this.emit("goto", {
+            time: time
+        });
         this.pause();
     };
     /**
@@ -24360,9 +24459,6 @@ var LateUpdateTickData = /*#__PURE__*/ function(TickData) {
         if (pause) {
             this.paused = true;
         }
-        this.emit("goto", {
-            time: time
-        });
     };
     _proto.addItem = function addItem(item) {
         this.items.push(item);
@@ -24394,7 +24490,6 @@ var LateUpdateTickData = /*#__PURE__*/ function(TickData) {
     /**
    * 重置状态函数
    */ _proto.reset = function reset() {
-        this.rendererOptions = null;
         this.isEnded = false;
         this.isEndCalled = false;
         this.rootComposition.time = 0;
@@ -24420,9 +24515,9 @@ var LateUpdateTickData = /*#__PURE__*/ function(TickData) {
         if (this.getPaused()) {
             return;
         }
-        // scene VFXItem components lifetime function.
+        // Scene VFXItem components lifetime function
         if (!this.rootItem.isDuringPlay) {
-            this.callAwake(this.rootItem);
+            this.rootItem.awake();
             this.rootItem.beginPlay();
         }
         var previousCompositionTime = this.time;
@@ -24447,19 +24542,6 @@ var LateUpdateTickData = /*#__PURE__*/ function(TickData) {
     _proto.shouldDispose = function shouldDispose() {
         return this.isEnded && this.rootItem.endBehavior === EndBehavior.destroy && !this.reusable;
     };
-    _proto.callAwake = function callAwake(item) {
-        for(var _iterator = _create_for_of_iterator_helper_loose(item.components), _step; !(_step = _iterator()).done;){
-            var component = _step.value;
-            if (!component.isAwakeCalled) {
-                component.onAwake();
-                component.isAwakeCalled = true;
-            }
-        }
-        for(var _iterator1 = _create_for_of_iterator_helper_loose(item.children), _step1; !(_step1 = _iterator1()).done;){
-            var child = _step1.value;
-            this.callAwake(child);
-        }
-    };
     /**
    * 更新相机
    * @override
@@ -24548,7 +24630,7 @@ var LateUpdateTickData = /*#__PURE__*/ function(TickData) {
         return (_this_renderer = this.renderer) == null ? void 0 : _this_renderer.engine;
     };
     /**
-   * Item 求交测试，返回求交结果列表，x 和 y 是归一化到[-1, 1]区间的值，原点在左上角
+   * Item 求交测试，返回求交结果列表，x 和 y 是归一化到[-1, 1]区间的值，x 向右，y 向上
    * @param x - 鼠标或触点的 x，已经归一化到[-1, 1]
    * @param y - 鼠标或触点的 y，已经归一化到[-1, 1]
    * @param force - 是否强制求交，没有交互信息的 Item 也要进行求交测试
@@ -24647,7 +24729,7 @@ var LateUpdateTickData = /*#__PURE__*/ function(TickData) {
    * 合成对象销毁
    */ _proto.dispose = function dispose() {
         var _this = this;
-        var _this_rendererOptions, _this_pluginSystem;
+        var _this_pluginSystem;
         if (this.destroyed) {
             return;
         }
@@ -24667,7 +24749,6 @@ var LateUpdateTickData = /*#__PURE__*/ function(TickData) {
         this.rootItem.dispose();
         // FIXME: 注意这里增加了renderFrame销毁
         this.renderFrame.dispose();
-        (_this_rendererOptions = this.rendererOptions) == null ? void 0 : _this_rendererOptions.emptyTexture.dispose();
         (_this_pluginSystem = this.pluginSystem) == null ? void 0 : _this_pluginSystem.destroyComposition(this);
         this.update = function() {
             {
@@ -24764,15 +24845,6 @@ var LateUpdateTickData = /*#__PURE__*/ function(TickData) {
             this.textureOffloaded = true;
         }
     };
-    _proto.getRendererOptions = function getRendererOptions() {
-        if (!this.rendererOptions) {
-            this.rendererOptions = {
-                emptyTexture: this.renderFrame.emptyTexture,
-                cachePrefix: "-"
-            };
-        }
-        return this.rendererOptions;
-    };
     /**
    * 重新加载纹理
    */ _proto.reloadTexture = function reloadTexture() {
@@ -24886,7 +24958,9 @@ var VFXItem = /*#__PURE__*/ function(EffectsObject) {
     function VFXItem(engine, props) {
         var _this;
         _this = EffectsObject.call(this, engine) || this;
-        _this.children = [];
+        /**
+   * 元素的子元素列表
+   */ _this.children = [];
         /**
    * 元素的变换包含位置、旋转、缩放。
    */ _this.transform = new Transform();
@@ -24897,9 +24971,6 @@ var VFXItem = /*#__PURE__*/ function(EffectsObject) {
    * 元素动画的持续时间
    */ _this.duration = 0;
         /**
-   * 元素动画的开始时间
-   */ _this.start = 0;
-        /**
    * 元素动画结束时行为（如何处理元素）
    */ _this.endBehavior = EndBehavior.forward;
         _this.type = ItemType.base;
@@ -25019,6 +25090,7 @@ var VFXItem = /*#__PURE__*/ function(EffectsObject) {
             this.composition = vfxItem.composition;
         }
         if (!this.isDuringPlay && vfxItem.isDuringPlay) {
+            this.awake();
             this.beginPlay();
         }
     };
@@ -25194,6 +25266,21 @@ var VFXItem = /*#__PURE__*/ function(EffectsObject) {
     };
     /**
    * @internal
+   */ _proto.awake = function awake() {
+        for(var _iterator = _create_for_of_iterator_helper_loose(this.components), _step; !(_step = _iterator()).done;){
+            var component = _step.value;
+            if (!component.isAwakeCalled) {
+                component.onAwake();
+                component.isAwakeCalled = true;
+            }
+        }
+        for(var _iterator1 = _create_for_of_iterator_helper_loose(this.children), _step1; !(_step1 = _iterator1()).done;){
+            var child = _step1.value;
+            child.awake();
+        }
+    };
+    /**
+   * @internal
    */ _proto.onActiveChanged = function onActiveChanged() {
         if (!this.isEnabled) {
             this.onEnable();
@@ -25232,12 +25319,11 @@ var VFXItem = /*#__PURE__*/ function(EffectsObject) {
     };
     _proto.fromData = function fromData(data) {
         EffectsObject.prototype.fromData.call(this, data);
-        var id = data.id, name = data.name, delay = data.delay, parentId = data.parentId, endBehavior = data.endBehavior, transform = data.transform, _data_duration = data.duration, duration = _data_duration === void 0 ? 0 : _data_duration;
+        var id = data.id, name = data.name, parentId = data.parentId, endBehavior = data.endBehavior, transform = data.transform, _data_duration = data.duration, duration = _data_duration === void 0 ? 0 : _data_duration;
         this.props = data;
         this.type = data.type;
         this.id = id.toString(); // TODO 老数据 id 是 number，需要转换
         this.name = name;
-        this.start = delay ? delay : this.start;
         if (transform) {
             this.transform.fromData(transform);
         }
@@ -25314,10 +25400,10 @@ var VFXItem = /*#__PURE__*/ function(EffectsObject) {
                 component.dispose();
             }
             this.components = [];
-            this._content = undefined;
             this._composition = null;
             this.transform.setValid(false);
         }
+        EffectsObject.prototype.dispose.call(this);
     };
     _proto.resetChildrenParent = function resetChildrenParent() {
         // GE 父元素销毁子元素继承逻辑
@@ -25457,14 +25543,6 @@ var VFXItem = /*#__PURE__*/ function(EffectsObject) {
         return false;
     };
     _create_class(VFXItem, [
-        {
-            key: "content",
-            get: /**
-   * 返回元素创建的数据
-   */ function get() {
-                return this._content;
-            }
-        },
         {
             key: "composition",
             get: /**
@@ -25598,7 +25676,7 @@ var ColorPlayable = /*#__PURE__*/ function(Playable) {
         }
         var colorInc = vecFill(tempColor, 1);
         var colorChanged;
-        var life = this.time / boundObject.duration;
+        var life = this.time / this.getDuration();
         var opacityOverLifetime = this.opacityOverLifetime;
         var colorOverLifetime = this.colorOverLifetime;
         if (colorOverLifetime) {
@@ -25882,7 +25960,7 @@ var SpriteComponent = /*#__PURE__*/ function(MaskableGraphic) {
         _this = MaskableGraphic.call(this, engine) || this;
         _this.time = 0;
         _this.duration = 0;
-        _this.frameAnimationLoop = true;
+        _this.loop = true;
         /**
    * @internal
   */ _this.splits = singleSplits;
@@ -25897,7 +25975,7 @@ var SpriteComponent = /*#__PURE__*/ function(MaskableGraphic) {
         var _this = this;
         var time = this.time;
         var duration = this.duration;
-        if (time > duration && this.frameAnimationLoop) {
+        if (time > duration && this.loop) {
             time = time % duration;
         }
         var life = Math.min(Math.max(time / duration, 0.0), 1.0);
@@ -26137,6 +26215,8 @@ var SpriteComponent = /*#__PURE__*/ function(MaskableGraphic) {
         var _data_duration;
         //@ts-expect-error
         this.duration = (_data_duration = data.duration) != null ? _data_duration : this.item.duration;
+        var _data_loop;
+        this.loop = (_data_loop = data.loop) != null ? _data_loop : true;
     };
     return SpriteComponent;
 }(MaskableGraphic);
@@ -28889,7 +28969,8 @@ var TextLayout = /*#__PURE__*/ function() {
     function TextLayout(options) {
         this.width = 0;
         this.height = 0;
-        var _options_textHeight = options.textHeight, textHeight = _options_textHeight === void 0 ? 100 : _options_textHeight, _options_textWidth = options.textWidth, textWidth = _options_textWidth === void 0 ? 100 : _options_textWidth, _options_textOverflow = options.textOverflow, textOverflow = _options_textOverflow === void 0 ? TextOverflow.clip : _options_textOverflow, _options_textBaseline = options.textBaseline, textBaseline = _options_textBaseline === void 0 ? TextBaseline.top : _options_textBaseline, _options_textAlign = options.textAlign, textAlign = _options_textAlign === void 0 ? TextAlignment.left : _options_textAlign, _options_text = options.text, text = _options_text === void 0 ? " " : _options_text, _options_letterSpace = options.letterSpace, letterSpace = _options_letterSpace === void 0 ? 0 : _options_letterSpace, _options_lineGap = options.lineGap, lineGap = _options_lineGap === void 0 ? 0.571 : _options_lineGap, _options_autoWidth = options.autoWidth, autoWidth = _options_autoWidth === void 0 ? false : _options_autoWidth, fontSize = options.fontSize, _options_lineHeight = options.lineHeight, lineHeight = _options_lineHeight === void 0 ? fontSize : _options_lineHeight;
+        var fontSize = options.fontSize, _options_textHeight = options.textHeight, textHeight = _options_textHeight === void 0 ? 100 : _options_textHeight, _options_textWidth = options.textWidth, textWidth = _options_textWidth === void 0 ? 100 : _options_textWidth, _options_textOverflow = options.textOverflow, textOverflow = _options_textOverflow === void 0 ? TextOverflow.clip : _options_textOverflow, _options_textBaseline = options.textBaseline, textBaseline = _options_textBaseline === void 0 ? TextBaseline.top : _options_textBaseline, _options_textAlign = options.textAlign, textAlign = _options_textAlign === void 0 ? TextAlignment.left : _options_textAlign, _options_text = options.text, text = _options_text === void 0 ? " " : _options_text, _options_letterSpace = options.letterSpace, letterSpace = _options_letterSpace === void 0 ? 0 : _options_letterSpace, _options_lineGap = options.lineGap, lineGap = _options_lineGap === void 0 ? 0.571 : _options_lineGap, _options_autoWidth = options.autoWidth, autoWidth = _options_autoWidth === void 0 ? false : _options_autoWidth, _options_lineHeight = options.lineHeight, lineHeight = _options_lineHeight === void 0 ? fontSize : _options_lineHeight, _options_useLegacyRichText = options.// @ts-expect-error
+        useLegacyRichText, useLegacyRichText = _options_useLegacyRichText === void 0 ? false : _options_useLegacyRichText;
         var tempWidth = fontSize + letterSpace;
         this.autoWidth = autoWidth;
         this.maxTextWidth = text.length * tempWidth;
@@ -28897,6 +28978,7 @@ var TextLayout = /*#__PURE__*/ function() {
         this.height = textHeight;
         this.letterSpace = letterSpace;
         this.lineGap = lineGap;
+        this.useLegacyRichText = useLegacyRichText;
         this.overflow = textOverflow;
         this.textBaseline = textBaseline;
         this.textAlign = textAlign;
@@ -28947,6 +29029,38 @@ var TextLayout = /*#__PURE__*/ function() {
         return offsetX;
     };
     /**
+   * 富文本垂直对齐计算
+   * @param style - 字体样式
+   * @param lineHeights - 每行高度数组
+   * @param fontSize - 字体大小
+   * @returns 第一行基线的 Y 坐标
+   */ _proto.getOffsetYRich = function getOffsetYRich(style, lineHeights, fontSize) {
+        var outlineWidth = style.outlineWidth, fontScale = style.fontScale;
+        var total = lineHeights.reduce(function(a, b) {
+            return a + b;
+        }, 0);
+        // 使用与原始 getOffsetY 相同的经验值计算
+        // /3 计算 Y 轴偏移量，以匹配编辑器行为
+        var offsetY = (lineHeights[0] - fontSize) / 3;
+        // 计算基础偏移量（从画布顶部到第一行基线的距离）
+        var baseOffset = fontSize + outlineWidth * fontScale;
+        // 除第一行外的所有行的总高度
+        var commonCalculation = total - lineHeights[0]; // 使用实际总高度减去第一行高度
+        var offsetResult = 0;
+        switch(this.textBaseline){
+            case TextBaseline.top:
+                offsetResult = baseOffset + offsetY;
+                break;
+            case TextBaseline.middle:
+                offsetResult = (this.height * fontScale - total + this.lineGap * fontScale) / 2 + baseOffset;
+                break;
+            case TextBaseline.bottom:
+                offsetResult = this.height * fontScale - commonCalculation - offsetY;
+                break;
+        }
+        return offsetResult;
+    };
+    /**
    * 设置文本框的宽度和高度
    * @param width 文本框宽度
    * @param height 文本框高度
@@ -29077,6 +29191,10 @@ var TextComponent = /*#__PURE__*/ function(MaskableGraphic) {
         MaskableGraphic.prototype.onUpdate.call(this, dt);
         this.updateTexture();
     };
+    _proto.onDestroy = function onDestroy() {
+        MaskableGraphic.prototype.onDestroy.call(this);
+        this.disposeTextTexture();
+    };
     _proto.fromData = function fromData(data) {
         MaskableGraphic.prototype.fromData.call(this, data);
         var interaction = data.interaction, options = data.options;
@@ -29117,10 +29235,10 @@ var TextComponentBase = /*#__PURE__*/ function() {
         var width = this.textLayout.width + this.textStyle.fontOffset;
         var lineCount = 1;
         var x = 0;
-        //设置context.font的字号
-        // if (context) {
-        //   context.font = this.getFontDesc(this.textStyle.fontSize);
-        // }
+        // 设置context.font的字号，确保measureText能正确计算字宽
+        if (context) {
+            context.font = this.getFontDesc(this.textStyle.fontSize);
+        }
         for(var i = 0; i < text.length; i++){
             var _context_measureText;
             var str = text[i];
@@ -29450,10 +29568,17 @@ var TextComponentBase = /*#__PURE__*/ function() {
             wrapS: glContext.CLAMP_TO_EDGE,
             wrapT: glContext.CLAMP_TO_EDGE
         });
+        this.disposeTextTexture();
         this.renderer.texture = texture;
         this.material.setTexture("_MainTex", texture);
         this.isDirty = false;
     };
+    _proto.disposeTextTexture = function disposeTextTexture() {
+        var texture = this.renderer.texture;
+        if (texture && texture !== this.engine.whiteTexture) {
+            texture.dispose();
+        }
+    };
     _proto.getFontDesc = function getFontDesc(size) {
         var _this_textStyle = this.textStyle, fontSize = _this_textStyle.fontSize, fontScale = _this_textStyle.fontScale, fontFamily = _this_textStyle.fontFamily, textWeight = _this_textStyle.textWeight, fontStyle = _this_textStyle.fontStyle;
         var fontDesc = "" + (size || fontSize * fontScale).toString() + "px ";
@@ -30526,10 +30651,43 @@ function version34Migration(json) {
             }
         }
     }
+    // 处理富文本lineGap兼容性
+    processRichTextLineGapCompatibility(json);
     //@ts-expect-error
     json.version = "3.5";
     return json;
 }
+/**
+ * 处理富文本 lineGap 兼容性
+ */ function processRichTextLineGapCompatibility(json) {
+    if (!json.components) {
+        return;
+    }
+    // 遍历所有组件，处理富文本组件
+    for(var _iterator = _create_for_of_iterator_helper_loose(json.components), _step; !(_step = _iterator()).done;){
+        var component = _step.value;
+        // 识别富文本组件并处理 lineGap 兼容性
+        if (component.dataType === DataType.RichTextComponent && component.options) {
+            ensureRichTextLineGap(component.options);
+        }
+    }
+}
+/**
+ * 确保富文本组件有版本标识字段
+ */ function ensureRichTextLineGap(options) {
+    // 检查是否已经处理过
+    if (!options || options.useLegacyRichText !== undefined) {
+        return;
+    }
+    // 根据是否存在 lineGap 字段来判断版本
+    if (options.lineGap === undefined) {
+        // 旧版本（没有 lineGap 字段）
+        options.useLegacyRichText = true;
+    } else {
+        // 新版本（有 lineGap 字段）
+        options.useLegacyRichText = false;
+    }
+}
 /**
  * 根据形状获取形状几何体数据
  * @param shape - 形状
@@ -31452,7 +31610,7 @@ function getStandardSpriteContent(sprite, transform) {
     return ret;
 }
 
-var version$2 = "2.7.0-alpha.2";
+var version$2 = "2.7.0-beta.0";
 var v0 = /^(\d+)\.(\d+)\.(\d+)(-(\w+)\.\d+)?$/;
 var standardVersion = /^(\d+)\.(\d+)$/;
 var reverseParticle = false;
@@ -32688,7 +32846,7 @@ function createTextureOptionsBySource(image, sourceFrom, id) {
     function AssetService(engine) {
         this.engine = engine;
         this.builtinObjects = [];
-        this.builtinObjects.push(generateWhiteTexture(engine));
+        this.builtinObjects.push(engine.whiteTexture);
     }
     var _proto = AssetService.prototype;
     /**
@@ -34364,7 +34522,7 @@ var FBGeometryDataT = /*#__PURE__*/ function() {
         this.jsonSceneData = {};
         this.objectInstance = {};
         this.assetLoader = new AssetLoader(this);
-        this.emptyTexture = generateWhiteTexture(this);
+        this.whiteTexture = generateWhiteTexture(this);
         this.transparentTexture = generateTransparentTexture(this);
     }
     var _proto = Engine.prototype;
@@ -34725,7 +34883,7 @@ registerPlugin("sprite", SpriteLoader, VFXItem);
 registerPlugin("particle", ParticleLoader, VFXItem);
 registerPlugin("cal", CalculateLoader, VFXItem);
 registerPlugin("interact", InteractLoader, VFXItem);
-var version$1 = "2.7.0-alpha.2";
+var version$1 = "2.7.0-beta.0";
 logger.info("Core version: " + version$1 + ".");
 
 var _obj;
@@ -35044,12 +35202,13 @@ var _obj3;
         //FIXME: 暂时不实现
         throw new Error("Method not implemented.");
     };
-    _proto.dispose = function dispose(destroyOptions) {
-        if (!this.destroyed) {
+    _proto.dispose = function dispose() {
+        if (this.destroyed) {
             return;
         }
         this.material.dispose();
         this.destroyed = true;
+        Material.prototype.dispose.call(this);
     };
     _create_class(ThreeMaterial, [
         {
@@ -35536,6 +35695,7 @@ var seed = 1;
         }
         this.geometry.dispose();
         this.destroyed = true;
+        Geometry.prototype.dispose.call(this);
     };
     _proto.setAttributeType = function setAttributeType(name, attr, geometry, attributes, maxCount) {
         var _attr_stride = attr.stride, stride = _attr_stride === void 0 ? 0 : _attr_stride, size = attr.size, offset = attr.offset, normalize = attr.normalize, _attr_type = attr.type, type = _attr_type === void 0 ? glContext.FLOAT : _attr_type;
@@ -35677,6 +35837,7 @@ var seed = 1;
             this.mesh.clear();
             this.destroyed = true;
         }
+        Mesh.prototype.dispose.call(this);
     };
     _create_class(ThreeMesh, [
         {
@@ -35764,6 +35925,7 @@ var seed = 1;
    * 释放纹理占用的内存
    */ _proto.dispose = function dispose() {
         this.texture.dispose();
+        Texture.prototype.dispose.call(this);
     };
     /**
    * 通过图层设置创建贴图
@@ -35903,25 +36065,6 @@ var seed = 1;
             }
         }
     };
-    /**
-   * 获取 render 参数
-   *
-   * @returns
-   */ _proto.getRendererOptions = function getRendererOptions() {
-        var emptyTexture = ThreeTexture.createWithData(this.renderer.engine, {
-            data: new Uint8Array(4).fill(255),
-            width: 1,
-            height: 1
-        });
-        emptyTexture.texture.needsUpdate = true;
-        if (!this.rendererOptions) {
-            this.rendererOptions = {
-                emptyTexture: emptyTexture,
-                cachePrefix: "-"
-            };
-        }
-        return this.rendererOptions;
-    };
     return ThreeComposition;
 }(Composition);
 /**
@@ -36163,10 +36306,10 @@ var ThreeSpriteComponent = /*#__PURE__*/ function(SpriteComponent) {
    * 销毁方法
    *
    */ _proto.dispose = function dispose() {
-        SpriteComponent.prototype.dispose.call(this);
         if (!this.isActiveAndEnabled) {
             this.threeMesh.clear();
         }
+        SpriteComponent.prototype.dispose.call(this);
     };
     _proto.fromData = function fromData(data) {
         SpriteComponent.prototype.fromData.call(this, data);
@@ -36321,7 +36464,7 @@ setMaxSpriteMeshItemCount(8);
  */ Mesh.create = function(engine, props) {
     return new ThreeMesh(engine, props);
 };
-var version = "2.7.0-alpha.2";
+var version = "2.7.0-beta.0";
 logger.info("THREEJS plugin version: " + version + ".");
 
 export { AbstractPlugin, ActivationMixerPlayable, ActivationPlayable, ActivationPlayableAsset, ActivationTrack, AndNode, AndNodeData, Animatable, AnimationClip, AnimationClipNode, AnimationClipNodeData, AnimationGraphAsset, Animator, ApplyAdditiveNode, ApplyAdditiveNodeData, Asset, AssetLoader, AssetManager, AssetService, BYTES_TYPE_MAP, Behaviour, BezierCurve, BezierCurvePath, BezierCurveQuat, BinaryAsset, BlendNode, BlendNodeData, BoolValueNode, 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, ColorCurve, ColorPlayable, ColorPropertyMixerPlayable, ColorPropertyPlayableAsset, ColorPropertyTrack, Component, ComponentTimePlayable, ComponentTimePlayableAsset, ComponentTimeTrack, Composition, CompositionComponent, ConstBoolNode, ConstBoolNodeData, ConstFloatNode, ConstFloatNodeData, ControlParameterBoolNode, ControlParameterBoolNodeData, ControlParameterFloatNode, ControlParameterFloatNodeData, ControlParameterTriggerNode, ControlParameterTriggerNodeData, DEFAULT_FONTS, DEFAULT_FPS, Database, Deferred, DestroyOptions, Downloader, EFFECTS_COPY_MESH_NAME, EVENT_TYPE_CLICK, EVENT_TYPE_TOUCH_END, EVENT_TYPE_TOUCH_MOVE, EVENT_TYPE_TOUCH_START, EffectComponent, EffectComponentTimeTrack, EffectsObject, EffectsPackage, Ellipse, Engine, EqualNodeData, EventEmitter, EventSystem, Fake3DAnimationMode, Fake3DComponent, FilterMode, Float16ArrayWrapper, FloatComparisonNode, FloatComparisonNodeData, FloatPropertyMixerPlayable, FloatPropertyPlayableAsset, FloatPropertyTrack, FloatValueNode, Framebuffer, GLSLVersion, GPUCapability, Geometry, GlobalUniforms, GradientValue, GraphInstance, GraphNode, GraphNodeData, GraphicsPath, GreaterNodeData, HELP_LINK, HitTestType, InteractComponent, InteractLoader, InteractMesh, InvalidIndex, Item, KTXTexture, LayerBlendNode, LayerBlendNodeData, LessNodeData, LineSegments, LinearValue, MaskMode, MaskProcessor, MaskableGraphic, Material, MaterialDataBlock, MaterialRenderType, MaterialTrack, Mesh, MeshCollider, NodeTransform, NotNode, NotNodeData, ObjectBindingTrack, OrNode, OrNodeData, OrderType, PLAYER_OPTIONS_ENV_EDITOR, POST_PROCESS_SETTINGS, ParticleBehaviourPlayable, ParticleBehaviourPlayableAsset, ParticleLoader, ParticleMesh, ParticleMixerPlayable, ParticleSystem, ParticleSystemRenderer, ParticleTrack, PassTextureCache, PathSegments, PlayState, Playable, PlayableAsset, PlayableOutput, PluginSystem, PolyStar, Polygon, Pose, PoseNode, PostProcessVolume, PropertyClipPlayable, PropertyTrack, 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, Scene, SemanticMap, SerializationHelper, Shader, ShaderCompileResultStatus, ShaderFactory, ShaderType, ShaderVariant, ShapeComponent, ShapePath, SourceType, SpriteColorMixerPlayable, SpriteColorPlayableAsset, SpriteColorTrack, SpriteComponent, SpriteComponentTimeTrack, SpriteLoader, StarType, StateMachineNode, StateMachineNodeData, StateNode, StateNodeData, StaticValue, SubCompositionClipPlayable, SubCompositionMixerPlayable, SubCompositionPlayableAsset, SubCompositionTrack, TEMPLATE_USE_OFFSCREEN_CANVAS, TEXTURE_UNIFORM_MAP, TangentMode, TextComponent, TextComponentBase, TextLayout, TextLoader, TextStyle, Texture, TextureFactory, TextureLoadAction, TexturePaintScaleMode, TextureSourceType, TextureStoreAction, ThreeComposition, ThreeDisplayObject, ThreeEngine, ThreeMaterial, ThreeSpriteComponent, ThreeTextComponent, ThreeTexture, Ticker, TimelineAsset, TimelineClip, TimelineInstance, TrackAsset, TrackMixerPlayable, TrackType, Transform, TransformMixerPlayable, TransformPlayable, TransformPlayableAsset, TransformTrack, TransitionNode, TransitionNodeData, TransitionState, VFXItem, ValueGetter, ValueNode, Vector2Curve, Vector2PropertyMixerPlayable, Vector2PropertyPlayableAsset, Vector2PropertyTrack, Vector3Curve, Vector3PropertyMixerPlayable, Vector3PropertyTrack, Vector3ropertyPlayableAsset, Vector4Curve, Vector4PropertyMixerPlayable, Vector4PropertyPlayableAsset, Vector4PropertyTrack, WeightedMode, addByOrder, addItem, addItemWithOrder, applyMixins, assertExist, asserts, base64ToFile, buildLine, calculateTranslation, canUseBOM, canvasPool, closePointEps, colorGradingFrag, colorStopsFromGradient, colorToArr$1 as colorToArr, combineImageTemplate, createCopyShader, createGLContext, createKeyFrameMeta, createShape, createValueGetter, curveEps, decimalEqual, defaultPlugins, deserializeMipmapTexture, earcut, effectsClass, effectsClassStore, enlargeBuffer, ensureFixedNumber, ensureVec3, findPreviousRenderPass, gaussianDownHFrag, gaussianDownVFrag, gaussianUpFrag, generateEmptyTypedArray, generateGUID, generateHalfFloatTexture, generateTransparentTexture, generateWhiteTexture, getBackgroundImage, getClass, getColorFromGradientStops, getConfig, getDefaultTextureFactory, getGeometryByShape, getGeometryTriangles, getKTXTextureOptions, getKeyFrameMetaByRawValue, getMergedStore, getNodeDataClass, 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, isOpenHarmony, isPlainObject, isSimulatorCellPhone, isString, isUniformStruct, isUniformStructArray, isValidFontFamily, isWebGL2, isWechatMiniApp, itemFrag, itemVert, loadAVIFOptional, loadBinary, loadBlob, loadImage, loadMedia, loadVideo, loadWebPOptional, logger, index as math, maxSpriteMeshItemCount, modifyMaxKeyframeShader, nearestPowerOfTwo, nodeDataClass, noop, normalizeColor, numberToFix, oldBezierKeyFramesToNew, parsePercent$1 as parsePercent, particleFrag, particleOriginTranslateMap$1 as particleOriginTranslateMap, particleUniformTypeMap, particleVert, passRenderLevel, pluginLoaderMap, randomInRange, registerPlugin, removeItem, rotateVec2, screenMeshVert, serialize, setBlendMode, setConfig, setDefaultTextureFactory, setMaskMode, setMaxSpriteMeshItemCount, setRayFromCamera, setSideMode, setSpriteMeshMaxItemCountByGPU, setUniformValue, sortByOrder, index$1 as spec, thresholdFrag, throwDestroyedError, trailVert, translatePoint, trianglesFromRect, unregisterPlugin, valIfUndefined, value, valueDefine, vecFill, vecMulCombine, version, vertexFormatType2GLType };