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

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.0.0-alpha.20
+ * Version: v2.0.0-alpha.21
  */
 
 'use strict';
@@ -4939,10 +4939,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;
@@ -13067,6 +13082,16 @@ exports.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;
@@ -13118,9 +13143,8 @@ exports.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)) {
@@ -13148,7 +13172,7 @@ exports.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;
@@ -13159,8 +13183,8 @@ exports.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);
@@ -13188,6 +13212,9 @@ exports.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;
@@ -13209,6 +13236,9 @@ exports.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;
@@ -13251,6 +13281,25 @@ exports.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);
 exports.InteractComponent = __decorate([
@@ -16767,17 +16816,12 @@ exports.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({
@@ -16858,10 +16902,6 @@ exports.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,
@@ -19417,21 +19457,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;
@@ -19589,6 +19641,9 @@ exports.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", {
@@ -19632,6 +19687,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;
     };
     /**
    * 设置字号大小
@@ -19678,6 +19758,7 @@ var TextComponentBase = /*#__PURE__*/ function() {
             return;
         }
         this.text = value;
+        this.lineCount = this.getLineCount(value, false);
         this.isDirty = true;
     };
     /**
@@ -19840,10 +19921,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++){
@@ -22406,10 +22485,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;
@@ -22427,6 +22502,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);
@@ -23233,26 +23312,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 : exports.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:
@@ -23275,7 +23355,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
@@ -23374,7 +23456,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);
                                         })
                                     ])
@@ -23407,6 +23489,7 @@ var seed$1 = 1;
                                 loadedTextures = _state.sent();
                                 _this.updateSceneData(jsonScene.items);
                                 scene = {
+                                    timeInfos: timeInfos,
                                     url: url,
                                     renderLevel: _this.options.renderLevel,
                                     storage: {},
@@ -23429,11 +23512,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
@@ -23972,6 +24057,9 @@ 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();
@@ -24119,7 +24207,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);
@@ -24426,7 +24514,6 @@ var listOrder = 0;
         /**
    * 预合成的合成属性，在 content 中会被其元素属性覆盖
    */ this.refCompositionProps = new Map();
-        this.editorScaleRatio = 1.0;
         // TODO: 待优化
         this.assigned = false;
         /**
@@ -24463,11 +24550,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;
@@ -24481,6 +24569,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;
@@ -24910,7 +24999,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 = [];
@@ -25231,6 +25320,15 @@ var listOrder = 0;
    */ function get() {
                 return this.destroyed;
             }
+        },
+        {
+            key: "editorScaleRatio",
+            get: function get() {
+                return this.camera.fovScaleRatio;
+            },
+            set: function set(value) {
+                this.camera.fovScaleRatio = value;
+            }
         }
     ]);
     return Composition;
@@ -25628,7 +25726,7 @@ registerPlugin("sprite", SpriteLoader, exports.VFXItem, true);
 registerPlugin("particle", ParticleLoader, exports.VFXItem, true);
 registerPlugin("cal", CalculateLoader, exports.VFXItem, true);
 registerPlugin("interact", InteractLoader, exports.VFXItem, true);
-var version$1 = "2.0.0-alpha.20";
+var version$1 = "2.0.0-alpha.21";
 logger.info("Core version: " + version$1 + ".");
 
 var _obj;
@@ -27216,7 +27314,7 @@ 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.21";
 logger.info("THREEJS plugin version: " + version + ".");
 
 exports.AbstractPlugin = AbstractPlugin;