Disposing Objects

In THREE.js, freeing up resources is a manual process that requires calling dispose() method on objects that implement it. Angular Three, as a custom renderer, is aware of the life-cycles of the elements rendered on the template. Hence, Angular Three automatically handles disposal of THREE.js resources for you. Additionally, Angular’s own concept like Components and Directives in Angular Three follow standard Angular life-cycle management making resource cleanup more intuitive.

Automatic Disposal

Angular Three will automatically call dispose() on destroyed elements.

1
<ngt-mesh>
2
    <ngt-box-geometry />
3
    <ngt-mesh-standard-material />
4
</ngt-mesh>

When ngt-mesh is destroyed or its host component is destroyed, the underlying BoxGeometry and MeshStandardMaterial (from ngt-box-geometry and ngt-mesh-standard-material respectively) will be disposed properly.

This also applies to elements that are subject to Angular’s Control Flow. When an element is taken out of the template by Angular’s mechanism, Angular Three will also automatically dispose of it and its children.

1
@if (show()) {
2
    <ngt-mesh>
3
        <ngt-box-geometry />
4
        <ngt-mesh-standard-material />
5
    </ngt-mesh>
6
}

Disable Automatic Disposal

You can disable automatic disposal by passing in null to [dispose] input on Angular Three elements.

1
<ngt-mesh [dispose]="null">
2
    <ngt-box-geometry />
3
    <ngt-mesh-standard-material />
4
</ngt-mesh>

Custom Disposal

You can implement custom disposal logic by using DestroyRef or ngOnDestroy

1
@Component({
2
    template: ``
3
})
4
export class MyCmp {
5
    private destroyRef = inject(DestroyRef);
6

7
    constructor() {
8
        this.destroyRef.onDestroy(() => {
9
            // clean up logic
10
        })
11
    }
12
}

Resource Management in Custom Inject Functions (CIFs)

Custom inject functions in Angular Three handle resource cleanup internally. For example, injectTexture manages texture disposal automatically

1
import { injectTexture } from 'angular-three-soba/loaders';
2

3
@Component({
4
    template: `
5
        <ngt-mesh-standard-material [map]="texture()" />
6
    `
7
})
8
export class MyCmp {
9
    protected texture = injectTexture(() => './path/to/texture');
10
}

When MyCmp is destroyed, injectTexture will dispose the texture properly.