ngt-primitive

There are occasions where you have a pre-existing THREE.js object that you want to include in our Angular Three scene graph, you can use the ngt-primitive element to do this.

Usage

@Component({
    template: `
        <ngt-primitive *args="[object()]" />
    `,
    imports: [NgtArgs]
})
export class Model {}

• ngt-primitive requires NgtArgs with the object to render.
• ngt-primitive accepts a [parameters] property that forwards properties to the underlying object.
• Attaching works the same way with ngt-primitive
• Automatic disposal does not happen for ngt-primitive

How it works

ngt-primitive coupled with NgtArgs acts as a flag for Angular Three renderer knows that this is some THREE.js object that the user provides so the renderer does not have to create anything. Then the renderer allows the object to follow the same flow as any other Custom Element on the template.

Most common use-case for ngt-primitive is to render a pre-made 3D model

scene-graph.ts

import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { NgtArgs } from 'angular-three';
import { NgtsCameraControls } from 'angular-three-soba/controls';
import { injectGLTF } from 'angular-three-soba/loaders';
import { NgtsCenter, NgtsEnvironment } from 'angular-three-soba/staging';

import littlestTokyo from './LittlestTokyo-transformed.glb' with { loader: 'file' };

@Component({
    selector: 'app-scene-graph',
    template: `
        <ngts-center>
            <ngt-primitive *args="[gltf.scene()]" [parameters]="{ scale: 0.0075 }" />
        </ngts-center>

        <ngts-environment [options]="{ preset: 'city' }" />

        <ngts-camera-controls />
    `,
    imports: [NgtArgs, NgtsCameraControls, NgtsEnvironment, NgtsCenter],
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SceneGraph {
    protected gltf = injectGLTF(() => littlestTokyo);
}

Credits: THREE.js Animation Keyframes; Model Littlest Tokyo by Glen Fox