@galacean/effects-threejs 1.6.0-beta.0 → 1.6.0-beta.2

package/dist/index.js

@@ -3,7 +3,7 @@
  * Description: Galacean Effects runtime threejs plugin for the web
  * Author: Ant Group CO., Ltd.
  * Contributors: 燃然,飂兮,十弦,云垣,茂安,意绮
- * Version: v1.6.0-beta.0
+ * Version: v1.6.0-beta.2
  */
 
 'use strict';
@@ -13542,6 +13542,14 @@ var InteractVFXItem = /** @class */ (function (_super) {
     function InteractVFXItem(props, composition) {
         var _a;
         var _this = _super.call(this, props, composition) || this;
+        /**
+         * 拖拽的惯性衰减系数，范围[0, 1], 越大惯性越强
+         */
+        _this.downgrade = 0.95;
+        /**
+         * 拖拽的距离映射系数，越大越容易拖动
+         */
+        _this.dragRatio = [1, 1];
         _this.engine = (_a = _this.composition) === null || _a === void 0 ? void 0 : _a.getEngine();
         return _this;
     }
@@ -13552,8 +13560,23 @@ var InteractVFXItem = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(InteractVFXItem.prototype, "enable", {
+        get: function () {
+            return this.enabled;
+        },
+        set: function (enable) {
+            this.enabled = enable;
+            if (!enable) {
+                // 立刻停止惯性滑动
+                this.bouncingArg = null;
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
     InteractVFXItem.prototype.onConstructed = function (options) {
         this.ui = options.content;
+        this.enabled = true;
     };
     InteractVFXItem.prototype.onLifetimeBegin = function (composition) {
         var _a, _b, _c;
@@ -13572,9 +13595,8 @@ var InteractVFXItem = /** @class */ (function (_super) {
         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)) {
@@ -13610,7 +13632,7 @@ var InteractVFXItem = /** @class */ (function (_super) {
         };
     };
     InteractVFXItem.prototype.getHitTestParams = function () {
-        if (!this.clickable) {
+        if (!this.clickable || !this.canInteract()) {
             return;
         }
         var behavior = this.ui.options.behavior;
@@ -13646,13 +13668,13 @@ var InteractVFXItem = /** @class */ (function (_super) {
         var dragEvent;
         var handlerMap = {
             touchstart: function (event) {
-                var _a, _b;
-                if (!((_a = _this.composition) === null || _a === void 0 ? void 0 : _a.interactive)) {
+                var _a;
+                if (!_this.canInteract()) {
                     return;
                 }
                 _this.dragEvent = null;
                 _this.bouncingArg = null;
-                var camera = (_b = _this.composition) === null || _b === void 0 ? void 0 : _b.camera;
+                var camera = (_a = _this.composition) === null || _a === void 0 ? void 0 : _a.camera;
                 dragEvent = {
                     x: event.x,
                     y: event.y,
@@ -13667,8 +13689,7 @@ var InteractVFXItem = /** @class */ (function (_super) {
                 _this.bouncingArg = event;
             },
             touchend: function (event) {
-                var _a;
-                if (!((_a = _this.composition) === null || _a === void 0 ? void 0 : _a.interactive)) {
+                if (!_this.canInteract()) {
                     return;
                 }
                 var bouncingArg = _this.bouncingArg;
@@ -13695,36 +13716,40 @@ var InteractVFXItem = /** @class */ (function (_super) {
         // OVERRIDE
     };
     InteractVFXItem.prototype.handleDragMove = function (evt, event) {
-        var _a, _b, _c;
-        if (!(evt && evt.cameraParam) || !((_a = this.composition) === null || _a === void 0 ? void 0 : _a.interactive)) {
+        var _a, _b;
+        if (!(evt === null || evt === void 0 ? void 0 : evt.cameraParam) || !this.canInteract() || !this.composition) {
             return;
         }
         var options = this.ui.options;
-        var _d = evt.cameraParam, position = _d.position, fov = _d.fov;
+        var _c = evt.cameraParam, position = _c.position, fov = _c.fov;
         var dy = event.dy;
         var dx = event.dx * event.width / event.height;
         var depth = position[2];
         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 _e = __read$3(options.dxRange, 2), min = _e[0], max = _e[1];
+            var _d = __read$3(options.dxRange, 2), min = _d[0], max = _d[1];
             nx = clamp$1(nx, min, max);
             if (nx !== min && nx !== max && min !== max) {
-                (_b = event.origin) === null || _b === void 0 ? void 0 : _b.preventDefault();
+                (_a = event.origin) === null || _a === void 0 ? void 0 : _a.preventDefault();
             }
         }
         if (options.dyRange) {
-            var _f = __read$3(options.dyRange, 2), min = _f[0], max = _f[1];
+            var _e = __read$3(options.dyRange, 2), min = _e[0], max = _e[1];
             ny = clamp$1(ny, min, max);
             if (ny !== min && ny !== max && min !== max) {
-                (_c = event.origin) === null || _c === void 0 ? void 0 : _c.preventDefault();
+                (_b = event.origin) === null || _b === void 0 ? void 0 : _b.preventDefault();
             }
         }
         this.composition.camera.position = new Vector3(nx, ny, depth);
     };
+    InteractVFXItem.prototype.canInteract = function () {
+        var _a;
+        return Boolean((_a = this.composition) === null || _a === void 0 ? void 0 : _a.interactive) && this.enabled;
+    };
     return InteractVFXItem;
 }(VFXItem));
 function shouldIgnoreBouncing(arg, mul) {
@@ -20281,32 +20306,37 @@ var TextLayout = /** @class */ (function () {
         this.textAlign = textAlign;
         this.lineHeight = lineHeight;
     }
-    TextLayout.prototype.getOffsetY = function (style) {
-        var offsetY = 0;
-        var offset = (style.fontSize + style.outlineWidth) * style.fontScale;
+    TextLayout.prototype.getOffsetY = function (style, lineCount, lineHeight) {
+        var offsetResult = 0;
+        var fontSize = style.fontSize, outlineWidth = style.outlineWidth, fontScale = style.fontScale;
+        // 计算基础偏移量
+        var baseOffset = (fontSize + outlineWidth) * fontScale;
+        // /3 计算Y轴偏移量，以匹配编辑器行为
+        var offsetY = (lineHeight - fontSize) / 3;
+        var commonCalculation = lineHeight * (lineCount - 1);
         switch (this.textBaseline) {
-            case 0:
-                offsetY = offset;
+            case TextBaseline$1.top:
+                offsetResult = baseOffset + offsetY;
                 break;
-            case 1:
-                offsetY = (this.height + offset) / 2; // fonSize;
+            case TextBaseline$1.middle:
+                offsetResult = (this.height * fontScale - commonCalculation + baseOffset) / 2;
                 break;
-            case 2:
-                offsetY = this.height - offset / 2;
+            case TextBaseline$1.bottom:
+                offsetResult = (this.height * fontScale - commonCalculation) - offsetY;
                 break;
         }
-        return offsetY;
+        return offsetResult;
     };
     TextLayout.prototype.getOffsetX = function (style, maxWidth) {
         var offsetX = 0;
         switch (this.textAlign) {
-            case 0:
+            case TextAlignment$1.left:
                 offsetX = style.outlineWidth * style.fontScale;
                 break;
-            case 1:
+            case TextAlignment$1.middle:
                 offsetX = (this.width * style.fontScale - maxWidth) / 2;
                 break;
-            case 2:
+            case TextAlignment$1.right:
                 offsetX = (this.width * style.fontScale - maxWidth);
                 break;
         }
@@ -20540,7 +20570,7 @@ var TextItem = /** @class */ (function (_super) {
         var fontScale = style.fontScale;
         var width = (layout.width + style.fontOffset) * fontScale;
         var height = layout.height * fontScale;
-        var fontSize = style.fontSize * fontScale;
+        style.fontSize * fontScale;
         var lineHeight = layout.lineHeight * fontScale;
         this.char = (this.text || '').split('');
         this.canvas.width = width;
@@ -20560,10 +20590,9 @@ var TextItem = /** @class */ (function (_super) {
         // 文本颜色
         context.fillStyle = "rgba(".concat(style.textColor[0], ", ").concat(style.textColor[1], ", ").concat(style.textColor[2], ", ").concat(style.textColor[3], ")");
         var charsInfo = [];
-        // /3 为了和编辑器行为保持一致
-        var offsetY = (lineHeight - fontSize) / 3;
         var x = 0;
-        var y = layout.getOffsetY(style) + offsetY;
+        var lineCount = this.text.split('\n').length;
+        var y = layout.getOffsetY(style, lineCount, lineHeight);
         var charsArray = [];
         var charOffsetX = [];
         for (var i = 0; i < this.char.length; i++) {
@@ -24030,27 +24059,28 @@ var AssetManager = /** @class */ (function () {
     AssetManager.prototype.loadScene = function (url, renderer, options) {
         var _a, _b, _c;
         return __awaiter(this, void 0, void 0, function () {
-            var rawJSON, assetUrl, startTime, timeInfos, gpuInstance, asyncShaderCompile, compressedTexture, loadTimer, cancelLoading, waitPromise, hookTimeInfo, loadResourcePromise;
+            var rawJSON, assetUrl, startTime, timeInfoMessages, gpuInstance, asyncShaderCompile, compressedTexture, timeInfos, loadTimer, cancelLoading, waitPromise, hookTimeInfo, loadResourcePromise;
             var _this = this;
             return __generator(this, function (_d) {
                 assetUrl = isString(url) ? url : this.id;
                 startTime = performance.now();
-                timeInfos = [];
+                timeInfoMessages = [];
                 gpuInstance = renderer === null || renderer === void 0 ? void 0 : renderer.engine.gpuCapability;
                 asyncShaderCompile = (_b = (_a = gpuInstance === null || gpuInstance === void 0 ? void 0 : gpuInstance.detail) === null || _a === void 0 ? void 0 : _a.asyncShaderCompile) !== null && _b !== void 0 ? _b : false;
                 compressedTexture = (_c = gpuInstance === null || gpuInstance === void 0 ? void 0 : gpuInstance.detail.compressedTexture) !== null && _c !== void 0 ? _c : 0;
+                timeInfos = {};
                 cancelLoading = false;
                 waitPromise = new Promise(function (resolve, reject) {
                     loadTimer = window.setTimeout(function () {
                         cancelLoading = true;
                         _this.removeTimer(loadTimer);
                         var totalTime = performance.now() - startTime;
-                        reject("Load time out: totalTime: ".concat(totalTime.toFixed(4), "ms ").concat(timeInfos.join(' '), ", url: ").concat(assetUrl));
+                        reject("Load time out: totalTime: ".concat(totalTime.toFixed(4), "ms ").concat(timeInfoMessages.join(' '), ", url: ").concat(assetUrl));
                     }, _this.timeout * 1000);
                     _this.timers.push(loadTimer);
                 });
                 hookTimeInfo = function (label, func) { return __awaiter(_this, void 0, void 0, function () {
-                    var st, result, e_1;
+                    var st, result, time, e_1;
                     return __generator(this, function (_a) {
                         switch (_a.label) {
                             case 0:
@@ -24062,7 +24092,9 @@ var AssetManager = /** @class */ (function () {
                                 return [4 /*yield*/, func()];
                             case 2:
                                 result = _a.sent();
-                                timeInfos.push("[".concat(label, ": ").concat((performance.now() - st).toFixed(2), "]"));
+                                time = performance.now() - st;
+                                timeInfoMessages.push("[".concat(label, ": ").concat(time.toFixed(2), "]"));
+                                timeInfos[label] = time;
                                 return [2 /*return*/, result];
                             case 3:
                                 e_1 = _a.sent();
@@ -24121,7 +24153,7 @@ var AssetManager = /** @class */ (function () {
                                 return [4 /*yield*/, Promise.all([
                                         hookTimeInfo('processBins', function () { return _this.processBins(bins_1); }),
                                         hookTimeInfo('processImages', function () { return _this.processImages(images_2, usedImages_1, compressedTexture); }),
-                                        hookTimeInfo("".concat(asyncShaderCompile ? 'async' : 'sync', " compile"), function () { return _this.precompile(compositions_1, pluginSystem_1, renderer, options); }),
+                                        hookTimeInfo("".concat(asyncShaderCompile ? 'async' : 'sync', "Compile"), function () { return _this.precompile(compositions_1, pluginSystem_1, renderer, options); }),
                                     ])];
                             case 8:
                                 _d = __read$3.apply(void 0, [_e.sent(), 2]), loadedBins_1 = _d[0], loadedImages_1 = _d[1];
@@ -24133,6 +24165,7 @@ var AssetManager = /** @class */ (function () {
                                 loadedTextures = _e.sent();
                                 jsonScene_1.compositions = this.updateSceneData(jsonScene_1.compositions);
                                 scene = {
+                                    timeInfos: timeInfos,
                                     url: url,
                                     renderLevel: this.options.renderLevel,
                                     storage: {},
@@ -24151,11 +24184,13 @@ var AssetManager = /** @class */ (function () {
                                 _e.label = 12;
                             case 12:
                                 totalTime = performance.now() - startTime;
-                                logger.info("Load asset: totalTime: ".concat(totalTime.toFixed(4), "ms ").concat(timeInfos.join(' '), ", url: ").concat(assetUrl));
+                                logger.info("Load asset: totalTime: ".concat(totalTime.toFixed(4), "ms ").concat(timeInfoMessages.join(' '), ", url: ").concat(assetUrl));
                                 window.clearTimeout(loadTimer);
                                 this.removeTimer(loadTimer);
                                 scene.totalTime = totalTime;
                                 scene.startTime = startTime;
+                                // 各部分分段时长
+                                scene.timeInfos = timeInfos;
                                 return [2 /*return*/, scene];
                         }
                     });
@@ -25003,7 +25038,7 @@ var Composition = /** @class */ (function () {
      * @param props - composition 的创建参数
      */
     function Composition(props, scene) {
-        var _a;
+        var _a, _b;
         /**
          * 动画播放速度
          */
@@ -25032,7 +25067,7 @@ var Composition = /** @class */ (function () {
         this.paused = false;
         this.lastVideoUpdateTime = 0;
         this.postLoaders = [];
-        var _b = props.reusable, reusable = _b === void 0 ? false : _b, _c = props.speed, speed = _c === void 0 ? 1 : _c, _d = props.baseRenderOrder, baseRenderOrder = _d === void 0 ? 0 : _d, renderer = props.renderer, onPlayerPause = props.onPlayerPause, onMessageItem = props.onMessageItem, onEnd = props.onEnd, event = props.event, width = props.width, height = props.height;
+        var _c = props.reusable, reusable = _c === void 0 ? false : _c, _d = props.speed, speed = _d === void 0 ? 1 : _d, _e = props.baseRenderOrder, baseRenderOrder = _e === void 0 ? 0 : _e, renderer = props.renderer, onPlayerPause = props.onPlayerPause, onMessageItem = props.onMessageItem, onEnd = props.onEnd, event = props.event, width = props.width, height = props.height;
         this.compositionSourceManager = new CompositionSourceManager(scene, renderer.engine);
         scene.jsonScene.imgUsage = undefined;
         if (reusable) {
@@ -25040,7 +25075,7 @@ var Composition = /** @class */ (function () {
             scene.textures = undefined;
             scene.consumed = true;
         }
-        var _e = this.compositionSourceManager, sourceContent = _e.sourceContent, pluginSystem = _e.pluginSystem, imgUsage = _e.imgUsage, totalTime = _e.totalTime, renderLevel = _e.renderLevel, refCompositionProps = _e.refCompositionProps;
+        var _f = this.compositionSourceManager, sourceContent = _f.sourceContent, pluginSystem = _f.pluginSystem, imgUsage = _f.imgUsage, totalTime = _f.totalTime, renderLevel = _f.renderLevel, refCompositionProps = _f.refCompositionProps;
         assertExist(sourceContent);
         this.refCompositionProps = refCompositionProps;
         var vfxItem = new CompVFXItem(sourceContent, this);
@@ -25057,7 +25092,7 @@ var Composition = /** @class */ (function () {
         this.renderer = renderer;
         this.texInfo = imageUsage !== null && imageUsage !== void 0 ? imageUsage : {};
         this.event = event;
-        this.statistic = { loadTime: totalTime !== null && totalTime !== void 0 ? totalTime : 0, loadStart: (_a = scene.startTime) !== null && _a !== void 0 ? _a : 0, firstFrameTime: 0 };
+        this.statistic = { loadTime: totalTime !== null && totalTime !== void 0 ? totalTime : 0, loadStart: (_a = scene.startTime) !== null && _a !== void 0 ? _a : 0, firstFrameTime: 0, precompileTime: (_b = scene.timeInfos['asyncCompile']) !== null && _b !== void 0 ? _b : scene.timeInfos['syncCompile'] };
         this.reusable = reusable;
         this.speed = speed;
         this.renderLevel = renderLevel;
@@ -27447,7 +27482,7 @@ Geometry.create = function (engine, options) {
 Mesh.create = function (engine, props) {
     return new ThreeMesh(engine, props);
 };
-var version = "1.6.0-beta.0";
+var version = "1.6.0-beta.2";
 logger.info('THREEJS plugin version: ' + version);
 
 exports.AbstractPlugin = AbstractPlugin;