@galacean/effects-threejs 1.2.2 → 1.3.0-alpha.0

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.2.2
+ * Version: v1.3.0-alpha.0
  */
 
 'use strict';
@@ -708,7 +708,7 @@ function asserts(condition, msg) {
  * Name: @galacean/effects-specification
  * Description: Galacean Effects JSON Specification
  * Author: Ant Group CO., Ltd.
- * Version: v1.0.1
+ * Version: v1.1.0-alpha.0
  */
 
 /*********************************************/
@@ -1089,6 +1089,16 @@ var CompositionEndBehavior$1;
     CompositionEndBehavior[CompositionEndBehavior["pause_destroy"] = END_BEHAVIOR_PAUSE_AND_DESTROY$1] = "pause_destroy";
 })(CompositionEndBehavior$1 || (CompositionEndBehavior$1 = {}));
 
+/**
+ * 动态换图类型
+ * @since 1.3.0
+ */
+var BackgroundType$1;
+(function (BackgroundType) {
+    BackgroundType["video"] = "video";
+    BackgroundType["image"] = "image";
+})(BackgroundType$1 || (BackgroundType$1 = {}));
+
 /*********************************************/
 /*               基本数值属性参数              */
 /*********************************************/
@@ -1378,6 +1388,7 @@ var FontStyle$1;
 
 var index$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
+    get BackgroundType () { return BackgroundType$1; },
     get BezierKeyframeType () { return BezierKeyframeType$1; },
     get BlendingMode () { return BlendingMode$1; },
     BloomFilterThresholdAvgColor: BloomFilterThresholdAvgColor,
