injectBeforeRender

injectBeforeRender is a function that allows the consumers to register a callback to be run in the animation loop.

It takes a callback that has access to the state of the canvas and the delta time since the last frame.

injectBeforeRender cleans up the callback when the component is destroyed. Alternatively, injectBeforeRender returns a clean up function that can be called manually.

1
import { Component, ElementRef, viewChild } from '@angular/core';
2
import { injectBeforeRender } from 'angular-three';
3
import { Mesh } from 'three';
4

5
@Component({
6
  template: `
7
    <ngt-mesh #mesh>
8
      <!-- content -->
9
    </ngt-mesh>
10
  `
11
})
12
export class Experience {
13
  meshRef = viewChild.required<ElementRef<Mesh>>('mesh');
14

15
  constructor() {
16
    injectBeforeRender(({ delta }) => {
17
      const mesh = this.meshRef().nativeElement;
18
      mesh.rotation.x += delta;
19
      mesh.rotation.y += delta;
20
    });
21
  }
22
}