Skip to main content

Primitive

There are occasions that we need to put already-exist 3D objects on our SceneGraph (eg: an external 3D model). For this, we can use <ngt-primitive> Custom Element tag as a placeholder for our 3D objects

<ngt-primitive *args="[object]" [position]="[1, 1, 1]" />
note
  • <ngt-primitive> always requires *args with one item, the 3D object we want to put on the SceneGraph.
  • We can bind Inputs/Outputs to <ngt-primitive> and those will be forwarded to the underlying 3D object.
  • NGT Custom Renderer does not dispose <ngt-primitive> underlying 3D object on destroy, we have to do it manually.

A more realistic use-case is to load a 3D model into our SceneGraph

@Component({
    template: ` <ngt-primitive *args="[model$ | ngtPush]" [scale]="0.01" /> `,
    imports: [NgtArgs, NgtPush],
})
export class SceneGraph {
    readonly model$ = injectNgtLoader(GLTFLoader, 'assets/model.glb').pipe(map((model) => model.scene));
}