fix: errors about visible and transform when setting

packages/effects-core/src/composition.ts

@@ -853,24 +853,46 @@ export class Composition implements Disposable, LostHandler {
   }
 
   /**
-   * 设置合成在 3D 坐标轴上相对移动
+   * 设置合成在 3D 坐标轴上相对当前的位移
    */
   translate (x: number, y: number, z: number) {
     this.content.translate(x, y, z);
   }
+
   /**
-   * 设置合成在 3D 坐标轴上相对旋转（角度）
+   * 设置合成在 3D 坐标轴上相对原点的位移
+   */
+  setPosition (x: number, y: number, z: number) {
+    this.content.setPosition(x, y, z);
+  }
+
+  /**
+   * 设置合成在 3D 坐标轴上相对当前的旋转（角度）
    */
   rotate (x: number, y: number, z: number) {
     this.content.rotate(x, y, z);
   }
+
   /**
-   * 设置合成在 3D 坐标轴上相对缩放
+   * 设置合成在 3D 坐标轴上的相对原点的旋转（角度）
+   */
+  setRotation (x: number, y: number, z: number) {
+    this.content.setRotation(x, y, z);
+  }
+  /**
+   * 设置合成在 3D 坐标轴上相对当前的缩放
    */
   scale (x: number, y: number, z: number) {
     this.content.scale(x, y, z);
   }
 
+  /**
+   * 设置合成在 3D 坐标轴上的缩放
+   */
+  setScale (x: number, y: number, z: number) {
+    this.content.setScale(x, y, z);
+  }
+
   /**
    * 卸载贴图纹理方法，减少内存
    */

packages/effects-core/src/plugins/cal/calculate-item.ts

