Store

Angular Three NgtCanvas starts with a default NgtSignalStore<NgtState> that is used to keep track of the state of the canvas like the Renderer, Camera, Scene, Controls, events, size, etc…

We can access this store via the injectStore function

Caution

injectStore must be used inside of NgtCanvas component

Reactive State

The store exposes its properties as Signal via the select() function. select() creates a computed Signal under the hood and caches the created Signal.

export class Experience {
  private store = injectStore();
  camera = this.store.select('camera'); // Signal<NgtCamera>
  gl = this.store.select('gl'); // Signal<WebGLRenderer>
}

We can access nested properties of the store by passing more arguments to select()

export class Experience {
  private store = injectStore();
  domElement = this.store.select('gl', 'domElement'); // Signal<HTMLCanvasElement>
  width = this.store.select('size', 'width'); // Signal<number>
  height = this.store.select('size', 'height'); // Signal<number>
}

Note

select() supports up to 4 arguments to access up to 4 levels of the store’s property. Any more than that will probably be better off using computed()

To access the entire store, we can use select() without any arguments or use state property.

export class Experience {
  private store = injectStore();
  state = this.store.state; // Signal<NgtState>;
}

Snapshot State

We can access the latest state of the store via the snapshot property. snapshot always returns the latest state upon accessing.

export class Experience {
  private store = injectStore();

  constructor() {
    afterNextRender(() => {
      const { gl, camera, size, /* ... */ } = this.store.snapshot;
    })
  }
}

This is useful when we want to access the latest state imperatively without reactivity. Most of the time, this is used in the animation loop.

get()

Alternatively, we can access the snapshot properties as values via get().

export class Experience {
  private store = injectStore();
  camera = this.store.get('camera'); // NgtCamera
  gl = this.store.get('gl'); // WebGLRenderer
}

We can access nested properties of the store by passing more arguments to get()

export class Experience {
  private store = injectStore();
  domElement = this.store.get('gl', 'domElement'); // HTMLCanvasElement
  width = this.store.get('size', 'width'); // number
  height = this.store.get('size', 'height'); // number
}