@galacean/effects-threejs 2.8.1 → 2.8.3

package/dist/index.js

@@ -3,7 +3,7 @@
  * Description: Galacean Effects runtime threejs plugin for the web
  * Author: Ant Group CO., Ltd.
  * Contributors: 燃然,飂兮,十弦,云垣,茂安,意绮
- * Version: v2.8.1
+ * Version: v2.8.3
  */
 
 'use strict';
@@ -13372,22 +13372,34 @@ function _loadVideo() {
             return [
                 2,
                 new Promise(function(resolve, reject) {
-                    var handleCanPlay = function() {
+                    var settled = false;
+                    var handleSuccess = function() {
+                        if (settled) {
+                            return;
+                        }
+                        settled = true;
+                        cleanup();
                         resolve(video);
-                        video.removeEventListener("error", handleError);
                     };
-                    var handleError = function(e) {
-                        video.removeEventListener("canplay", handleCanPlay);
+                    var handleError = function() {
+                        if (settled) {
+                            return;
+                        }
+                        settled = true;
+                        cleanup();
                         reject("Load video fail.");
                     };
-                    video.addEventListener("canplay", handleCanPlay, {
-                        once: true
-                    });
-                    video.addEventListener("error", handleError, {
-                        once: true
+                    var cleanup = function() {
+                        video.removeEventListener("loadeddata", handleSuccess);
+                        video.removeEventListener("canplay", handleSuccess);
+                        video.removeEventListener("error", handleError);
+                    };
+                    video.addEventListener("loadeddata", handleSuccess);
+                    video.addEventListener("canplay", handleSuccess);
+                    video.addEventListener("error", handleError);
+                    video.play().catch(function(err) {
+                        console.warn("Autoplay blocked:", err);
                     });
-                    // 显式触发视频加载
-                    video.load();
                 })
             ];
         });
@@ -16689,10 +16701,7 @@ var LateUpdateTickData = /*#__PURE__*/ function(TickData) {
         }
         var regions = [];
         var ray = this.getHitTestRay(x, y);
-        this.refContent.forEach(function(ref) {
-            var _ref_getComponent;
-            (_ref_getComponent = ref.getComponent(exports.CompositionComponent)) == null ? void 0 : _ref_getComponent.hitTest(ray, x, y, regions, force, options);
-        });
+        this.rootComposition.hitTest(ray, x, y, regions, force, options);
         return regions;
     };
     /**
@@ -17769,10 +17778,32 @@ exports.CompositionComponent = /*#__PURE__*/ function(Component) {
         });
     };
     _proto.hitTest = function hitTest(ray, x, y, regions, force, options) {
-        var _this, _loop = function(i) {
-            var item = _this.items[i];
-            if (item.isActive && item.transform.getValid() && !exports.VFXItem.isComposition(item) && !skip(item)) {
-                var hitParams = item.getHitTestParams(force);
+        var _this_item_composition;
+        var isHitTestSuccess = this.hitTestRecursive(this.item, ray, x, y, regions, force, options);
+        // 子元素碰撞测试成功加入当前预合成元素，判断是否是合成根元素，根元素不加入
+        if (isHitTestSuccess && this.item !== ((_this_item_composition = this.item.composition) == null ? void 0 : _this_item_composition.rootItem)) {
+            var item = this.item;
+            var lastRegion = regions[regions.length - 1];
+            var hitPositions = lastRegion.hitPositions;
+            var region = {
+                id: item.getInstanceId(),
+                name: item.name,
+                position: hitPositions[hitPositions.length - 1],
+                parentId: item.parentId,
+                hitPositions: hitPositions,
+                behavior: InteractBehavior.NONE,
+                item: item,
+                composition: item.composition
+            };
+            regions.push(region);
+        }
+        return isHitTestSuccess;
+    };
+    _proto.hitTestRecursive = function hitTestRecursive(item, ray, x, y, regions, force, options) {
+        var _this, _loop = function() {
+            var hitTestItem = _step.value;
+            if (hitTestItem.isActive && hitTestItem.transform.getValid() && !skip(hitTestItem)) {
+                var hitParams = hitTestItem.getHitTestParams(force);
                 if (hitParams) {
                     var success = false;
                     var intersectPoint = new Vector3();
@@ -17817,35 +17848,48 @@ exports.CompositionComponent = /*#__PURE__*/ function(Component) {
                     }
                     if (success) {
                         var region = {
-                            compContent: _this.item,
-                            id: item.getInstanceId(),
-                            name: item.name,
+                            id: hitTestItem.getInstanceId(),
+                            name: hitTestItem.name,
                             position: hitPositions[hitPositions.length - 1],
-                            parentId: item.parentId,
+                            parentId: hitTestItem.parentId,
                             hitPositions: hitPositions,
                             behavior: hitParams.behavior,
-                            item: item,
+                            item: hitTestItem,
                             composition: _this.item.composition
                         };
                         regions.push(region);
+                        hitTestSuccess = true;
                         if (stop(region)) {
                             return {
-                                v: regions
+                                v: true
                             };
                         }
                     }
                 }
+                if (exports.VFXItem.isComposition(hitTestItem)) {
+                    if (hitTestItem.getComponent(CompositionComponent).hitTest(ray, x, y, regions, force, options)) {
+                        hitTestSuccess = true;
+                    }
+                } else {
+                    if (_this.hitTestRecursive(hitTestItem, ray, x, y, regions, force, options)) {
+                        hitTestSuccess = true;
+                    }
+                }
             }
         };
         var hitPositions = [];
         var stop = (options == null ? void 0 : options.stop) || noop;
         var skip = (options == null ? void 0 : options.skip) || noop;
-        var maxCount = (options == null ? void 0 : options.maxCount) || this.items.length;
-        for(var i = 0; i < this.items.length && regions.length < maxCount; i++){
-            var _ret = (_this = this, _loop(i));
+        var maxCount = options == null ? void 0 : options.maxCount;
+        if (maxCount !== undefined && regions.length >= maxCount) {
+            return false;
+        }
+        var hitTestSuccess = false;
+        for(var _iterator = _create_for_of_iterator_helper_loose(item.children), _step; !(_step = _iterator()).done;){
+            var _ret = (_this = this, _loop());
             if (_type_of(_ret) === "object") return _ret.v;
         }
-        return regions;
+        return hitTestSuccess;
     };
     /**
    * 设置当前合成子元素的渲染顺序
@@ -18348,6 +18392,15 @@ exports.PostProcessVolume = __decorate([
             });
         })();
     };
+    _proto.onUpdate = function onUpdate(dt) {
+        for(var i = 0; i < this.materials.length; i++){
+            var material = this.materials[i];
+            material.setVector2("_Size", this.transform.size);
+            if (this.renderer.renderMode === RenderMode.BILLBOARD || this.renderer.renderMode === RenderMode.VERTICAL_BILLBOARD || this.renderer.renderMode === RenderMode.HORIZONTAL_BILLBOARD) {
+                material.setVector3("_Scale", this.transform.scale);
+            }
+        }
+    };
     _proto.render = function render(renderer) {
         if (!this.getVisible()) {
             return;
@@ -18409,12 +18462,7 @@ exports.PostProcessVolume = __decorate([
     };
     _proto.draw = function draw(renderer) {
         for(var i = 0; i < this.materials.length; i++){
-            var material = this.materials[i];
-            material.setVector2("_Size", this.transform.size);
-            if (this.renderer.renderMode === RenderMode.BILLBOARD || this.renderer.renderMode === RenderMode.VERTICAL_BILLBOARD || this.renderer.renderMode === RenderMode.HORIZONTAL_BILLBOARD) {
-                material.setVector3("_Scale", this.transform.scale);
-            }
-            renderer.drawGeometry(this.geometry, this.transform.getWorldMatrix(), material, i);
+            renderer.drawGeometry(this.geometry, this.transform.getWorldMatrix(), this.materials[i], i);
         }
     };
     _proto.fromData = function fromData(data) {
@@ -25672,6 +25720,7 @@ exports.SpriteComponent = /*#__PURE__*/ function(MaskableGraphic) {
     var _proto = SpriteComponent.prototype;
     _proto.onUpdate = function onUpdate(dt) {
         var _this = this;
+        MaskableGraphic.prototype.onUpdate.call(this, dt);
         var time = this.time;
         var duration = this.duration;
         var textureAnimation = this.textureSheetAnimation;
@@ -28665,11 +28714,11 @@ var TextLayout = /*#__PURE__*/ function() {
    * @param totalLineHeight - 可选的实际总行高，用于替代默认计算
    * @returns - 行高偏移值
    */ _proto.getOffsetY = function getOffsetY(style, lineCount, lineHeight, fontSize, totalLineHeight) {
-        var outlineWidth = style.outlineWidth, fontScale = style.fontScale;
+        var fontScale = style.fontScale;
         // /3 计算Y轴偏移量，以匹配编辑器行为
         var offsetY = (lineHeight - fontSize) / 3;
         // 计算基础偏移量
-        var baseOffset = fontSize + outlineWidth * fontScale;
+        var baseOffset = fontSize;
         var commonCalculation = totalLineHeight !== undefined ? totalLineHeight : lineHeight * (lineCount - 1);
         var offsetResult = 0;
         switch(this.textVerticalAlign){
@@ -28685,11 +28734,16 @@ var TextLayout = /*#__PURE__*/ function() {
         }
         return offsetResult;
     };
-    _proto.getOffsetX = function getOffsetX(style, maxWidth) {
+    /**
+   * 获取初始的水平偏移值
+   * @param style - 字体基础数据
+   * @param maxWidth - 最大行宽
+   * @returns - 水平偏移值
+   */ _proto.getOffsetX = function getOffsetX(style, maxWidth) {
         var offsetX = 0;
         switch(this.textAlign){
             case TextAlignment.left:
-                offsetX = style.outlineWidth * style.fontScale;
+                offsetX = 0;
                 break;
             case TextAlignment.middle:
                 offsetX = (this.width * style.fontScale - maxWidth) / 2;
@@ -28765,7 +28819,8 @@ var TextStyle = /*#__PURE__*/ function() {
             1
         ];
         this.outlineWidth = 0;
-        if (outline) {
+        var _outline_outlineWidth;
+        if (outline && ((_outline_outlineWidth = outline.outlineWidth) != null ? _outline_outlineWidth : 0) > 0) {
             this.isOutlined = true;
             var _outline_outlineColor;
             this.outlineColor = [].concat((_outline_outlineColor = outline.outlineColor) != null ? _outline_outlineColor : [
@@ -28774,8 +28829,8 @@ var TextStyle = /*#__PURE__*/ function() {
                 1,
                 1
             ]);
-            var _outline_outlineWidth;
-            this.outlineWidth = (_outline_outlineWidth = outline.outlineWidth) != null ? _outline_outlineWidth : 1;
+            var _outline_outlineWidth1;
+            this.outlineWidth = (_outline_outlineWidth1 = outline.outlineWidth) != null ? _outline_outlineWidth1 : 0;
         }
         // 重置阴影状态
         this.hasShadow = false;
@@ -29036,6 +29091,10 @@ exports.TextComponent = /*#__PURE__*/ function(MaskableGraphic) {
    * 文本行数
    */ _this.lineCount = 0;
         /**
+   * 描边/阴影等特效导致的纹理扩容比例 X/Y
+   */ _this.effectScaleX = 1;
+        _this.effectScaleY = 1;
+        /**
    * 每一行文本的最大宽度
    */ _this.maxLineWidth = 0;
         /**
@@ -29097,6 +29156,16 @@ exports.TextComponent = /*#__PURE__*/ function(MaskableGraphic) {
     _proto.onUpdate = function onUpdate(dt) {
         MaskableGraphic.prototype.onUpdate.call(this, dt);
         this.updateTexture();
+        // 覆盖基类每帧更新 size 行为，应用扩容比例
+        for(var _iterator = _create_for_of_iterator_helper_loose(this.materials), _step; !(_step = _iterator()).done;){
+            var material = _step.value;
+            var sizeX = this.transform.size.x;
+            var sizeY = this.transform.size.y;
+            var _this_getTextureExpandScale = this.getTextureExpandScale(), scalex = _this_getTextureExpandScale[0], scaley = _this_getTextureExpandScale[1];
+            sizeX *= scalex;
+            sizeY *= scaley;
+            material.setVector2("_Size", new Vector2(sizeX, sizeY));
+        }
     };
     _proto.onDestroy = function onDestroy() {
         MaskableGraphic.prototype.onDestroy.call(this);
@@ -29286,23 +29355,32 @@ exports.TextComponent = /*#__PURE__*/ function(MaskableGraphic) {
         var style = this.textStyle;
         var layout = this.textLayout;
         var fontScale = style.fontScale;
-        var width = (layout.width + style.fontOffset) * fontScale;
+        var baseWidth = (layout.width + style.fontOffset) * fontScale;
         var finalHeight = layout.lineHeight * this.lineCount;
         var fontSize = style.fontSize * fontScale;
         var lineHeight = layout.lineHeight * fontScale;
         style.fontDesc = this.getFontDesc(fontSize);
         var char = (this.text || "").split("");
+        var baseHeight = 0;
         if (layout.autoWidth) {
-            this.canvas.height = finalHeight * fontScale;
+            baseHeight = finalHeight * fontScale;
             this.item.transform.size.set(1, finalHeight / layout.height);
         } else {
-            this.canvas.height = layout.height * fontScale;
-        }
-        var height = this.canvas.height;
-        this.renderToTexture(width, height, flipY, function(context) {
+            baseHeight = layout.height * fontScale;
+        }
+        var _this_getEffectPadding = this.getEffectPadding(), padL = _this_getEffectPadding.padL, padR = _this_getEffectPadding.padR, padT = _this_getEffectPadding.padT, padB = _this_getEffectPadding.padB;
+        var hasEffect = (padL | padR | padT | padB) !== 0;
+        var texWidth = hasEffect ? Math.ceil(baseWidth + padL + padR) : baseWidth;
+        var texHeight = hasEffect ? Math.ceil(baseHeight + padT + padB) : baseHeight;
+        var shiftX = hasEffect ? padL : 0;
+        var shiftY = hasEffect ? flipY ? padT : padB : 0;
+        // 给渲染层用：扩容比例
+        this.effectScaleX = baseWidth > 0 ? texWidth / baseWidth : 1;
+        this.effectScaleY = baseHeight > 0 ? texHeight / baseHeight : 1;
+        this.renderToTexture(texWidth, texHeight, flipY, function(context) {
             // canvas size 变化后重新刷新 context
-            if (_this.maxLineWidth > width && layout.overflow === TextOverflow.display) {
-                context.font = _this.getFontDesc(fontSize * width / _this.maxLineWidth);
+            if (_this.maxLineWidth > baseWidth && layout.overflow === TextOverflow.display) {
+                context.font = _this.getFontDesc(fontSize * baseWidth / _this.maxLineWidth);
             } else {
                 context.font = style.fontDesc;
             }
@@ -29325,7 +29403,7 @@ exports.TextComponent = /*#__PURE__*/ function(MaskableGraphic) {
                 var textMetrics = context.measureText(str);
                 // 和浏览器行为保持一致
                 x += layout.letterSpace * fontScale;
-                if (x + textMetrics.width > width && i > 0 || str === "\n") {
+                if (x + textMetrics.width > baseWidth && i > 0 || str === "\n") {
                     charsInfo.push({
                         y: y,
                         width: x,
@@ -29349,14 +29427,27 @@ exports.TextComponent = /*#__PURE__*/ function(MaskableGraphic) {
                 chars: charsArray,
                 charOffsetX: charOffsetX
             });
-            charsInfo.forEach(function(charInfo) {
-                var x = layout.getOffsetX(style, charInfo.width);
-                charInfo.chars.forEach(function(str, i) {
-                    if (style.isOutlined) {
-                        context.strokeText(str, x + charInfo.charOffsetX[i], charInfo.y);
+            // 先描边
+            if (style.isOutlined) {
+                charsInfo.forEach(function(charInfo) {
+                    var ox = layout.getOffsetX(style, charInfo.width);
+                    for(var i = 0; i < charInfo.chars.length; i++){
+                        var str = charInfo.chars[i];
+                        var drawX = shiftX + ox + charInfo.charOffsetX[i];
+                        var drawY = shiftY + charInfo.y;
+                        context.strokeText(str, drawX, drawY);
                     }
-                    context.fillText(str, x + charInfo.charOffsetX[i], charInfo.y);
                 });
+            }
+            // 再填充
+            charsInfo.forEach(function(charInfo) {
+                var ox = layout.getOffsetX(style, charInfo.width);
+                for(var i = 0; i < charInfo.chars.length; i++){
+                    var str = charInfo.chars[i];
+                    var drawX = shiftX + ox + charInfo.charOffsetX[i];
+                    var drawY = shiftY + charInfo.y;
+                    context.fillText(str, drawX, drawY);
+                }
             });
             if (style.hasShadow) {
                 context.shadowColor = "transparent";
@@ -29367,6 +29458,32 @@ exports.TextComponent = /*#__PURE__*/ function(MaskableGraphic) {
     _proto.renderText = function renderText(options) {
         this.updateTexture();
     };
+    /**
+   * 给渲染层用：获取特效扩容比例（描边/阴影导致的纹理扩容）
+   * @returns
+   */ _proto.getTextureExpandScale = function getTextureExpandScale() {
+        return [
+            this.effectScaleX,
+            this.effectScaleY
+        ];
+    };
+    /**
+   * 获取描边和阴影的 padding 值（单位：px）
+   * @returns
+   */ _proto.getEffectPadding = function getEffectPadding() {
+        var style = this.textStyle;
+        var hasDrawOutline = style.isOutlined && style.outlineWidth > 0;
+        var outlinePad = hasDrawOutline ? Math.ceil(style.outlineWidth * 2 * style.fontScale) : 0;
+        var hasShadow = style.hasShadow && (style.shadowBlur > 0 || style.shadowOffsetX !== 0 || style.shadowOffsetY !== 0);
+        var shadowPad = hasShadow ? Math.ceil((Math.abs(style.shadowOffsetX) + Math.abs(style.shadowOffsetY) + style.shadowBlur) * style.fontScale) : 0;
+        var pad = outlinePad + shadowPad;
+        return {
+            padL: pad,
+            padR: pad,
+            padT: pad,
+            padB: pad
+        };
+    };
     _proto.setAutoWidth = function setAutoWidth(value) {
         var layout = this.textLayout;
         var normalizedValue = !!value;
@@ -29417,14 +29534,11 @@ exports.TextComponent = /*#__PURE__*/ function(MaskableGraphic) {
         this.isDirty = true;
     };
     _proto.setFontSize = function setFontSize(value) {
-        if (this.textStyle.fontSize === value) {
+        var size = Math.max(1, Number(value) || 1);
+        if (this.textStyle.fontSize === size) {
             return;
         }
-        // 保证字号变化后位置正常
-        var diff = this.textStyle.fontSize - value;
-        var layout = this.textLayout;
-        layout.lineHeight += diff;
-        this.textStyle.fontSize = value;
+        this.textStyle.fontSize = size;
         this.isDirty = true;
     };
     _proto.setOutlineWidth = function setOutlineWidth(value) {
@@ -31518,7 +31632,7 @@ function getStandardSpriteContent(sprite, transform) {
     return ret;
 }
 
-var version$2 = "2.8.1";
+var version$2 = "2.8.3";
 var v0 = /^(\d+)\.(\d+)\.(\d+)(-(\w+)\.\d+)?$/;
 var standardVersion = /^(\d+)\.(\d+)$/;
 var reverseParticle = false;
@@ -32863,7 +32977,7 @@ function _createTextureOptionsBySource() {
         scene.jsonScene.items.forEach(function(item) {
             if (item.type === ItemType.text || item.type === ItemType.richtext) {
                 var textVariable = variables[item.name];
-                if (!textVariable) {
+                if (textVariable === undefined || textVariable === null) {
                     return;
                 }
                 item.components.forEach(function(param) {
@@ -35218,7 +35332,7 @@ registerPlugin("text", TextLoader);
 registerPlugin("sprite", SpriteLoader);
 registerPlugin("particle", ParticleLoader);
 registerPlugin("interact", InteractLoader);
-var version$1 = "2.8.1";
+var version$1 = "2.8.3";
 logger.info("Core version: " + version$1 + ".");
 
 var _obj;
@@ -36795,7 +36909,7 @@ applyMixins(exports.ThreeTextComponent, [
  */ Mesh.create = function(engine, props) {
     return new ThreeMesh(engine, props);
 };
-var version = "2.8.1";
+var version = "2.8.3";
 logger.info("THREEJS plugin version: " + version + ".");
 
 exports.ActivationMixerPlayable = ActivationMixerPlayable;