@@ -94,7 +94,7 @@ export class CalculateItem {
   private _velocity: spec.vec3;
   constructor (
     props: spec.NullContent,
-    vfxItem: VFXItem<VFXItemContent>,
+    protected vfxItem: VFXItem<VFXItemContent>,
   ) {
     this.transform = vfxItem.transform;
     const scale = this.transform.scale;

packages/effects-core/src/plugins/particle/particle-system.ts

@@ -476,7 +476,7 @@ export class ParticleSystem {
     }
     this.meshes = meshes;
     this.reusable = vfxItem.reusable;
-    this.setVisible(vfxItem.getVisible());
+    this.setVisible(vfxItem.contentVisible);
     const interaction = props.interaction;
 
     if (interaction) {

packages/effects-core/src/plugins/particle/particle-vfx-item.ts

@@ -55,9 +55,9 @@ export class ParticleVFXItem extends VFXItem<ParticleSystem> {
         }
       }
       if (hide) {
-        this.content.setVisible(true);
-      } else {
         this.content.setVisible(false);
+      } else {
+        this.content.setVisible(true);
         this.content.onUpdate(dt);
       }
 

packages/effects-core/src/plugins/sprite/sprite-item.ts

@@ -294,7 +294,7 @@ export class SpriteItem extends CalculateItem {
     } else if (init) {
       ret.texOffset = [0, 0, 1, 1];
     }
-    ret.visible = this.visible;
+    ret.visible = this.vfxItem.contentVisible;
     // 图层元素作为父节点时，除了k的大小变换，自身的尺寸也需要传递给子元素，子元素可以通过startSize读取
     ret.startSize = this.startSize;
 

packages/effects-core/src/plugins/sprite/sprite-mesh.ts

@@ -91,7 +91,7 @@ export class SpriteMesh {
     let pointCount = 0;
 
     if (!items.length) {
-      this.mesh.setVisible(true);
+      this.mesh.setVisible(false);
 
       return true;
     }
@@ -157,7 +157,7 @@ export class SpriteMesh {
     geometry.setIndexData(indexData);
     geometry.setAttributeData('aPoint', bundle.aPoint);
     geometry.setDrawCount(indexLen);
-    this.mesh.setVisible(!geometry.getDrawCount());
+    this.mesh.setVisible(!!geometry.getDrawCount());
     this.mesh.priority = items[0].listIndex;
     for (let i = 0; i < textures.length; i++) {
       const texture = textures[i];

packages/effects-core/src/plugins/sprite/sprite-vfx-item.ts

@@ -25,24 +25,16 @@ export class SpriteVFXItem extends VFXItem<SpriteItem> {
   }
 
   override onLifetimeBegin (composition: Composition, content: SpriteItem) {
-    this._contentVisible = true;
     content.active = true;
   }
 
   override onItemRemoved (composition: Composition, content?: SpriteItem) {
-    this._contentVisible = false;
     if (content) {
       delete content.mesh;
       composition.destroyTextures(content.getTextures());
     }
   }
 
-  override handleVisibleChanged (visible: boolean) {
-    if (this.content) {
-      this.content.visible = visible;
-    }
-  }
-
   override onItemUpdate (dt: number, lifetime: number) {
     this.content?.updateTime(this.time);
   }

packages/effects-core/src/plugins/text/text-item.ts

@@ -64,8 +64,6 @@ export class TextItem extends SpriteItem {
 
     // Text
     this.mesh = new TextMesh(this.engine, this.renderInfo, vfxItem.composition) as unknown as SpriteMesh;
-    this.mesh.setItems([this]);
-    this.updateTexture();
   }
 
   /**
@@ -286,7 +284,7 @@ export class TextItem extends SpriteItem {
     const fontSize = style.fontSize * fontScale;
     const lineHeight = layout.lineHeight * fontScale;
 
-    this.char = this.text.split('');
+    this.char = (this.text || '').split('');
 
     this.canvas.width = width ;
     this.canvas.height = height;

packages/effects-core/src/plugins/text/text-loader.ts

@@ -10,7 +10,7 @@ export class TextLoader extends AbstractPlugin {
   override name = 'text';
   addItems: TextVFXItem[] = [];
   removeItems: TextVFXItem[] = [];
-  public readonly meshes: Mesh[] = []; // meshSplits对应的mesh数组 每次diff后更新
+  public readonly meshes: Mesh[] = [];
 
   override onCompositionDestroyed (composition: Composition) {
     if (composition.reusable) {
@@ -26,11 +26,18 @@ export class TextLoader extends AbstractPlugin {
 
   override onCompositionUpdate (composition: Composition, dt: number): void {
     this.addItems.forEach(item => {
+      if (!item.contentVisible) {
+        item.content.mesh?.mesh.setVisible(false);
+
+        return;
+      } else {
+        item.content.mesh?.mesh.setVisible(true);
+      }
       item.content.updateTexture();
       if (!item.content.ended && item.content.mesh) {
         item.content.mesh.updateItem(item.content);
+        item.content.mesh?.applyChange();
       }
-      item.content.mesh?.applyChange();
     });
   }
 

packages/effects-core/src/plugins/text/text-vfx-item.ts

@@ -23,27 +23,22 @@ export class TextVFXItem extends VFXItem<TextItem> {
   }
 
   override onLifetimeBegin (composition: Composition, content: TextItem) {
-    this._contentVisible = true;
     content.active = true;
-
+    this.content?.mesh!.setItems([this.content]);
+    this.content.updateTexture();
   }
 
   override onItemRemoved (composition: Composition, content?: TextItem) {
-    this._contentVisible = false;
-
     if (content) {
       delete content.mesh;
       composition.destroyTextures(content.getTextures());
     }
   }
 
-  override handleVisibleChanged (visible: boolean) {
-    if (this.content) {
-      this.content.visible = visible;
-    }
-  }
-
   override onItemUpdate (dt: number, lifetime: number) {
+    if (!this.content) {
+      return ;
+    }
     this.content?.updateTime(this.time);
   }
 
@@ -112,6 +107,7 @@ export class TextVFXItem extends VFXItem<TextItem> {
   createWireframeMesh (item: TextItem, color: spec.vec4): TextMesh {
     const spMesh = new TextMesh(this.composition.getEngine(), { wireframe: true, ...item.renderInfo }, this.composition);
 
+    spMesh.mesh.setVisible(true);
     spMesh.setItems([item]);
     spMesh.mesh.material.setVector3('uFrameColor', [color[0], color[1], color[2]]);
     spMesh.mesh.priority = 999;

packages/effects-core/src/render/mesh.ts

@@ -54,7 +54,7 @@ export class Mesh implements Disposable {
 
   // 各引擎独立实现 priority，重写 getter/setter
   private _priority: number;
-  private visible = false;
+  private visible = true;
 
   /**
    * 创建一个新的 Mesh 对象。

packages/effects-core/src/vfx-item.ts

@@ -30,7 +30,7 @@ export type VFXItemProps =
   }
   ;
 
-/**
+/*
  * 所有元素的继承的抽象类
  */
 export abstract class VFXItem<T extends VFXItemContent> implements Disposable {
@@ -324,6 +324,7 @@ export abstract class VFXItem<T extends VFXItemContent> implements Disposable {
 
         this.transform.setValid(true);
         this.createContent();
+        this._contentVisible = true;
         this.onLifetimeBegin(this.composition, this.content);
         this.composition.itemLifetimeEvent(this, true);
       }
@@ -366,7 +367,7 @@ export abstract class VFXItem<T extends VFXItemContent> implements Disposable {
                 this.endBehavior = spec.END_BEHAVIOR_FORWARD;
               }
             } else if (this.endBehavior === spec.END_BEHAVIOR_DESTROY) {
-              this.setVisible(false);
+              this._contentVisible = false;
             }
             lifetime = Math.min(lifetime, 1);
           } else {
@@ -618,6 +619,7 @@ export abstract class VFXItem<T extends VFXItemContent> implements Disposable {
     if (this.composition) {
       this.onItemRemoved(this.composition, this._content);
       this._content = undefined;
+      this._contentVisible = false;
     }
     this.started = false;
   }

packages/effects-threejs/src/three-mesh.ts

@@ -70,7 +70,7 @@ export class ThreeMesh extends Mesh implements Sortable {
    * @param val - 可见性开关
    */
   override setVisible (val: boolean): void {
-    this.mesh.visible = !val;
+    this.mesh.visible = val;
   }
 
   /**
@@ -79,7 +79,7 @@ export class ThreeMesh extends Mesh implements Sortable {
    * @returns
    */
   override getVisible (): boolean {
-    return !this.mesh.visible;
+    return this.mesh.visible;
   }
 
   /**

packages/effects-webgl/src/gl-renderer.ts

@@ -144,7 +144,7 @@ export class GLRenderer extends Renderer implements Disposable {
         // console.error(`mesh ${mesh.name} destroyed`, mesh);
         continue;
       }
-      if (mesh.getVisible()) {
+      if (!mesh.getVisible()) {
         continue;
       }
       if (!mesh.material) {

plugin-packages/spine/src/spine-loader.ts

@@ -189,7 +189,7 @@ export class SpineLoader extends AbstractPlugin {
     this.slotGroups.length && this.slotGroups.map(slotGroup => {
       if (slotGroup) {
         slotGroup.meshToAdd.forEach(mesh => {
-          renderFrame.addMeshToDefaultRenderPass(mesh);
+          mesh.getVisible() && renderFrame.addMeshToDefaultRenderPass(mesh);
         });
         slotGroup.resetMeshes();
       }

plugin-packages/spine/src/spine-vfx-item.ts

@@ -141,24 +141,25 @@ export class SpineVFXItem extends VFXItem<SpineContent> {
     }
     this.state.apply(this.skeleton);
     this.resize();
-    this._contentVisible = true;
     this.updateState(0);
   }
 
   override onItemUpdate (dt: number, lifetime: number) {
-    if (lifetime < 0) {
-      // 还未开始 隐藏一下
-      this.setVisible(false);
+    if (!this.content || !this.content.meshGroups.length) {
+      return ;
+    }
+    const visible = this.contentVisible;
 
-      return;
+    this.content.meshGroups.map((mesh: SpineMesh) => {
+      mesh.mesh.setVisible(visible);
+    });
+    if (visible) {
+      this.updateState(dt / 1000);
     }
-    this.setVisible(true);
-    this.updateState(dt / 1000);
   }
 
   override onEnd () {
-    if (this.endBehavior === spec.END_BEHAVIOR_DESTROY) {
-      this.setVisible(false);
+    if (this.endBehavior === spec.END_BEHAVIOR_DESTROY && this.state) {
       this.state.clearListeners();
       this.state.clearTracks();
     }
@@ -382,8 +383,14 @@ export class SpineVFXItem extends VFXItem<SpineContent> {
     this.transform.setScale(this.startSize * scaleFactor, this.startSize * scaleFactor, scale[2]);
   }
 
+  override setScale (x: number, y: number, z: number) {
+    const [sx, sy, sz] = this.transform.scale;
+
+    this.transform.setScale(x * sx, y * sy, z * sz);
+  }
+
   getBounds (): BoundsData | undefined {
-    if (!(this.state && this.skeleton)) {
+    if (!(this.state && this.skeleton && this.contentVisible)) {
       return;
     }
     this.skeleton.updateWorldTransform();

web-packages/demo/src/single.ts

@@ -2,16 +2,14 @@ import { Player } from '@galacean/effects';
 import '@galacean/effects-plugin-spine';
 import '@galacean/effects-plugin-model';
 import inspireList from './assets/inspire-list';
-
 const json = inspireList.mask.url;
 const container = document.getElementById('J-container');
 
 (async () => {
   try {
     const player = createPlayer();
 
-    const comp = await player.loadScene(json);
-    const item = comp.getItemByName('mask');
+    await player.loadScene(json);
 
   } catch (e) {
     console.error('biz', e);
@@ -23,15 +21,14 @@ function createPlayer () {
     container,
     interactive: true,
     // renderFramework: 'webgl',
-    env: 'editor',
+    // env: 'editor',
     notifyTouch: true,
     onPausedByItem: data => {
       console.info('onPausedByItem', data);
     },
     onItemClicked: () => {
 
     },
-    // reportGPUTime: console.debug,
   });
 
   return player;