Basics
Disposing Objects
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
that are not being used anywhere else in your scene.
Automatic Disposal
<script>
import { T } from '@threlte/core'
import { useTexture } from '@threlte/extras'
</script>
<!--
The geometry and the material will be disposed
as soon as the <Mesh> component unmounts.
-->
<T.Mesh>
<T.BoxGeometry />
<T.MeshStandardMaterial />
</T.Mesh>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. This disables disposal for the entire subtree.
<script>
import { T, useTexture } from '@threlte/core'
const map = useTexture('/some/texture')
const material = new MeshStandardMaterial({ map })
</script>
<!-- will not be disposed -->
<T.Mesh dispose={false}>
<!-- will not be disposed -->
<T.BoxGeometry />
<!-- will not be disposed -->
<T.MeshStandardMaterial map={$map} />
<!-- will be disposed -->
<T.Mesh dispose>
<!-- will be disposed -->
<T.BoxGeometry />
<!-- will be disposed -->
<T.MeshStandardMaterial map={$map} />
</T.Mesh>
</T.Mesh>Custom Disposal
You can use the return function of the oncreate prop to dispose of objects manually.
<script>
import { T } from '@threlte/core'
</script>
<T.MeshBasicMaterial
oncreate={(ref) => {
return () => {
// Do your disposal here
}
}}
/>Automatic Disposal Limitations
Be aware that automatic disposal only happens on the objects that are referenced
by a <T> component.
<script>
import { T } from '@threlte/core'
import { useTexture } from '@threlte/extras'
const map = useTexture('/some/texture.png')
</script>
{#if $map}
<T.Mesh>
<T.BoxGeometry />
<T.MeshBasicMaterial map={$map} />
</T.Mesh>
{/if}In this example, the texture will not be disposed when the material unmounts, you will have to dispose of it manually.