Basics

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 } from '@threlte/core'
  import { useTexture } from '@threlte/extras'

  const map = useTexture('/some/texture')
</script>

<!--
	The geometry, material and the associated texture will
	be disposed as soon as the <Mesh> component unmounts.
-->
<T.Mesh>
  <T.BoxGeometry />
  <T.MeshStandardMaterial map={$map} />
</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, 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 -->
<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>

Previous PageYour First Scene

Next PageContext