@galacean/effects-threejs 0.0.1-alpha.1 → 0.0.1-alpha.3

package/README.md

@@ -1,21 +1,21 @@
-# Galacean Effects 的 THREE.JS 插件
+# Galacean Effects THREE.JS Plugin
 
-使用此插件，可以在 THREE.JS 环境下加载并渲染 Galacean Effects 动效。
+With this plugin, you can load and render Galacean Effects animations within the THREE.JS environment.
 
-## 版本说明
+## Version Information
 
 - Three.js ![](https://img.shields.io/badge/npm-0.149.0-green.svg?style=flat-square)
 
-## 使用步骤
+## Usage
 
-### 1、THREE.JS 场景初始化
+### 1、THREE.JS Scene Initialization
 
-在 THREE.JS 中实现 Galacean Effects 首先要创建一个 THREE.JS 场景：
+o implement Galacean Effects in THREE.JS, you need to first create a THREE.JS scene:
 
 ``` ts
 import * as THREE from 'three';
 
-// 创建一个 renderer
+// Create a renderer
 const renderer = new THREE.WebGLRenderer({
   alpha: true,
   stencil: true,
@@ -23,11 +23,11 @@ const renderer = new THREE.WebGLRenderer({
   depth: true,
   premultipliedAlpha: true,
 });
-// 创建一个场景
+// Create a scene
 const scene = new THREE.Scene();
 const container = document.getElementById('J-container');
 const { width, height } = container.getBoundingClientRect();
-// 创建一个相机
+// Create a camera
 const camera = new THREE.PerspectiveCamera(80, width / height, 0.1, 1000);
 
 camera.position.set(0, 0, 8);
@@ -39,26 +39,26 @@ renderer.setSize(width, height);
 container.appendChild(renderer.domElement);
 ```
 
-### 2、ThreeDisplayObject 实例化和资源加载
+### 2、ThreeDisplayObject Instantiation and Resource Loading
 
 ``` ts
 import { ThreeDisplayObject } from '@galacean/effects-threejs';
 
 const displayObject = new ThreeDisplayObject(renderer.getContext(), { width, height });
-// 加载 Galacean Effects 产物
+// Load Galacean Effects output
 await displayObject.loadScene('./xxx.json');
-// 将绘制对象添加到 THREE 的 scene 中
+// Add the rendering object to the THREE scene
 scene.add(displayObject);
 ```
 
-### 3、执行 THREE.JS 渲染
+### 3、Perform THREE.JS Renderingts
 
 ``` ts
 const { currentComposition } = displayObject;
 let lastTime = performance.now();
 
 function render () {
-  // 判断当前合成是否被销毁
+  // Check if the current composition has been destroyed
   if (!currentComposition.isDestroyed) {
     displayObject.update(performance.now() - lastTime);
   }
@@ -72,6 +72,4 @@ function render () {
 render();
 ```
 
-## API 文档
-
-TODO
+## [API Documentation](https://galacean.antgroup.com/effects/#/api/modules_galacean_effects_threejs)

package/dist/index.js

@@ -3,7 +3,7 @@
  * Description: Galacean Effects runtime threejs plugin for the web
  * Author: Ant Group CO., Ltd.
  * Contributors: 燃然,飂兮,十弦,云垣,茂安,意绮
- * Version: v0.0.1-alpha.1
+ * Version: v0.0.1-alpha.3
  */
 
 'use strict';
@@ -6145,8 +6145,8 @@ var PLAYER_OPTIONS_ENV_EDITOR = 'editor';
 var FILTER_NAME_NONE = 'none';
 var DEG2RAD = 0.017453292519943295;
 var HELP_LINK = {
-    'Filter not imported': 'https://yuque.antfin.com/huoxing/knaszl/qtnsf2g9ofigggor#n4Y1K',
-    'Item duration can\'t be less than 0': 'https://yuque.antfin.com/huoxing/knaszl/wozlz0#vFPqF',
+    'Filter not imported': 'https://galacean.antgroup.com/effects/#/user/gasrv4ka5sacrwpg',
+    'Item duration can\'t be less than 0': 'https://galacean.antgroup.com/effects/#/user/gasrv4ka5sacrwpg',
 };
 
 /**
@@ -6689,7 +6689,7 @@ function asserts(condition, msg) {
  * Name: @galacean/effects-specification
  * Description: Galacean Effects JSON Specification
  * Author: Ant Group CO., Ltd.
- * Version: v0.0.2
+ * Version: v1.0.0
  */
 
 /*********************************************/
@@ -9774,6 +9774,7 @@ var VFXItem = /** @class */ (function () {
         this.endBehavior = endBehavior;
         this.lifetime = -(this.delayInms / this.durInms);
         this.listIndex = listIndex;
+        this.speed = 1;
         this.onConstructed(props);
         if (duration <= 0) {
             throw Error("Item duration can't be less than 0, see ".concat(HELP_LINK['Item duration can\'t be less than 0']));
@@ -9852,6 +9853,20 @@ var VFXItem = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
+    /**
+     * 设置元素的动画速度
+     * @param speed - 速度
+     */
+    VFXItem.prototype.setSpeed = function (speed) {
+        this.speed = speed;
+    };
+    /**
+     * 获取元素的动画速度
+     * @returns
+     */
+    VFXItem.prototype.getSpeed = function () {
+        return this.speed;
+    };
     /**
      * 重置元素状态属性
      */
@@ -9907,11 +9922,12 @@ var VFXItem = /** @class */ (function () {
     };
     /**
      * 内部使用的更新回调，请不要重写此方法，重写 `onItemUpdate` 方法
-     * @param dt
+     * @param deltaTime
      */
-    VFXItem.prototype.onUpdate = function (dt) {
+    VFXItem.prototype.onUpdate = function (deltaTime) {
         var _a, _b;
         if (this.started && !this.frozen && this.composition) {
+            var dt = deltaTime * this.speed;
             var time = (this.timeInms += dt);
             this.time += dt / 1000;
             var now = time - this.delayInms;
@@ -9923,7 +9939,6 @@ var VFXItem = /** @class */ (function () {
                 this.composition.itemLifetimeEvent(this, true);
             }
             if (!this.delaying) {
-                var endBehavior = this.endBehavior;
                 var lifetime = now / this.durInms;
                 var ended = this.isEnded(now);
                 var shouldUpdate = true;
@@ -9935,36 +9950,37 @@ var VFXItem = /** @class */ (function () {
                         this.composition.itemLifetimeEvent(this, false);
                         this.onEnd();
                     }
-                    if (endBehavior !== END_BEHAVIOR_FORWARD$1 && endBehavior !== END_BEHAVIOR_RESTART$1) {
+                    // 注意：不要定义私有变量替换 this.endBehavior，直接使用 this 上的！！！（Chrome 下会出现 endBehavior 为 5 时，能进入以下判断）
+                    if (this.endBehavior !== END_BEHAVIOR_FORWARD$1 && this.endBehavior !== END_BEHAVIOR_RESTART$1) {
                         this.ended = true;
                         this.transform.setValid(false);
-                        if (endBehavior === END_BEHAVIOR_PAUSE$1 ||
-                            endBehavior === END_BEHAVIOR_PAUSE_AND_DESTROY$1) {
+                        if (this.endBehavior === END_BEHAVIOR_PAUSE$1 ||
+                            this.endBehavior === END_BEHAVIOR_PAUSE_AND_DESTROY$1) {
                             (_b = (_a = this.composition).handlePlayerPause) === null || _b === void 0 ? void 0 : _b.call(_a, this);
                         }
-                        else if (endBehavior === END_BEHAVIOR_FREEZE$1) {
+                        else if (this.endBehavior === END_BEHAVIOR_FREEZE$1) {
                             this.transform.setValid(true);
                             shouldUpdate = true;
                             lifetime = 1;
                         }
                         if (!this.reusable) {
-                            if (endBehavior === END_BEHAVIOR_DESTROY$1 ||
-                                endBehavior === END_BEHAVIOR_PAUSE_AND_DESTROY$1 ||
-                                endBehavior === END_BEHAVIOR_DESTROY_CHILDREN$1) {
+                            if (this.endBehavior === END_BEHAVIOR_DESTROY$1 ||
+                                this.endBehavior === END_BEHAVIOR_PAUSE_AND_DESTROY$1 ||
+                                this.endBehavior === END_BEHAVIOR_DESTROY_CHILDREN$1) {
                                 return this.dispose();
                             }
-                            else if (endBehavior === END_BEHAVIOR_PAUSE$1) {
+                            else if (this.endBehavior === END_BEHAVIOR_PAUSE$1) {
                                 this.endBehavior = END_BEHAVIOR_FORWARD$1;
                             }
                         }
-                        else if (endBehavior === END_BEHAVIOR_DESTROY$1) {
+                        else if (this.endBehavior === END_BEHAVIOR_DESTROY$1) {
                             this.setVisible(false);
                         }
                         lifetime = Math.min(lifetime, 1);
                     }
                     else {
                         shouldUpdate = true;
-                        if (endBehavior === END_BEHAVIOR_RESTART$1) {
+                        if (this.endBehavior === END_BEHAVIOR_RESTART$1) {
                             this.ended = true;
                             lifetime = lifetime % 1;
                         }
@@ -10013,8 +10029,20 @@ var VFXItem = /** @class */ (function () {
     VFXItem.prototype.onEnd = function () {
         // OVERRIDE
     };
+    /**
+     * 通过指定 r、g、b、a 值设置元素的颜色
+     * @param {number} r
+     * @param {number} g
+     * @param {number} b
+     * @param {number} a
+     * @internal
+     */
     VFXItem.prototype.setColor = function (r, g, b, a) {
     };
+    /**
+     * 设置元素的透明度
+     * @param opacity - 透明度值，范围 [0,1]
+     */
     VFXItem.prototype.setOpacity = function (opacity) {
     };
     /**
@@ -10090,9 +10118,16 @@ var VFXItem = /** @class */ (function () {
         this.transform.scaleBy(x, y, z);
     };
     /**
-     * 元素的在画布上的像素位置
+     * 设置元素的在画布上的像素位置
      */
     VFXItem.prototype.setPositionByPixel = function (x, y) {
+        if (this.composition) {
+            var z = this.transform.getWorldPosition()[2];
+            var _a = __read$1(this.composition.camera.getInverseVPRatio(z), 2), rx = _a[0], ry = _a[1];
+            var width = this.composition.renderer.getWidth() / 2;
+            var height = this.composition.renderer.getHeight() / 2;
+            this.transform.setPosition(2 * x * rx / width, -2 * y * ry / height, z);
+        }
     };
     /**
      * 设置元素在 3D 坐标轴的位置
@@ -10168,9 +10203,11 @@ var VFXItem = /** @class */ (function () {
     };
     VFXItem.prototype.translateByPixel = function (x, y) {
         if (this.composition) {
-            var camera = this.composition.camera;
-            camera.getViewProjectionMatrix();
-            camera.getInverseViewProjectionMatrix();
+            var z = this.transform.getWorldPosition()[2];
+            var _a = __read$1(this.composition.camera.getInverseVPRatio(z), 2), rx = _a[0], ry = _a[1];
+            var width = this.composition.renderer.getWidth() / 2;
+            var height = this.composition.renderer.getHeight() / 2;
+            this.transform.translate(2 * x * rx / width, -2 * y * ry / height, 0);
         }
     };
     /**
@@ -11233,7 +11270,7 @@ function generateHalfFloatTexture(engine, data, width, height) {
 }
 
 var RUNTIME_ENV = 'runtime_env';
-var LOG_TYPE = 'mars';
+var LOG_TYPE = 'galacean-effects';
 var RENDER_PREFER_LOOKUP_TEXTURE = 'lookup_texture';
 // 数据模板使用 offscreen canvas 绘制
 var TEMPLATE_USE_OFFSCREEN_CANVAS = 'offscreen_canvas';
@@ -14335,14 +14372,10 @@ var SpriteMesh = /** @class */ (function () {
         var uSize = [1, 1, 1, 0];
         var uQuat = [0, 0, 1, 1];
         var uColor = selfData.color || [mainDataArray[uColorStart], mainDataArray[uColorStart + 1], mainDataArray[uColorStart + 2], mainDataArray[uColorStart + 3]];
-        // if (selfData.startSize) {
-        //   selfData.transform.scaleBy(1 / selfData.startSize[0], 1 / selfData.startSize[1], 1);
-        // }
+        if (!isNaN(item.getCustomOpacity())) {
+            uColor[3] = item.getCustomOpacity();
+        }
         selfData.transform.assignWorldTRS(uPos, uQuat, uSize);
-        // TODO 兼容改变锚点，位置不移动
-        // if (selfData.startSize) {
-        //   selfData.transform.scaleBy(selfData.startSize[0], selfData.startSize[1], 1);
-        // }
         /* 要过包含父节点颜色/透明度变化的动画的帧对比 打开这段兼容代码 */
         // vecMulCombine(uColor, selfData.color, parentData.color);
         /***********************/
@@ -15249,7 +15282,7 @@ var SpriteGroup = /** @class */ (function () {
         for (var i = startIndex; i <= endIndex; i++) {
             var item = items[i];
             // 不可见的元素跳过 不参与合并
-            if (!init && (!item.contentVisible || item.lifetime < 0)) {
+            if (!init && (!item.started || item.lifetime < 0)) {
                 continue;
             }
             if (!isSprite(item)) {
@@ -15523,6 +15556,9 @@ var CalculateItem = /** @class */ (function () {
         get: function () {
             return this.basicTransform.scale;
         },
+        set: function (scale) {
+            this.basicTransform.scale = scale;
+        },
         enumerable: false,
         configurable: true
     });
@@ -15721,11 +15757,20 @@ var SpriteItem = /** @class */ (function (_super) {
         }
         return ret;
     };
+    /**
+     * @internal
+     */
     SpriteItem.prototype.setColor = function (r, g, b, a) {
-        this.options.startColor = [r, g, b, a];
+        this.customColor = [r, g, b, a];
     };
     SpriteItem.prototype.setOpacity = function (opacity) {
-        this.options.startColor[3] = opacity;
+        this.customOpacity = opacity;
+    };
+    /**
+     * @internal
+     */
+    SpriteItem.prototype.getCustomOpacity = function () {
+        return this.customOpacity;
     };
     SpriteItem.prototype.getRenderData = function (_time, init) {
         var ret = _super.prototype.getRenderData.call(this, _time, init);
@@ -15734,18 +15779,23 @@ var SpriteItem = /** @class */ (function (_super) {
         var time = _time < 0 ? _time : Math.max(_time, 0.);
         var duration = this.options.duration;
         var life = time / duration < 0 ? 0 : (time / duration > 1 ? 1 : time / duration);
-        var opacityOverLifetime = this.opacityOverLifetime;
-        var colorOverLifetime = this.colorOverLifetime;
-        if (colorOverLifetime) {
-            colorInc = getColorFromGradientStops(colorOverLifetime, life, true);
-            colorChanged = true;
+        if (this.customColor) {
+            ret.color = this.customColor;
         }
-        if (opacityOverLifetime) {
-            colorInc[3] *= opacityOverLifetime.getValue(life);
-            colorChanged = true;
-        }
-        if (colorChanged || init) {
-            ret.color = vecMulCombine(this.startColor, colorInc, this.options.startColor);
+        else {
+            var opacityOverLifetime = this.opacityOverLifetime;
+            var colorOverLifetime = this.colorOverLifetime;
+            if (colorOverLifetime) {
+                colorInc = getColorFromGradientStops(colorOverLifetime, life, true);
+                colorChanged = true;
+            }
+            if (opacityOverLifetime) {
+                colorInc[3] *= opacityOverLifetime.getValue(life);
+                colorChanged = true;
+            }
+            if (colorChanged || init) {
+                ret.color = vecMulCombine(this.startColor, colorInc, this.options.startColor);
+            }
         }
         var ta = this.textureSheetAnimation;
         if (ta) {
@@ -15850,6 +15900,9 @@ var SpriteVFXItem = /** @class */ (function (_super) {
         this.transform.assignWorldTRS(pos);
         return pos;
     };
+    /**
+     * @internal
+     */
     SpriteVFXItem.prototype.setColor = function (r, g, b, a) {
         this.content.setColor(r, g, b, a);
     };
@@ -18540,19 +18593,29 @@ var ParticleSystem = /** @class */ (function () {
     };
     ParticleSystem.prototype.setOpacity = function (opacity) {
         var material = this.particleMesh.mesh.material;
-        material.setVector4('uOpacityOverLifetimeValue', [1, 1, 1, opacity]);
+        var geometry = this.particleMesh.mesh.geometry;
+        var originalColor = material.getVector4('uOpacityOverLifetimeValue') || [1, 1, 1, 1];
+        material.setVector4('uOpacityOverLifetimeValue', [originalColor[0], originalColor[1], originalColor[2], opacity]);
+        var data = geometry.getAttributeData('aColor') || [];
+        for (var i = 0; i < data.length; i += 32) {
+            data[i * 8 + 7] = opacity;
+        }
     };
+    /**
+     * @internal
+     */
     ParticleSystem.prototype.setColor = function (r, g, b, a) {
         var material = this.particleMesh.mesh.material;
         var geometry = this.particleMesh.mesh.geometry;
-        var data = geometry.getAttributeData('aRot') || [];
-        for (var i = 0; i < data.length; i += 4) {
-            data[0] = r;
-            data[1] = g;
-            data[2] = b;
-            data[3] = a;
+        var originalColor = material.getVector4('uOpacityOverLifetimeValue') || [1, 1, 1, 1];
+        material.setVector4('uOpacityOverLifetimeValue', [originalColor[0], originalColor[1], originalColor[2], a]);
+        var data = geometry.getAttributeData('aColor') || [];
+        for (var i = 0; i < data.length; i += 32) {
+            data[i * 8 + 4] = r;
+            data[i * 8 + 5] = g;
+            data[i * 8 + 6] = b;
+            data[i * 8 + 7] = a;
         }
-        material.setVector4('uOpacityOverLifetimeValue', [r, g, b, a]);
     };
     ParticleSystem.prototype.setParentTransform = function (transform) {
         this.parentTransform = transform;
@@ -19104,6 +19167,9 @@ var ParticleVFXItem = /** @class */ (function (_super) {
             content.meshes.forEach(function (mesh) { return mesh.dispose({ material: { textures: exports.DestroyOptions.keep } }); });
         }
     };
+    /**
+     * @internal
+     */
     ParticleVFXItem.prototype.setColor = function (r, g, b, a) {
         this.content.setColor(r, g, b, a);
     };
@@ -19418,6 +19484,13 @@ var CalculateVFXItem = /** @class */ (function (_super) {
             /********************/
         }
     };
+    CalculateVFXItem.prototype.setScale = function (x, y, z) {
+        this.content.startSize = [x, y, z];
+    };
+    CalculateVFXItem.prototype.scale = function (x, y, z) {
+        var startSize = this.content.startSize.slice();
+        this.content.startSize = [x * startSize[0], y * startSize[1], z * startSize[2]];
+    };
     CalculateVFXItem.prototype.getHitTestParams = function (force) {
     };
     CalculateVFXItem.prototype.getRenderData = function () {
@@ -22180,12 +22253,13 @@ var Camera = /** @class */ (function () {
     };
     /**
      * 获取归一化坐标和 3D 世界坐标的换算比例
+     * @param z - 当前的位置 z
      */
-    Camera.prototype.getInverseVPRatio = function () {
+    Camera.prototype.getInverseVPRatio = function (z) {
         var pos = [0, 0, 0];
-        var nz = vec3MulMat4(pos, [0, 0, 0], this.getViewProjectionMatrix())[2];
+        var nz = vec3MulMat4(pos, [0, 0, z], this.getViewProjectionMatrix())[2];
         vec3MulMat4(pos, [1, 1, nz], this.getInverseViewProjectionMatrix());
-        return [pos[0], pos[1]];
+        return pos;
     };
     /**
      * 设置相机的旋转四元数
@@ -22377,7 +22451,7 @@ var filters = {
  * Name: @galacean/effects-specification
  * Description: Galacean Effects JSON Specification
  * Author: Ant Group CO., Ltd.
- * Version: v0.0.2
+ * Version: v1.0.0
  */
 
 /*********************************************/
@@ -23094,7 +23168,12 @@ function __read(o, n) {
         finally { if (e) throw e.error; }
     }
     return ar;
-}
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
 
 function arrAdd(arr, item) {
     if (!arr.includes(item)) {
@@ -25152,6 +25231,12 @@ var Composition = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
+    /**
+     * 获取合成的时长
+     */
+    Composition.prototype.getDuration = function () {
+        return this.content.duration;
+    };
     Object.defineProperty(Composition.prototype, "isDestroyed", {
         /**
          * 获取销毁状态
@@ -25189,6 +25274,20 @@ var Composition = /** @class */ (function () {
     Composition.prototype.getIndex = function () {
         return this.renderOrder;
     };
+    /**
+     * 设置合成的动画速度
+     * @param speed - 速度
+     */
+    Composition.prototype.setSpeed = function (speed) {
+        this.speed = speed;
+    };
+    /**
+     * 获取合成的动画速度
+     * @returns
+     */
+    Composition.prototype.getSpeed = function () {
+        return this.speed;
+    };
     Composition.prototype.play = function () {
         if (this.content.ended && this.reusable) {
             this.restart();
@@ -25647,10 +25746,7 @@ var Composition = /** @class */ (function () {
             console.warn('Can not translate position when container not assigned');
             return;
         }
-        var _a = __read$1(this.camera.getInverseVPRatio(), 2), rx = _a[0], ry = _a[1];
-        var width = this.renderer.getWidth();
-        var height = this.renderer.getHeight();
-        this.content.translate(2 * x * rx / width, -2 * y * ry / height, 0);
+        this.content.translateByPixel(x, y);
     };
     /**
      * 设置合成在 3D 坐标轴上相对移动
@@ -27458,9 +27554,9 @@ Geometry.create = function (engine, options) {
 Mesh.create = function (engine, props) {
     return new ThreeMesh(engine, props);
 };
-var version = "0.0.1-alpha.1";
+var version = "0.0.1-alpha.3";
 console.info({
-    content: '[Galacean Effects THREEJS] version: ' + "0.0.1-alpha.1",
+    content: '[Galacean Effects THREEJS] version: ' + "0.0.1-alpha.3",
     type: LOG_TYPE,
 });