@galacean/effects-threejs 2.0.0-alpha.20 → 2.0.0-alpha.22

package/dist/index.mjs

@@ -3,7 +3,7 @@
  * Description: Galacean Effects runtime threejs plugin for the web
  * Author: Ant Group CO., Ltd.
  * Contributors: 燃然,飂兮,十弦,云垣,茂安,意绮
- * Version: v2.0.0-alpha.20
+ * Version: v2.0.0-alpha.22
  */
 
 import * as THREE from 'three';
@@ -4322,11 +4322,19 @@ var DataType;
     DataType["Texture"] = "Texture";
     DataType["AnimationClip"] = "AnimationClip";
     DataType["TextComponent"] = "TextComponent";
+    DataType["BinaryAsset"] = "BinaryAsset";
+    // Timeline
     DataType["TrackAsset"] = "TrackAsset";
     DataType["TimelineAsset"] = "TimelineAsset";
+    DataType["ObjectBindingTrack"] = "ObjectBindingTrack";
+    DataType["TransformTrack"] = "TransformTrack";
+    DataType["SpriteColorTrack"] = "SpriteColorTrack";
+    DataType["ActivationTrack"] = "ActivationTrack";
+    DataType["SubCompositionTrack"] = "SubCompositionTrack";
     DataType["TransformPlayableAsset"] = "TransformPlayableAsset";
     DataType["SpriteColorPlayableAsset"] = "SpriteColorPlayableAsset";
-    DataType["BinaryAsset"] = "BinaryAsset";
+    DataType["ActivationPlayableAsset"] = "ActivationPlayableAsset";
+    DataType["SubCompositionPlayableAsset"] = "SubCompositionPlayableAsset";
     // FIXME: 先完成ECS的场景转换，后面移到spec中
     DataType["MeshComponent"] = "MeshComponent";
     DataType["SkyboxComponent"] = "SkyboxComponent";
