NgtsDetailed

Preview
canvas.ts

1
import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
2
import { SobaWrapper } from '@soba/wrapper.ts';
3
import { NgtArgs } from 'angular-three';
4
import { NgtsOrbitControls } from 'angular-three-soba/controls';
5
import { NgtsDetailed } from 'angular-three-soba/performances';
6
import { NgtCanvas, provideNgtRenderer } from 'angular-three/dom';
7

8
@Component({
9
    selector: 'app-detailed-soba',
10
    template: `
11
        <ngt-canvas [camera]="{ position: [0, 0, 100] }">
12
            <app-soba-wrapper *canvasContent [controls]="null" [grid]="false">
13
                <ngts-detailed [distances]="[0, 50, 150]">
14
                    <ngt-mesh>
15
                        <ngt-icosahedron-geometry *args="[10, 3]" />
16
                        <ngt-mesh-basic-material color="hotpink" wireframe />
17
                    </ngt-mesh>
18

19
                    <ngt-mesh>
20
                        <ngt-icosahedron-geometry *args="[10, 2]" />
21
                        <ngt-mesh-basic-material color="lightgreen" wireframe />
22
                    </ngt-mesh>
23

24
                    <ngt-mesh>
25
                        <ngt-icosahedron-geometry *args="[10, 1]" />
26
                        <ngt-mesh-basic-material color="lightblue" wireframe />
27
                    </ngt-mesh>
28
                </ngts-detailed>
29

30
                <ngts-orbit-controls [options]="{ enablePan: false, enableRotate: false, zoomSpeed: 0.5 }" />
31
            </app-soba-wrapper>
32
        </ngt-canvas>
33
    `,
34
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
35
    changeDetection: ChangeDetectionStrategy.OnPush,
36
    imports: [NgtCanvas, NgtsDetailed, NgtArgs, NgtsOrbitControls, SobaWrapper],
37
})
38
export default class Detailed {
39
    static clientProviders = [provideNgtRenderer()];
40
}

An abstraction around THREE.LOD. A common technique to improve performance is to swap out high-detail models or meshes for low-detail ones at large distances.

Usage

1
import { NgtsDetailed } from 'angular-three-soba/performances';

1
<ngts-detailed [distances]="[0, 50, 150]">
2
    <ngt-mesh>
3
        <ngt-icosahedron-geometry *args="[10, 3]" />
4
        <ngt-mesh-basic-material color="hotpink" wireframe />
5
    </ngt-mesh>
6

7
    <ngt-mesh>
8
        <ngt-icosahedron-geometry *args="[10, 2]" />
9
        <ngt-mesh-basic-material color="lightgreen" wireframe />
10
    </ngt-mesh>
11

12
    <ngt-mesh>
13
        <ngt-icosahedron-geometry *args="[10, 1]" />
14
        <ngt-mesh-basic-material color="lightblue" wireframe />
15
    </ngt-mesh>
16
</ngts-detailed>

distances length should be equal to the number of children.

Inputs

name	type	description	required
distances	number[]	distances for LOD	yes

Options

options input accepts any properties from THREE.LOD in addition to the following:

Properties

name	type	description
hysteresis	number	hysteresis for LOD, default to 0