@@ -10175,10 +10186,8 @@ function loadBlob(url) {
 /**
  * 异步加载一个视频文件
  * @param url - 视频文件的 URL 或 MediaProvider 对象
- * @param options - 加载参数
  */
-function loadVideo(url, options) {
-    if (options === void 0) { options = {}; }
+function loadVideo(url) {
     return __awaiter(this, void 0, void 0, function () {
         var video;
         return __generator(this, function (_a) {
@@ -10191,9 +10200,6 @@ function loadVideo(url, options) {
             }
             video.crossOrigin = 'anonymous';
             video.muted = true;
-            if (options.loop) {
-                video.addEventListener('ended', function () { return video.play(); });
-            }
             if (isAndroid()) {
                 video.setAttribute('renderer', 'standard');
             }
@@ -19677,6 +19683,26 @@ function getBackgroundImage(template, variables) {
     }
     return templateBackground;
 }
+function loadMedia(url, loadFn) {
+    return __awaiter(this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!Array.isArray(url)) return [3 /*break*/, 5];
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, , 5]);
+                    return [4 /*yield*/, loadFn(url[0])];
+                case 2: return [2 /*return*/, _a.sent()];
+                case 3:
+                    _a.sent();
+                    return [4 /*yield*/, loadFn(url[1])];
+                case 4: return [2 /*return*/, _a.sent()];
+                case 5: return [2 /*return*/, loadFn(url)];
+            }
+        });
+    });
+}
 function drawImageAndTemplate(viewer, image, template, variables, opt) {
     var _a;
     return __awaiter(this, void 0, void 0, function () {
@@ -21568,7 +21594,7 @@ var filters = {
  * Name: @galacean/effects-specification
  * Description: Galacean Effects JSON Specification
  * Author: Ant Group CO., Ltd.
- * Version: v1.0.1
+ * Version: v1.1.0-alpha.0
  */
 
 /*********************************************/
@@ -21947,6 +21973,16 @@ var CompositionEndBehavior;
     CompositionEndBehavior[CompositionEndBehavior["pause_destroy"] = END_BEHAVIOR_PAUSE_AND_DESTROY] = "pause_destroy";
 })(CompositionEndBehavior || (CompositionEndBehavior = {}));
 
+/**
+ * 动态换图类型
+ * @since 1.3.0
+ */
+var BackgroundType;
+(function (BackgroundType) {
+    BackgroundType["video"] = "video";
+    BackgroundType["image"] = "image";
+})(BackgroundType || (BackgroundType = {}));
+
 /*********************************************/
 /*               基本数值属性参数              */
 /*********************************************/
@@ -23031,11 +23067,9 @@ function getStandardImage(image, index, imageTags) {
     else if (image.url) {
         return {
             url: image.url,
-            type: image.type,
             webp: image.webp,
             renderLevel: renderLevel,
             oriY: oriY,
-            loop: image.loop,
         };
     }
     else if (image && image.sourceType) {
@@ -23492,6 +23526,26 @@ var AssetManager = /** @class */ (function () {
         var _a = options.timeout, timeout = _a === void 0 ? 10 : _a;
         this.timeout = timeout;
     };
+    /**
+     * 根据用户传入的参数修改场景数据
+     */
+    AssetManager.prototype.updateSceneData = function (compositions) {
+        var variables = this.options.variables;
+        if (!variables || Object.keys(variables).length <= 0) {
+            return compositions;
+        }
+        compositions.forEach(function (composition) {
+            composition.items.forEach(function (item) {
+                if (item.type === ItemType$1.text) {
+                    var textVariable = variables[item.name];
+                    if (textVariable) {
+                        item.content.options.text = textVariable;
+                    }
+                }
+            });
+        });
+        return compositions;
+    };
     /**
      * 场景创建，通过 json 创建出场景对象，并进行提前编译等工作
      * @param url - json 的 URL 链接或者 json 对象
@@ -23583,6 +23637,7 @@ var AssetManager = /** @class */ (function () {
                                 for (i = 0; i < scene.images.length; i++) {
                                     scene.textureOptions[i].image = scene.images[i];
                                 }
+                                scene.jsonScene.compositions = this.updateSceneData(scene.jsonScene.compositions);
                                 _e.label = 5;
                             case 5: return [3 /*break*/, 12];
                             case 6: return [4 /*yield*/, hookTimeInfo('processJSON', function () { return _this.processJSON(rawJSON); })];
@@ -23602,6 +23657,7 @@ var AssetManager = /** @class */ (function () {
                                 return [4 /*yield*/, hookTimeInfo('processTextures', function () { return _this.processTextures(loadedImages_1, loadedBins_1, jsonScene_1); })];
                             case 10:
                                 loadedTextures = _e.sent();
+                                jsonScene_1.compositions = this.updateSceneData(jsonScene_1.compositions);
                                 scene = {
                                     url: url,
                                     renderLevel: this.options.renderLevel,
@@ -23765,79 +23821,61 @@ var AssetManager = /** @class */ (function () {
                 _a = this.options, useCompressedTexture = _a.useCompressedTexture, variables = _a.variables;
                 baseUrl = this.baseUrl;
                 jobs = images.map(function (img, idx) { return __awaiter(_this, void 0, void 0, function () {
-                    var png, webp, imageURL, webpURL, template, result, url_1, name_1, templateImage, loop, compressed, src, bufferURL, _a, url, image;
-                    var _b, _c, _d;
-                    return __generator(this, function (_e) {
-                        switch (_e.label) {
+                    var png, webp, imageURL, webpURL, template, isTemplateV2, background, url_1, isVideo, loadFn, resultImage, resultImage, compressed, src, bufferURL, _a, url, image;
+                    return __generator(this, function (_b) {
+                        switch (_b.label) {
                             case 0:
-                                if (!usage[idx]) return [3 /*break*/, 19];
+                                if (!usage[idx]) {
+                                    return [2 /*return*/, undefined];
+                                }
                                 png = img.url, webp = img.webp;
                                 imageURL = new URL(png, baseUrl).href;
                                 webpURL = webp && new URL(webp, baseUrl).href;
-                                if (!('template' in img)) return [3 /*break*/, 16];
+                                if (!('template' in img)) return [3 /*break*/, 13];
                                 template = img.template;
-                                result = void 0;
-                                if (!('v' in template && template.v === 2 && template.background)) return [3 /*break*/, 9];
+                                isTemplateV2 = 'v' in template && template.v === 2 && template.background;
+                                background = isTemplateV2 ? template.background : undefined;
+                                if (!(isTemplateV2 && background)) return [3 /*break*/, 8];
                                 url_1 = getBackgroundImage(template, variables);
-                                if (!(url_1 instanceof Array)) return [3 /*break*/, 6];
-                                name_1 = template.background.name;
-                                _e.label = 1;
+                                isVideo = background.type === BackgroundType$1.video;
+                                loadFn = background && isVideo ? loadVideo : loadImage;
+                                _b.label = 1;
                             case 1:
-                                _e.trys.push([1, 3, , 5]);
-                                _b = {};
-                                return [4 /*yield*/, loadImage(url_1[0])];
+                                _b.trys.push([1, 6, , 7]);
+                                return [4 /*yield*/, loadMedia(url_1, loadFn)];
                             case 2:
-                                result = (_b.image = _e.sent(),
-                                    _b.url = url_1[0],
-                                    _b);
-                                return [3 /*break*/, 5];
+                                resultImage = _b.sent();
+                                if (!(resultImage instanceof HTMLVideoElement)) return [3 /*break*/, 3];
+                                return [2 /*return*/, resultImage];
                             case 3:
-                                _e.sent();
-                                _c = {};
-                                return [4 /*yield*/, loadImage(url_1[1])];
-                            case 4:
-                                result = (_c.image = _e.sent(),
-                                    _c.url = url_1[1],
-                                    _c);
-                                return [3 /*break*/, 5];
-                            case 5:
-                                if (variables) {
-                                    variables[name_1] = result.url;
+                                // 如果是加载图片且是数组，设置变量，视频情况下不需要
+                                if (background && !Array.isArray(url_1) && variables) {
+                                    variables[background.name] = url_1;
                                 }
-                                return [3 /*break*/, 8];
+                                return [4 /*yield*/, combineImageTemplate(resultImage, template, variables, this.options, img.oriY === -1)];
+                            case 4: return [2 /*return*/, _b.sent()];
+                            case 5: return [3 /*break*/, 7];
                             case 6:
-                                if (!(typeof url_1 === 'string')) return [3 /*break*/, 8];
-                                _d = {};
-                                return [4 /*yield*/, loadImage(url_1)];
-                            case 7:
-                                result = (_d.image = _e.sent(),
-                                    _d.url = url_1,
-                                    _d);
-                                _e.label = 8;
-                            case 8: return [3 /*break*/, 11];
-                            case 9: return [4 /*yield*/, loadWebPOptional(imageURL, webpURL)];
-                            case 10:
-                                // 测试场景：'年兽大爆炸——8个彩蛋t1'
-                                result = _e.sent();
-                                _e.label = 11;
+                                _b.sent();
+                                throw new Error("Failed to load. Check the template or if the URL is ".concat(isVideo ? 'video' : 'image', " type, URL: ").concat(url_1, "."));
+                            case 7: return [3 /*break*/, 12];
+                            case 8:
+                                _b.trys.push([8, 11, , 12]);
+                                return [4 /*yield*/, loadWebPOptional(imageURL, webpURL)];
+                            case 9:
+                                resultImage = _b.sent();
+                                return [4 /*yield*/, combineImageTemplate(resultImage.image, template, variables, this.options, img.oriY === -1)];
+                            case 10: return [2 /*return*/, _b.sent()];
                             case 11:
-                                templateImage = void 0;
-                                _e.label = 12;
-                            case 12:
-                                _e.trys.push([12, 14, , 15]);
-                                return [4 /*yield*/, combineImageTemplate(result.image, template, variables, this.options, img.oriY === -1)];
+                                _b.sent();
+                                throw new Error("Failed to load. Check the template, URL: ".concat(imageURL, "."));
+                            case 12: return [3 /*break*/, 14];
                             case 13:
-                                templateImage = _e.sent();
-                                return [3 /*break*/, 15];
-                            case 14:
-                                _e.sent();
-                                throw new Error("image template fail: ".concat(imageURL));
-                            case 15: return [2 /*return*/, templateImage];
-                            case 16:
                                 if ('type' in img && img.type === 'video') {
-                                    loop = img.loop;
                                     // 视频
-                                    return [2 /*return*/, loadVideo(img.url, { loop: loop })];
+                                    // TODO: 2024.03.28 后面考虑下掉非推荐的视频元素使用方式
+                                    console.warn('The video element is deprecated. Use template BackgroundType.video instead.');
+                                    return [2 /*return*/, loadVideo(img.url)];
                                 }
                                 else if ('compressed' in img && useCompressedTexture && compressedTexture) {
                                     compressed = img.compressed;
@@ -23863,13 +23901,12 @@ var AssetManager = /** @class */ (function () {
                                     img instanceof Texture) {
                                     return [2 /*return*/, img];
                                 }
-                                _e.label = 17;
-                            case 17: return [4 /*yield*/, loadWebPOptional(imageURL, webpURL)];
-                            case 18:
-                                _a = _e.sent(), url = _a.url, image = _a.image;
+                                _b.label = 14;
+                            case 14: return [4 /*yield*/, loadWebPOptional(imageURL, webpURL)];
+                            case 15:
+                                _a = _b.sent(), url = _a.url, image = _a.image;
                                 this.assets[idx] = { url: url, type: exports.TextureSourceType.image };
                                 return [2 /*return*/, image];
-                            case 19: return [2 /*return*/, undefined];
                         }
                     });
                 }); });
@@ -26913,7 +26950,7 @@ Geometry.create = function (engine, options) {
 Mesh.create = function (engine, props) {
     return new ThreeMesh(engine, props);
 };
-var version = "1.2.2";
+var version = "1.3.0-alpha.0";
 logger.info('THREEJS plugin version: ' + version);
 
 exports.AbstractPlugin = AbstractPlugin;
@@ -27119,6 +27156,7 @@ exports.itemVert = itemVert;
 exports.loadBinary = loadBinary;
 exports.loadBlob = loadBlob;
 exports.loadImage = loadImage;
+exports.loadMedia = loadMedia;
 exports.loadVideo = loadVideo;
 exports.loadWebPOptional = loadWebPOptional;
 exports.logger = logger;