Primitive

There are occasions where we have a pre-existing entities that we want to include in our Angular Three Scene Graph, we can use the ngt-primitive element to do this.

1
<ngt-primitive *args="[model()]" [parameters]="{ scale: 1.5 }" />

ngt-primitive always requires *args with the entity to render.
ngt-primitive accepts parameters which are passed to the entity.
Attaching works the same for ngt-primitive
Differ from other Custom Elements, Angular Three Custom Renderer does not destroy the entity for ngt-primitive

A more realistic example would be to use ngt-primitive to render a GLTF model.

1
@Component({
2
  template: `
3
    <ngt-primitive *args="[model()]" [parameters]="{ scale: 0.01 }" />
4
  `,
5
  imports: [NgtArgs]
6
})
7
export class Model {
8
  private gltf = injectGLTF(() => 'path/to/model.glb');
9
  protected model = computed(() => {
10
    const gltf = this.gltf();
11
    if (!gltf) return null;
12
    return gltf.scene;
13
  });
14
}