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

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.

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

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

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

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

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

Snapshot State

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

1
export class Experience {
2
  private store = injectStore();
3

4
  constructor() {
5
    afterNextRender(() => {
6
      const { gl, camera, size, /* ... */ } = this.store.snapshot;
7
    })
8
  }
9
}

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().

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

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

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