Spawning objects

[fonzane]

Hi everyone,

I'm trying to spawn cubes, but somehow I can't see any spawned object. This is my code:

onCubeReady(cube: Mesh) {
    let cloneCube = cube.clone();
    timer(1000).subscribe(() => {
      cloneCube.position.set(2,2,0)
      console.log(cloneCube);
    });
  }

I see the clone in the console. It has the correct position and also a geometry and material of the same type as children. But I can only see the first cube on the canvas. What am I doing wrong? What's the best practice to add this cube to the scene?

So I found out that if I use the (beforeReady) eventListener instead of (ready) on the mesh, I can access the state object which holds the scene and to which I can add the cloned cube. The problem with this approach is that those events get triggered every frame (I think) but I want to trigger functionality only once, once the cube is ready. This works:

onCubeBeforeRender($event: {state: NgtRenderState, object: Mesh}) {
    let cube = $event.object;
    let scene = $event.state.scene;
    let clonedCube = cube.clone();
    clonedCube.position.set(2,2,1);
    scene.add(clonedCube);
  }

But this adds just many cubes to the scene. I could use a workaround and add a boolean variable to indicate whether the callback function has run more than once. This doesn't seem to be the right approach to me or is it?

[nartc]

@fonzane can you access the parent of the cube in onCubeReady and add the cloned to that parent?

[nartc]

Otherwise, you can inject store: NgtStore and access the root Scene on that.

export class CubeComponent {
   constructor(private store: NgtStore) {}
   
   onCubeReady(cube: THREE.Mesh) {
      const scene = this.store.get(s => s.scene);
      /* your code */
   }
}

[fonzane]

Thank you. I will take a look at NgtStore and go for that approach. I really enjoy writing code using angular-three. Thanks for building and maintaining it!