@galacean/effects-threejs 2.4.0-beta.1 → 2.4.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: v2.4.0-beta.1
+ * Version: v2.4.0-beta.2
  */
 
 'use strict';
@@ -6147,12 +6147,7 @@ function setMaskMode(material, maskMode, colorMask) {
                 glContext.REPLACE
             ];
             // 关闭/开启蒙版元素的颜色写入
-            material.colorMask = [
-                colorMask,
-                colorMask,
-                colorMask,
-                colorMask
-            ];
+            material.colorMask = colorMask;
             break;
         case exports.MaskMode.OBSCURED:
             material.stencilTest = true;
@@ -7624,13 +7619,6 @@ exports.MaterialRenderType = void 0;
             set: /**
    * 设置 Material 的通过 alpha 值决定临时覆盖值计算的开关
    * @param value - 是否开启 alpha 抖动
-   */ function set(value) {}
-        },
-        {
-            key: "colorMask",
-            set: /**
-   * 设置 Material 颜色缓冲区的写入开关
-   * @param value
    */ function set(value) {}
         },
         {
@@ -7689,10 +7677,15 @@ var MaskProcessor = /*#__PURE__*/ function() {
             } else if (mode === ObscuredMode.OBSCURED || mode === ObscuredMode.REVERSE_OBSCURED) {
                 maskMode = mode === ObscuredMode.OBSCURED ? exports.MaskMode.OBSCURED : exports.MaskMode.REVERSE_OBSCURED;
                 this.maskRef = ref.maskManager.getRefValue();
+                this.maskable = ref;
             }
         }
         return maskMode;
     };
+    _proto.drawStencilMask = function drawStencilMask(renderer) {
+        var _this_maskable;
+        (_this_maskable = this.maskable) == null ? void 0 : _this_maskable.drawStencilMask(renderer);
+    };
     return MaskProcessor;
 }();
 
@@ -12599,17 +12592,16 @@ function getBezier2DValue(out, t, p0, p1, cpx0, cpy0, cpx1, cpy1) {
         if (!this.getVisible()) {
             return;
         }
-        if (renderer.renderingData.currentFrame.globalUniforms) {
-            renderer.setGlobalMatrix("effects_ObjectToWorld", this.transform.getWorldMatrix());
-        }
-        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, material, i);
-        }
+        this.maskManager.drawStencilMask(renderer);
+        this.draw(renderer);
+    };
+    /**
+   * @internal
+   */ _proto.drawStencilMask = function drawStencilMask(renderer) {
+        var previousColorMask = this.material.colorMask;
+        this.material.colorMask = false;
+        this.draw(renderer);
+        this.material.colorMask = previousColorMask;
     };
     _proto.onStart = function onStart() {
         this.item.getHitTestParams = this.getHitTestParams;
@@ -12747,6 +12739,19 @@ function getBezier2DValue(out, t, p0, p1, cpx0, cpy0, cpx1, cpy1) {
         }
         return material;
     };
+    _proto.draw = function draw(renderer) {
+        if (renderer.renderingData.currentFrame.globalUniforms) {
+            renderer.setGlobalMatrix("effects_ObjectToWorld", this.transform.getWorldMatrix());
+        }
+        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, material, i);
+        }
+    };
     _proto.fromData = function fromData(data) {
         RendererComponent.prototype.fromData.call(this, data);
         var _data_renderer;
@@ -15387,6 +15392,7 @@ exports.InteractComponent = /*#__PURE__*/ function(RendererComponent) {
         };
         _this.duringPlay = false;
         /** 是否响应点击和拖拽交互事件 */ _this._interactive = true;
+        _this.lastTime = -1;
         _this.getHitTestParams = function(force) {
             if (!_this.clickable) {
                 return;
@@ -15477,11 +15483,21 @@ exports.InteractComponent = /*#__PURE__*/ function(RendererComponent) {
         var _this_previewContent;
         this.duringPlay = true;
         // trigger messageBegin when item enter
-        if (this.item.time > 0 && this.item.time - dt / 1000 <= 0) {
-            var _this_item_composition;
-            var options = this.item.props.content.options;
-            (_this_item_composition = this.item.composition) == null ? void 0 : _this_item_composition.addInteractiveItem(this.item, options.type);
+        if (this.lastTime <= this.item.time) {
+            if (this.item.time >= 0 && this.lastTime < 0) {
+                var _this_item_composition;
+                var options = this.item.props.content.options;
+                (_this_item_composition = this.item.composition) == null ? void 0 : _this_item_composition.addInteractiveItem(this.item, options.type);
+            }
+        } else {
+            // loop trigger
+            if (this.item.time >= 0) {
+                var _this_item_composition1;
+                var options1 = this.item.props.content.options;
+                (_this_item_composition1 = this.item.composition) == null ? void 0 : _this_item_composition1.addInteractiveItem(this.item, options1.type);
+            }
         }
+        this.lastTime = this.item.time;
         (_this_previewContent = this.previewContent) == null ? void 0 : _this_previewContent.updateMesh();
         if (!this.dragEvent || !this.bouncingArg) {
             return;
@@ -18613,6 +18629,7 @@ function modifyMaxKeyframeShader(shader, maxVertex, maxFrag) {
         this.particleMesh.mesh.material.setVector4("uParams", uParams.set(time, this.item.duration, 0, 0));
     };
     _proto.render = function render(renderer) {
+        this.maskManager.drawStencilMask(renderer);
         for(var _iterator = _create_for_of_iterator_helper_loose(this.meshes), _step; !(_step = _iterator()).done;){
             var mesh = _step.value;
             mesh.render(renderer);
@@ -19562,6 +19579,7 @@ exports.ParticleSystem = /*#__PURE__*/ function(Component) {
         }
         this.renderer = new ParticleSystemRenderer(this.engine, particleMeshProps, trailMeshProps);
         this.renderer.item = this.item;
+        this.renderer.maskManager = this.maskManager;
         this.meshes = this.renderer.meshes;
         var interaction = props.interaction;
         if (interaction) {
@@ -31645,7 +31663,7 @@ registerPlugin("sprite", SpriteLoader, exports.VFXItem);
 registerPlugin("particle", ParticleLoader, exports.VFXItem);
 registerPlugin("cal", CalculateLoader, exports.VFXItem);
 registerPlugin("interact", InteractLoader, exports.VFXItem);
-var version$1 = "2.4.0-beta.1";
+var version$1 = "2.4.0-beta.2";
 logger.info("Core version: " + version$1 + ".");
 
 var _obj;
@@ -32238,6 +32256,17 @@ var _obj3;
                     this.material.side = THREE__namespace.BackSide;
                 }
             }
+        },
+        {
+            key: "colorMask",
+            get: function get() {
+                return this.material.colorWrite;
+            },
+            set: /**
+   * 获取颜色写入开关
+   */ function set(value) {
+                this.material.colorWrite = value;
+            }
         }
     ]);
     return ThreeMaterial;
@@ -33236,7 +33265,7 @@ setMaxSpriteMeshItemCount(8);
  */ Mesh.create = function(engine, props) {
     return new ThreeMesh(engine, props);
 };
-var version = "2.4.0-beta.1";
+var version = "2.4.0-beta.2";
 logger.info("THREEJS plugin version: " + version + ".");
 
 exports.AbstractPlugin = AbstractPlugin;