Routed Scene

Angular Three supports routed scene graphs via the familiar RouterOutlet component with one caveat: the RouterOutlet has to be wrapped by another component.

1
<!-- ❌ won't work -->
2
<ngt-canvas>
3
    <router-outlet *canvasContent />
4
</ngt-canvas>
5

6
<!-- ✅ works -->
7
<ngt-canvas>
8
    <app-scene-graph *canvasContent />
9
</ngt-canvas>
10

11
<!-- scene-graph html -->
12
<router-outlet />

`NgtRoutedScene`

For simple cases that you just need to wrap RouterOutlet by itself, Angular Three provides a NgtRoutedScene component that you can use instead.

1
<ngt-canvas>
2
    <ngt-routed-scene *canvasContent />
3
</ngt-canvas>

Routed Scene Layout

Like other route layouts in regular Angular applications, you can create your routed scene layout with default camera controls, default lighting etc…

1
<!-- some default lighting -->
2
<ngt-ambient-light />
3
<ngt-directional-light />
4

5
<!-- group router outlet -->
6
<ngt-group #parent>
7
    <router-outlet />
8
</ngt-group>
9

10
<!-- camera controls -->
11
<ngts-camera-controls />

Once you have the routed scene in place, all you need to do is to configure some routes.

1
import { Component, viewChild, ChangeDetectionStrategy, CUSTOM_ELEMENTS_SCHEMA, ElementRef } from '@angular/core';
2
import { beforeRender } from 'angular-three';
3

4
@Component({
5
    template: `
6
        <ngt-mesh #cube>
7
            <ngt-box-geometry />
8
            <ngt-mesh-basic-material color="red" />
9
        </ngt-mesh>
10
    `,
11
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
12
    changeDetection: ChangeDetectionStrategy.OnPush,
13
})
14
export default class RedScene {
15
    private cubeRef = viewChild.required<ElementRef<THREE.Mesh>>('cube');
16

17
    constructor() {
18
        beforeRender(({ clock }) => {
19
            this.cube().nativeElement.rotation.x = clock.elapsedTime;
20
            this.cube().nativeElement.rotation.y = clock.elapsedTime;
21
        });
22
    }
23
}

1
import { Component, viewChild, ChangeDetectionStrategy, CUSTOM_ELEMENTS_SCHEMA, ElementRef } from '@angular/core';
2
import { beforeRender } from 'angular-three';
3

4
@Component({
5
    template: `
6
        <ngt-mesh #cube>
7
            <ngt-box-geometry />
8
            <ngt-mesh-basic-material color="blue" />
9
        </ngt-mesh>
10
    `,
11
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
12
    changeDetection: ChangeDetectionStrategy.OnPush,
13
})
14
export default class BlueScene {
15
    private cubeRef = viewChild.required<ElementRef<THREE.Mesh>>('cube');
16

17
    constructor() {
18
        beforeRender(({ clock }) => {
19
            this.cube().nativeElement.rotation.x = clock.elapsedTime;
20
            this.cube().nativeElement.rotation.y = clock.elapsedTime;
21
        });
22
    }
23
}

1
import { bootstrapApplication } from '@angular/platform-browser';
2
import { provideRouter } from '@angular/router';
3
import { provideNgtRenderer } from 'angular-three';
4
import { AppComponent } from './app/app.component';
5

6
bootstrapApplication(AppComponent, {
7
    providers: [
8
        provideNgtRenderer(),
9
        provideRouter([
10
            {
11
                path: '',
12
                loadComponent: () => import('./app/red-scene'),
13
            },
14
            {
15
                path: 'blue',
16
                loadComponent: () => import('./app/blue-scene'),
17
            },
18
        ]),
19
    ],
20
}).catch((err) => console.error(err));