@@ -4915,10 +4923,25 @@ var EventSystem = /*#__PURE__*/ function() {
         var getTouchEventValue = function(event, x, y, dx, dy) {
             if (dx === void 0) dx = 0;
             if (dy === void 0) dy = 0;
-            var _this_target = _this.target, width = _this_target.width, height = _this_target.height;
-            var ts = performance.now();
             var vx = 0;
             var vy = 0;
+            var ts = performance.now();
+            if (!_this.target) {
+                logger.error("Trigger TouchEvent after EventSystem is disposed.");
+                return {
+                    x: x,
+                    y: y,
+                    vx: 0,
+                    vy: vy,
+                    dx: dx,
+                    dy: dy,
+                    ts: ts,
+                    width: 0,
+                    height: 0,
+                    origin: event
+                };
+            }
+            var _this_target = _this.target, width = _this_target.width, height = _this_target.height;
             if (lastTouch) {
                 var dt = ts - lastTouch.ts;
                 vx = (dx - lastTouch.dx) / dt || 0;
@@ -13043,6 +13066,16 @@ var InteractComponent = /*#__PURE__*/ function(RendererComponent) {
     function InteractComponent() {
         var _this;
         _this = RendererComponent.apply(this, arguments) || this;
+        /**
+   * 拖拽的惯性衰减系数，范围[0, 1], 越大惯性越强
+   */ _this.downgrade = 0.95;
+        /**
+   * 拖拽的距离映射系数，越大越容易拖动
+   */ _this.dragRatio = [
+            1,
+            1
+        ];
+        /** 是否响应点击和拖拽交互事件 */ _this._interactive = true;
         _this.getHitTestParams = function(force) {
             if (!_this.clickable) {
                 return;
@@ -13094,9 +13127,8 @@ var InteractComponent = /*#__PURE__*/ function(RendererComponent) {
         if (!this.dragEvent || !this.bouncingArg) {
             return;
         }
-        var downgrade = 0.95;
-        this.bouncingArg.vx *= downgrade;
-        this.bouncingArg.vy *= downgrade;
+        this.bouncingArg.vx *= this.downgrade;
+        this.bouncingArg.vy *= this.downgrade;
         this.bouncingArg.dy += this.bouncingArg.vy;
         this.bouncingArg.dx += this.bouncingArg.vx;
         if (shouldIgnoreBouncing(this.bouncingArg)) {
@@ -13124,7 +13156,7 @@ var InteractComponent = /*#__PURE__*/ function(RendererComponent) {
     // OVERRIDE
     };
     _proto.handleDragMove = function handleDragMove(evt, event) {
-        if (!(evt && evt.cameraParam) || !this.item.composition) {
+        if (!(evt == null ? void 0 : evt.cameraParam) || !this.canInteract() || !this.item.composition) {
             return;
         }
         var options = this.item.props.content.options;
@@ -13135,8 +13167,8 @@ var InteractComponent = /*#__PURE__*/ function(RendererComponent) {
         var sp = Math.tan(fov * Math.PI / 180 / 2) * Math.abs(depth);
         var height = dy * sp;
         var width = dx * sp;
-        var nx = position[0] - width;
-        var ny = position[1] - height;
+        var nx = position[0] - this.dragRatio[0] * width;
+        var ny = position[1] - this.dragRatio[1] * height;
         if (options.dxRange) {
             var _options_dxRange = options.dxRange, min = _options_dxRange[0], max = _options_dxRange[1];
             nx = clamp$1(nx, min, max);
@@ -13164,6 +13196,9 @@ var InteractComponent = /*#__PURE__*/ function(RendererComponent) {
         var handlerMap = {
             touchstart: function(event) {
                 var _this_item_composition;
+                if (!_this.canInteract()) {
+                    return;
+                }
                 _this.dragEvent = null;
                 _this.bouncingArg = null;
                 var camera = (_this_item_composition = _this.item.composition) == null ? void 0 : _this_item_composition.camera;
@@ -13185,6 +13220,9 @@ var InteractComponent = /*#__PURE__*/ function(RendererComponent) {
                 _this.bouncingArg = event;
             },
             touchend: function(event) {
+                if (!_this.canInteract()) {
+                    return;
+                }
                 var bouncingArg = _this.bouncingArg;
                 if (!shouldIgnoreBouncing(bouncingArg, 3) && bouncingArg) {
                     var speed = 5;
@@ -13227,6 +13265,25 @@ var InteractComponent = /*#__PURE__*/ function(RendererComponent) {
         RendererComponent.prototype.fromData.call(this, data);
         this.interactData = data;
     };
+    _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;
+    };
+    _create_class(InteractComponent, [
+        {
+            key: "interactive",
+            get: function get() {
+                return this._interactive;
+            },
+            set: function set(enable) {
+                this._interactive = enable;
+                if (!enable) {
+                    // 立刻停止惯性滑动
+                    this.bouncingArg = null;
+                }
+            }
+        }
+    ]);
     return InteractComponent;
 }(RendererComponent);
 InteractComponent = __decorate([
@@ -16743,17 +16800,12 @@ var ParticleSystem = /*#__PURE__*/ function(Component) {
     _proto.onEnd = function onEnd(particle) {};
     _proto.onIterate = function onIterate(particle) {};
     _proto.initPoint = function initPoint(data) {
-        var _this_item_composition, _this_item_composition1;
         var options = this.options;
         var lifetime = this.lifetime;
         var shape = this.shape;
         var speed = options.startSpeed.getValue(lifetime);
         var matrix4 = options.particleFollowParent ? this.transform.getMatrix() : this.transform.getWorldMatrix();
         var pointPosition = data.position;
-        if (((_this_item_composition = this.item.composition) == null ? void 0 : _this_item_composition.renderer.env) === PLAYER_OPTIONS_ENV_EDITOR) {
-            pointPosition.x /= this.item.composition.editorScaleRatio;
-            pointPosition.y /= this.item.composition.editorScaleRatio;
-        }
         // 粒子的位置受发射器的位置影响，自身的旋转和缩放不受影响
         var position = matrix4.transformPoint(pointPosition, new Vector3());
         var transform = new Transform({
@@ -16834,10 +16886,6 @@ var ParticleSystem = /*#__PURE__*/ function(Component) {
             size.x *= tempScale.x;
             size.y *= tempScale.y;
         }
-        if (((_this_item_composition1 = this.item.composition) == null ? void 0 : _this_item_composition1.renderer.env) === PLAYER_OPTIONS_ENV_EDITOR) {
-            size.x /= this.item.composition.editorScaleRatio;
-            size.y /= this.item.composition.editorScaleRatio;
-        }
         transform.setScale(size.x, size.y, 1);
         return {
             size: size,
@@ -19393,21 +19441,33 @@ var TextLayout = /*#__PURE__*/ function() {
         this.lineHeight = lineHeight;
     }
     var _proto = TextLayout.prototype;
-    _proto.getOffsetY = function getOffsetY(style) {
-        var offsetY = 0;
-        var offset = (style.fontSize + style.outlineWidth) * style.fontScale;
+    /**
+   * 获取初始的行高偏移值
+   * @param style - 字体基础数据
+   * @param lineCount - 渲染行数
+   * @param lineHeight - 渲染时的字体行高
+   * @param fontSize - 渲染时的字体大小
+   * @returns - 行高偏移值
+   */ _proto.getOffsetY = function getOffsetY(style, lineCount, lineHeight, fontSize) {
+        var outlineWidth = style.outlineWidth, fontScale = style.fontScale;
+        // /3 计算Y轴偏移量，以匹配编辑器行为
+        var offsetY = (lineHeight - fontSize) / 3;
+        // 计算基础偏移量
+        var baseOffset = fontSize + outlineWidth * fontScale;
+        var commonCalculation = lineHeight * (lineCount - 1);
+        var offsetResult = 0;
         switch(this.textBaseline){
             case TextBaseline.top:
-                offsetY = offset;
+                offsetResult = baseOffset + offsetY;
                 break;
             case TextBaseline.middle:
-                offsetY = (this.height + offset) / 2; // fonSize;
+                offsetResult = (this.height * fontScale - commonCalculation + baseOffset) / 2;
                 break;
             case TextBaseline.bottom:
-                offsetY = this.height - offset / 2;
+                offsetResult = this.height * fontScale - commonCalculation - offsetY;
                 break;
         }
-        return offsetY;
+        return offsetResult;
     };
     _proto.getOffsetX = function getOffsetX(style, maxWidth) {
         var offsetX = 0;
@@ -19565,6 +19625,9 @@ var TextComponent = /*#__PURE__*/ function(SpriteComponent) {
         var _this;
         _this = SpriteComponent.call(this, engine, props) || this;
         _this.isDirty = true;
+        /**
+   * 文本行数
+   */ _this.lineCount = 0;
         _this.canvas = canvasPool.getCanvas();
         canvasPool.saveCanvas(_this.canvas);
         _this.context = _this.canvas.getContext("2d", {
@@ -19608,6 +19671,31 @@ var TextComponentBase = /*#__PURE__*/ function() {
         this.textStyle = new TextStyle(options);
         this.textLayout = new TextLayout(options);
         this.text = options.text;
+        this.lineCount = this.getLineCount(options.text, true);
+    };
+    _proto.getLineCount = function getLineCount(text, init) {
+        var context = this.context;
+        var letterSpace = this.textLayout.letterSpace;
+        var fontScale = init ? this.textStyle.fontSize / 10 : 1 / this.textStyle.fontScale;
+        var width = this.textLayout.width + this.textStyle.fontOffset;
+        var lineCount = 1;
+        var x = 0;
+        for(var i = 0; i < text.length; i++){
+            var _context_measureText;
+            var str = text[i];
+            var _context_measureText_width;
+            var textMetrics = ((_context_measureText_width = context == null ? void 0 : (_context_measureText = context.measureText(str)) == null ? void 0 : _context_measureText.width) != null ? _context_measureText_width : 0) * fontScale;
+            // 和浏览器行为保持一致
+            x += letterSpace;
+            if (x + textMetrics > width && i > 0 || str === "\n") {
+                lineCount++;
+                x = 0;
+            }
+            if (str !== "\n") {
+                x += textMetrics;
+            }
+        }
+        return lineCount;
     };
     /**
    * 设置字号大小
@@ -19654,6 +19742,7 @@ var TextComponentBase = /*#__PURE__*/ function() {
             return;
         }
         this.text = value;
+        this.lineCount = this.getLineCount(value, false);
         this.isDirty = true;
     };
     /**
@@ -19816,10 +19905,8 @@ var TextComponentBase = /*#__PURE__*/ function() {
         // 文本颜色
         context.fillStyle = "rgba(" + style.textColor[0] + ", " + style.textColor[1] + ", " + style.textColor[2] + ", " + style.textColor[3] + ")";
         var charsInfo = [];
-        // /3 是为了和编辑器行为保持一致
-        var offsetY = (lineHeight - fontSize) / 3;
         var x = 0;
-        var y = layout.getOffsetY(style) + offsetY;
+        var y = layout.getOffsetY(style, this.lineCount, lineHeight, fontSize);
         var charsArray = [];
         var charOffsetX = [];
         for(var i = 0; i < this.char.length; i++){
@@ -22382,10 +22469,6 @@ function getStandardCameraContent(model) {
                 ]
             });
         }
-        // gizmo 的 target id 转换为新的 item guid
-        if (item.content.options.target) {
-            item.content.options.target = itemOldIdToGuidMap[item.content.options.target];
-        }
         // 修正老 json 的 item.pluginName
         if (item.pn !== undefined) {
             var pn = item.pn;
@@ -22403,6 +22486,10 @@ function getStandardCameraContent(model) {
             //@ts-expect-error
             item.type = "orientation-transformer";
         }
+        // gizmo 的 target id 转换为新的 item guid
+        if (item.content.options.target && item.pluginName === "editor-gizmo") {
+            item.content.options.target = itemOldIdToGuidMap[item.content.options.target];
+        }
         // Spine 元素转为 guid 索引
         if (item.type === ItemType.spine && json.spines && json.spines.length !== 0) {
             convertSpineData(json.spines[item.content.options.spine], item.content, result);
@@ -23209,26 +23296,27 @@ var seed$1 = 1;
    */ _proto.loadScene = function loadScene(url, renderer, options) {
         var _this = this;
         return _async_to_generator(function() {
-            var _gpuInstance_detail, rawJSON, assetUrl, startTime, timeInfos, gpuInstance, _gpuInstance_detail_asyncShaderCompile, asyncShaderCompile, _gpuInstance_detail_compressedTexture, compressedTexture, loadTimer, cancelLoading, waitPromise, hookTimeInfo, loadResourcePromise;
+            var _gpuInstance_detail, rawJSON, assetUrl, startTime, timeInfoMessages, gpuInstance, _gpuInstance_detail_asyncShaderCompile, asyncShaderCompile, _gpuInstance_detail_compressedTexture, compressedTexture, timeInfos, loadTimer, cancelLoading, waitPromise, hookTimeInfo, loadResourcePromise;
             return __generator(this, function(_state) {
                 assetUrl = isString(url) ? url : _this.id;
                 startTime = performance.now();
-                timeInfos = [];
+                timeInfoMessages = [];
                 gpuInstance = renderer == null ? void 0 : renderer.engine.gpuCapability;
                 asyncShaderCompile = (_gpuInstance_detail_asyncShaderCompile = gpuInstance == null ? void 0 : (_gpuInstance_detail = gpuInstance.detail) == null ? void 0 : _gpuInstance_detail.asyncShaderCompile) != null ? _gpuInstance_detail_asyncShaderCompile : false;
                 compressedTexture = (_gpuInstance_detail_compressedTexture = gpuInstance == null ? void 0 : gpuInstance.detail.compressedTexture) != null ? _gpuInstance_detail_compressedTexture : COMPRESSED_TEXTURE.NONE;
+                timeInfos = {};
                 cancelLoading = false;
                 waitPromise = new Promise(function(resolve, reject) {
                     loadTimer = window.setTimeout(function() {
                         cancelLoading = true;
                         _this.removeTimer(loadTimer);
                         var totalTime = performance.now() - startTime;
-                        reject(new Error("Load time out: totalTime: " + totalTime.toFixed(4) + "ms " + timeInfos.join(" ") + ", url: " + assetUrl + "."));
+                        reject(new Error("Load time out: totalTime: " + totalTime.toFixed(4) + "ms " + timeInfoMessages.join(" ") + ", url: " + assetUrl + "."));
                     }, _this.timeout * 1000);
                     _this.timers.push(loadTimer);
                 });
                 hookTimeInfo = /*#__PURE__*/ _async_to_generator(function(label, func) {
-                    var st, result, e;
+                    var st, result, time, e;
                     return __generator(this, function(_state) {
                         switch(_state.label){
                             case 0:
@@ -23251,7 +23339,9 @@ var seed$1 = 1;
                                 ];
                             case 2:
                                 result = _state.sent();
-                                timeInfos.push("[" + label + ": " + (performance.now() - st).toFixed(2) + "]");
+                                time = performance.now() - st;
+                                timeInfoMessages.push("[" + label + ": " + time.toFixed(2) + "]");
+                                timeInfos[label] = time;
                                 return [
                                     2,
                                     result
@@ -23350,7 +23440,7 @@ var seed$1 = 1;
                                         hookTimeInfo("processImages", function() {
                                             return _this.processImages(images1, compressedTexture);
                                         }),
-                                        hookTimeInfo("" + (asyncShaderCompile ? "async" : "sync") + " compile", function() {
+                                        hookTimeInfo("" + (asyncShaderCompile ? "async" : "sync") + "Compile", function() {
                                             return _this.precompile(compositions, pluginSystem, renderer, options);
                                         })
                                     ])
@@ -23383,6 +23473,7 @@ var seed$1 = 1;
                                 loadedTextures = _state.sent();
                                 _this.updateSceneData(jsonScene.items);
                                 scene = {
+                                    timeInfos: timeInfos,
                                     url: url,
                                     renderLevel: _this.options.renderLevel,
                                     storage: {},
@@ -23405,11 +23496,13 @@ var seed$1 = 1;
                                 _state.label = 12;
                             case 12:
                                 totalTime = performance.now() - startTime;
-                                logger.info("Load asset: totalTime: " + totalTime.toFixed(4) + "ms " + timeInfos.join(" ") + ", url: " + assetUrl + ".");
+                                logger.info("Load asset: totalTime: " + totalTime.toFixed(4) + "ms " + timeInfoMessages.join(" ") + ", url: " + assetUrl + ".");
                                 window.clearTimeout(loadTimer);
                                 _this.removeTimer(loadTimer);
                                 scene.totalTime = totalTime;
                                 scene.startTime = startTime;
+                                // 各部分分段时长
+                                scene.timeInfos = timeInfos;
                                 return [
                                     2,
                                     scene
@@ -23948,6 +24041,7 @@ var tmpScale = new Vector3(1, 1, 1);
     function Camera(name, options) {
         if (options === void 0) options = {};
         this.name = name;
+        this.fovScaleRatio = 1.0;
         this.viewMatrix = Matrix4.fromIdentity();
         this.projectionMatrix = Matrix4.fromIdentity();
         this.viewProjectionMatrix = Matrix4.fromIdentity();
@@ -23975,6 +24069,13 @@ var tmpScale = new Vector3(1, 1, 1);
         this.updateMatrix();
     }
     var _proto = Camera.prototype;
+    _proto.setFovScaleRatio = function setFovScaleRatio(value) {
+        this.fovScaleRatio = value;
+        this.dirty = true;
+    };
+    _proto.getFovScaleRatio = function getFovScaleRatio() {
+        return this.fovScaleRatio;
+    };
     /**
    * 获取相机的视图变换矩阵
    * @return
@@ -24095,7 +24196,7 @@ var tmpScale = new Vector3(1, 1, 1);
    */ _proto.updateMatrix = function updateMatrix() {
         if (this.dirty) {
             var _this_options = this.options, fov = _this_options.fov, aspect = _this_options.aspect, near = _this_options.near, far = _this_options.far, clipMode = _this_options.clipMode, position = _this_options.position;
-            this.projectionMatrix.perspective(fov * DEG2RAD, aspect, near, far, clipMode === CameraClipMode.portrait);
+            this.projectionMatrix.perspective(fov * DEG2RAD * this.fovScaleRatio, aspect, near, far, clipMode === CameraClipMode.portrait);
             this.inverseViewMatrix.compose(position, this.getQuat(), tmpScale);
             this.viewMatrix.copyFrom(this.inverseViewMatrix).invert();
             this.viewProjectionMatrix.multiplyMatrices(this.projectionMatrix, this.viewMatrix);
@@ -24402,7 +24503,6 @@ var listOrder = 0;
         /**
    * 预合成的合成属性，在 content 中会被其元素属性覆盖
    */ this.refCompositionProps = new Map();
-        this.editorScaleRatio = 1.0;
         // TODO: 待优化
         this.assigned = false;
         /**
@@ -24439,11 +24539,12 @@ var listOrder = 0;
         this.renderer = renderer;
         this.texInfo = imageUsage != null ? imageUsage : {};
         this.event = event;
-        var _scene_startTime;
+        var _scene_startTime, _scene_timeInfos_asyncCompile;
         this.statistic = {
             loadTime: totalTime != null ? totalTime : 0,
             loadStart: (_scene_startTime = scene.startTime) != null ? _scene_startTime : 0,
-            firstFrameTime: 0
+            firstFrameTime: 0,
+            precompileTime: (_scene_timeInfos_asyncCompile = scene.timeInfos["asyncCompile"]) != null ? _scene_timeInfos_asyncCompile : scene.timeInfos["syncCompile"]
         };
         this.reusable = reusable;
         this.speed = speed;
@@ -24457,6 +24558,7 @@ var listOrder = 0;
         this.url = scene.url;
         this.assigned = true;
         this.globalTime = 0;
+        this.interactive = true;
         this.onPlayerPause = onPlayerPause;
         this.onMessageItem = onMessageItem;
         this.onEnd = onEnd;
@@ -24886,7 +24988,7 @@ var listOrder = 0;
    * @param options - 最大求交数和求交时的回调
    */ _proto.hitTest = function hitTest(x, y, force, options) {
         var _this_rootItem_getComponent;
-        if (this.isDestroyed) {
+        if (this.isDestroyed || !this.interactive) {
             return [];
         }
         var regions = [];
@@ -25207,6 +25309,15 @@ var listOrder = 0;
    */ function get() {
                 return this.destroyed;
             }
+        },
+        {
+            key: "editorScaleRatio",
+            get: function get() {
+                return this.camera.getFovScaleRatio();
+            },
+            set: function set(value) {
+                this.camera.setFovScaleRatio(value);
+            }
         }
     ]);
     return Composition;
@@ -25604,7 +25715,7 @@ registerPlugin("sprite", SpriteLoader, VFXItem, true);
 registerPlugin("particle", ParticleLoader, VFXItem, true);
 registerPlugin("cal", CalculateLoader, VFXItem, true);
 registerPlugin("interact", InteractLoader, VFXItem, true);
-var version$1 = "2.0.0-alpha.20";
+var version$1 = "2.0.0-alpha.22";
 logger.info("Core version: " + version$1 + ".");
 
 var _obj;
@@ -26648,11 +26759,10 @@ var seed = 1;
             }
         }
         // @ts-expect-error
-        return _extends({
+        return _extends({}, options, {
             target: target,
             format: THREE.RGBAFormat,
-            type: THREE.UnsignedByteType
-        }, options, {
+            type: THREE.UnsignedByteType,
             minFilter: ThreeTexture.toThreeJsTextureFilter(options.minFilter),
             magFilter: ThreeTexture.toThreeJsTextureFilter(options.magFilter),
             wrapS: ThreeTexture.toThreeJsTextureWrap(options.wrapS),
@@ -27150,6 +27260,52 @@ ThreeSpriteComponent = __decorate([
     effectsClass(DataType.SpriteComponent)
 ], ThreeSpriteComponent);
 
+var ThreeTextComponent = /*#__PURE__*/ function(ThreeSpriteComponent) {
+    _inherits(ThreeTextComponent, ThreeSpriteComponent);
+    function ThreeTextComponent(engine, props) {
+        var _this;
+        _this = ThreeSpriteComponent.call(this, engine, props) || this;
+        _this.isDirty = true;
+        _this.canvas = canvasPool.getCanvas();
+        canvasPool.saveCanvas(_this.canvas);
+        _this.context = _this.canvas.getContext("2d", {
+            willReadFrequently: true
+        });
+        if (!props) {
+            return _possible_constructor_return(_this);
+        }
+        var options = props.options;
+        _this.updateWithOptions(options);
+        _this.updateTexture(false);
+        return _this;
+    }
+    var _proto = ThreeTextComponent.prototype;
+    _proto.update = function update(dt) {
+        ThreeSpriteComponent.prototype.update.call(this, dt);
+        this.updateTexture(false);
+    };
+    _proto.fromData = function fromData(data) {
+        ThreeSpriteComponent.prototype.fromData.call(this, data);
+        var options = data.options;
+        this.updateWithOptions(options);
+        // Text
+        this.updateTexture(false);
+    };
+    _proto.updateWithOptions = function updateWithOptions(options) {
+    // OVERRIDE by mixins
+    };
+    _proto.updateTexture = function updateTexture(flipY) {
+    // OVERRIDE by mixins
+    };
+    return ThreeTextComponent;
+}(ThreeSpriteComponent);
+ThreeTextComponent = __decorate([
+    effectsClass(DataType.TextComponent)
+], ThreeTextComponent);
+applyMixins(ThreeTextComponent, [
+    TextComponentBase
+]);
+
 setMaxSpriteMeshItemCount(8);
 /**
  * 图片的创建方法
@@ -27192,8 +27348,8 @@ setMaxSpriteMeshItemCount(8);
  */ Mesh.create = function(engine, props) {
     return new ThreeMesh(engine, props);
 };
-var version = "2.0.0-alpha.20";
+var version = "2.0.0-alpha.22";
 logger.info("THREEJS plugin version: " + version + ".");
 
-export { AbstractPlugin, ActivationPlayable, ActivationPlayableAsset, ActivationTrack, AnimationClip, AnimationClipPlayable, AssetLoader, AssetManager, BYTES_TYPE_MAP, Behaviour, BezierCurve, BezierCurvePath, BezierCurveQuat, BinaryAsset, COMPRESSED_TEXTURE, CONSTANT_MAP_BLEND, CONSTANT_MAP_DEPTH, CONSTANT_MAP_STENCIL_FUNC, CONSTANT_MAP_STENCIL_OP, COPY_FRAGMENT_SHADER, COPY_MESH_SHADER_ID, COPY_VERTEX_SHADER, CalculateLoader, Camera, CameraController, CameraVFXItemLoader, Component, Composition, CompositionComponent, CompositionSourceManager, DEFAULT_FONTS, Database, DestroyOptions, Downloader, EFFECTS_COPY_MESH_NAME, EVENT_TYPE_CLICK, EVENT_TYPE_TOUCH_END, EVENT_TYPE_TOUCH_MOVE, EVENT_TYPE_TOUCH_START, EffectComponent, EffectsObject, Engine, EventSystem, FilterMode, Float16ArrayWrapper, Framebuffer, GLSLVersion, GPUCapability, Geometry, GlobalUniforms, GradientValue, HELP_LINK, HitTestType, InteractComponent, InteractLoader, InteractMesh, Item, ItemBehaviour, KTXTexture, LineSegments, LinearValue, Material, MaterialDataBlock, MaterialRenderType, Mesh, ObjectBindingTrack, OrderType, PLAYER_OPTIONS_ENV_EDITOR, POST_PROCESS_SETTINGS, ParticleBehaviourPlayable, ParticleBehaviourPlayableAsset, ParticleLoader, ParticleMesh, ParticleSystem, ParticleSystemRenderer, PassTextureCache, PathSegments, PluginSystem, RENDER_PASS_NAME_PREFIX, RENDER_PREFER_LOOKUP_TEXTURE, RUNTIME_ENV, RandomSetValue, RandomValue, RandomVectorValue, RenderFrame, RenderPass, RenderPassAttachmentStorageType, RenderPassDestroyAttachmentType, RenderPassPriorityNormal, RenderPassPriorityPostprocess, RenderPassPriorityPrepare, RenderTargetHandle, RenderTextureFormat, Renderbuffer, Renderer, RendererComponent, RuntimeClip, SEMANTIC_MAIN_PRE_COLOR_ATTACHMENT_0, SEMANTIC_MAIN_PRE_COLOR_ATTACHMENT_SIZE_0, SEMANTIC_PRE_COLOR_ATTACHMENT_0, SEMANTIC_PRE_COLOR_ATTACHMENT_SIZE_0, SPRITE_VERTEX_STRIDE, SemanticMap, SerializationHelper, Shader, ShaderCompileResultStatus, ShaderType, ShaderVariant, SpriteColorPlayable, SpriteColorPlayableAsset, SpriteColorTrack, SpriteComponent, SpriteLoader, StaticValue, SubCompositionPlayableAsset, SubCompositionTrack, TEMPLATE_USE_OFFSCREEN_CANVAS, TEXTURE_UNIFORM_MAP, TextComponent, TextComponentBase, TextLayout, TextLoader, TextStyle, Texture, TextureFactory, TextureLoadAction, TextureSourceType, TextureStoreAction, ThreeComposition, ThreeDisplayObject, ThreeEngine, ThreeMaterial, ThreeSpriteComponent, ThreeTexture, Ticker, TimelineAsset, TimelineClip, TimelinePlayable, TrackAsset, TrackSortWrapper, TrackType, Transform, TransformAnimationPlayable, TransformPlayableAsset, TransformTrack, VFXItem, ValueGetter, addByOrder, addItem, addItemWithOrder, applyMixins, assertExist, asserts, base64ToFile, blend, calculateTranslation, canvasPool, colorGradingFrag, colorStopsFromGradient, colorToArr$1 as colorToArr, combineImageTemplate, compatible_frag as compatibleFrag, compatible_vert as compatibleVert, createCopyShader, createGLContext, createKeyFrameMeta, createShaderWithMacros, createShape, createVFXItem, createValueGetter, decimalEqual, defaultGlobalVolume, defaultPlugins, deserializeMipmapTexture, earcut, effectsClass, effectsClassStore, enlargeBuffer, ensureFixedNumber, ensureVec3, findPreviousRenderPass, gaussianDown_frag as gaussianDownFrag, gaussianDownHFrag, gaussianDownVFrag, gaussianUpFrag, generateEmptyTypedArray, generateGUID, generateHalfFloatTexture, generateTransparentTexture, generateWhiteTexture, getBackgroundImage, getColorFromGradientStops, getConfig, getDefaultTemplateCanvasPool, getDefaultTextureFactory, getGeometryByShape, getGeometryTriangles, getImageItemRenderInfo, getKTXTextureOptions, getKeyFrameMetaByRawValue, getMergedStore, getParticleMeshShader, getPixelRatio, getPreMultiAlpha, getStandardComposition, getStandardImage, getStandardItem, getStandardJSON, getTextureSize, glContext, glType2VertexFormatType, gpuTimer, imageDataFromColor, imageDataFromGradient, initErrors, initGLContext, integrate, interpolateColor, isAlipayMiniApp, isAndroid, isArray, isCanvas, isFunction, isIOS, isObject, isSceneJSON, isSceneURL, isSceneWithOptions, isSimulatorCellPhone, isString, isUniformStruct, isUniformStructArray, isValidFontFamily, isWebGL2, itemFrag, itemFrameFrag, itemVert, loadBinary, loadBlob, loadImage, loadMedia, loadVideo, loadWebPOptional, logger, index as math, maxSpriteMeshItemCount, modifyMaxKeyframeShader, nearestPowerOfTwo, noop, normalizeColor, numberToFix, parsePercent$1 as parsePercent, particleFrag, particleOriginTranslateMap$1 as particleOriginTranslateMap, particleUniformTypeMap, particleVert, pluginLoaderMap, pointOnLine, randomInRange, registerPlugin, removeItem, rotateVec2, screenMeshVert, serialize, setBlendMode, setConfig, setDefaultTextureFactory, setMaskMode, setMaxSpriteMeshItemCount, setRayFromCamera, setSideMode, setSpriteMeshMaxItemCountByGPU, setUniformValue, sortByOrder, index$1 as spec, spriteMeshShaderFromFilter, spriteMeshShaderFromRenderInfo, spriteMeshShaderIdFromRenderInfo, thresholdFrag, throwDestroyedError, trailVert, translatePoint, trianglesFromRect, unregisterPlugin, valIfUndefined, value, valueDefine, vecAssign, vecFill, vecMulCombine, vecNormalize, version, vertexFormatType2GLType };
+export { AbstractPlugin, ActivationPlayable, ActivationPlayableAsset, ActivationTrack, AnimationClip, AnimationClipPlayable, AssetLoader, AssetManager, BYTES_TYPE_MAP, Behaviour, BezierCurve, BezierCurvePath, BezierCurveQuat, BinaryAsset, COMPRESSED_TEXTURE, CONSTANT_MAP_BLEND, CONSTANT_MAP_DEPTH, CONSTANT_MAP_STENCIL_FUNC, CONSTANT_MAP_STENCIL_OP, COPY_FRAGMENT_SHADER, COPY_MESH_SHADER_ID, COPY_VERTEX_SHADER, CalculateLoader, Camera, CameraController, CameraVFXItemLoader, Component, Composition, CompositionComponent, CompositionSourceManager, DEFAULT_FONTS, Database, DestroyOptions, Downloader, EFFECTS_COPY_MESH_NAME, EVENT_TYPE_CLICK, EVENT_TYPE_TOUCH_END, EVENT_TYPE_TOUCH_MOVE, EVENT_TYPE_TOUCH_START, EffectComponent, EffectsObject, Engine, EventSystem, FilterMode, Float16ArrayWrapper, Framebuffer, GLSLVersion, GPUCapability, Geometry, GlobalUniforms, GradientValue, HELP_LINK, HitTestType, InteractComponent, InteractLoader, InteractMesh, Item, ItemBehaviour, KTXTexture, LineSegments, LinearValue, Material, MaterialDataBlock, MaterialRenderType, Mesh, ObjectBindingTrack, OrderType, PLAYER_OPTIONS_ENV_EDITOR, POST_PROCESS_SETTINGS, ParticleBehaviourPlayable, ParticleBehaviourPlayableAsset, ParticleLoader, ParticleMesh, ParticleSystem, ParticleSystemRenderer, PassTextureCache, PathSegments, PluginSystem, RENDER_PASS_NAME_PREFIX, RENDER_PREFER_LOOKUP_TEXTURE, RUNTIME_ENV, RandomSetValue, RandomValue, RandomVectorValue, RenderFrame, RenderPass, RenderPassAttachmentStorageType, RenderPassDestroyAttachmentType, RenderPassPriorityNormal, RenderPassPriorityPostprocess, RenderPassPriorityPrepare, RenderTargetHandle, RenderTextureFormat, Renderbuffer, Renderer, RendererComponent, RuntimeClip, SEMANTIC_MAIN_PRE_COLOR_ATTACHMENT_0, SEMANTIC_MAIN_PRE_COLOR_ATTACHMENT_SIZE_0, SEMANTIC_PRE_COLOR_ATTACHMENT_0, SEMANTIC_PRE_COLOR_ATTACHMENT_SIZE_0, SPRITE_VERTEX_STRIDE, SemanticMap, SerializationHelper, Shader, ShaderCompileResultStatus, ShaderType, ShaderVariant, SpriteColorPlayable, SpriteColorPlayableAsset, SpriteColorTrack, SpriteComponent, SpriteLoader, StaticValue, SubCompositionPlayableAsset, SubCompositionTrack, TEMPLATE_USE_OFFSCREEN_CANVAS, TEXTURE_UNIFORM_MAP, TextComponent, TextComponentBase, TextLayout, TextLoader, TextStyle, Texture, TextureFactory, TextureLoadAction, TextureSourceType, TextureStoreAction, ThreeComposition, ThreeDisplayObject, ThreeEngine, ThreeMaterial, ThreeSpriteComponent, ThreeTextComponent, ThreeTexture, Ticker, TimelineAsset, TimelineClip, TimelinePlayable, TrackAsset, TrackSortWrapper, TrackType, Transform, TransformAnimationPlayable, TransformPlayableAsset, TransformTrack, VFXItem, ValueGetter, addByOrder, addItem, addItemWithOrder, applyMixins, assertExist, asserts, base64ToFile, blend, calculateTranslation, canvasPool, colorGradingFrag, colorStopsFromGradient, colorToArr$1 as colorToArr, combineImageTemplate, compatible_frag as compatibleFrag, compatible_vert as compatibleVert, createCopyShader, createGLContext, createKeyFrameMeta, createShaderWithMacros, createShape, createVFXItem, createValueGetter, decimalEqual, defaultGlobalVolume, defaultPlugins, deserializeMipmapTexture, earcut, effectsClass, effectsClassStore, enlargeBuffer, ensureFixedNumber, ensureVec3, findPreviousRenderPass, gaussianDown_frag as gaussianDownFrag, gaussianDownHFrag, gaussianDownVFrag, gaussianUpFrag, generateEmptyTypedArray, generateGUID, generateHalfFloatTexture, generateTransparentTexture, generateWhiteTexture, getBackgroundImage, getColorFromGradientStops, getConfig, getDefaultTemplateCanvasPool, getDefaultTextureFactory, getGeometryByShape, getGeometryTriangles, getImageItemRenderInfo, getKTXTextureOptions, getKeyFrameMetaByRawValue, getMergedStore, getParticleMeshShader, getPixelRatio, getPreMultiAlpha, getStandardComposition, getStandardImage, getStandardItem, getStandardJSON, getTextureSize, glContext, glType2VertexFormatType, gpuTimer, imageDataFromColor, imageDataFromGradient, initErrors, initGLContext, integrate, interpolateColor, isAlipayMiniApp, isAndroid, isArray, isCanvas, isFunction, isIOS, isObject, isSceneJSON, isSceneURL, isSceneWithOptions, isSimulatorCellPhone, isString, isUniformStruct, isUniformStructArray, isValidFontFamily, isWebGL2, itemFrag, itemFrameFrag, itemVert, loadBinary, loadBlob, loadImage, loadMedia, loadVideo, loadWebPOptional, logger, index as math, maxSpriteMeshItemCount, modifyMaxKeyframeShader, nearestPowerOfTwo, noop, normalizeColor, numberToFix, parsePercent$1 as parsePercent, particleFrag, particleOriginTranslateMap$1 as particleOriginTranslateMap, particleUniformTypeMap, particleVert, pluginLoaderMap, pointOnLine, randomInRange, registerPlugin, removeItem, rotateVec2, screenMeshVert, serialize, setBlendMode, setConfig, setDefaultTextureFactory, setMaskMode, setMaxSpriteMeshItemCount, setRayFromCamera, setSideMode, setSpriteMeshMaxItemCountByGPU, setUniformValue, sortByOrder, index$1 as spec, spriteMeshShaderFromFilter, spriteMeshShaderFromRenderInfo, spriteMeshShaderIdFromRenderInfo, thresholdFrag, throwDestroyedError, trailVert, translatePoint, trianglesFromRect, unregisterPlugin, valIfUndefined, value, valueDefine, vecAssign, vecFill, vecMulCombine, vecNormalize, version, vertexFormatType2GLType };
 //# sourceMappingURL=index.mjs.map