Disposal
Freeing resources is a
manual chore in three.js, but Svelte is aware of component lifecycles, hence Threlte will attempt to free resources for you by calling dispose
, if present, on all unmounted objects and recursively on all properties that are not being used anywhere else in your scene.
Automatic Disposal
<script>
import { Mesh, useTexture } from '@threlte/core'
import { BoxBufferGeometry, MeshStandardMaterial } from 'three'
const map = useTexture('/some/texture')
const material = new MeshStandardMaterial({ map })
</script>
<!--
The geometry, material and the associated texture will
be disposed as soon as the <Mesh> component unmounts.
-->
<Mesh
geometry={new BoxBufferGeometry(1, 1, 1)}
{material}
/>
Be aware that calling dispose
on a three.js buffer, material or geometry is merely deallocating it from the GPU memory. If an object is used after it's disposed it will be allocated again, resulting in a performance drop for a single frame. It will not produce a runtime error.
Manual Disposal
You can switch off automatic disposal by placing dispose={false}
onto components, it is now valid for the entire tree.
<script>
import { Mesh, useTexture } from '@threlte/core'
import { BoxBufferGeometry, MeshStandardMaterial } from 'three'
const map = useTexture('/some/texture')
const material = new MeshStandardMaterial({ map })
</script>
<!-- will not be disposed -->
<Mesh
dispose={false}
geometry={new BoxBufferGeometry(1, 1, 1)}
{material}
>
<!-- will also not be disposed -->
<Mesh
geometry={new BoxBufferGeometry(2, 2, 2)}
{material}
>
<!-- will be disposed -->
<Mesh
dispose
geometry={new BoxBufferGeometry(2, 2, 2)}
material={new MeshStandardMaterial()}
/>
</Mesh>
</Mesh>
Disposables
Sometimes it's useful to manage the disposal of objects yourself.
The component
<Disposables>
switches off automatic disposal for all child components and disposes the objects provided to the property disposables
on unmounting.
<script>
import { Mesh, useTexture } from '@threlte/core'
import { Disposables } from '@threlte/extras'
import { BoxBufferGeometry, MeshStandardMaterial } from 'three'
export let showA
const map = useTexture('/some/texture')
const material = new MeshStandardMaterial({ map })
const geometry = new BoxBufferGeometry(1, 1, 1)
</script>
<!-- No automatic disposal for all child components -->
<Disposables disposables={[map, geometry, material]}>
{#if showA}
<Mesh {geometry} {material} position={{ x: 2 }}>
<Mesh {geometry} {material} position={{ y: 2 }}>
<Mesh {geometry} {material} position={{ x: 2 }} />
<!-- Will be disposed automatically -->
<Mesh
dispose
geometry={new BoxBufferGeometry(2, 2, 2)}
material={new MeshStandardMaterial()}
position={{ x: 2 }}
/>
</Mesh>
</Mesh>
{:else}
<Mesh {geometry} {material} position={{ x: 3 }}>
{/if}
<Disposables/>