1. @threlte/extras
  2. Disposables

@threlte/extras

Disposables

This component switches of the automatic disposal of three.js objects for all child components (direct or indirect). The property disposables accepts three.js objects like meshes, material, textures and geometries that upon unmounting of the component will be deeply disposed.

Import

Source

Github View Source Code

Package

NPM View Package

Example

The meshes can be mounted and unmounted without the map, material and geometry being disposed. If the component <Disposables> is being unmounted, map, material and geometry will be disposed.

<script>
	import { Mesh, useTexture } from '@threlte/core'
	import { Disposables } from '@threlte/extras'
	import { BoxBufferGeometry, MeshStandardMaterial } from 'three'

	const texture = useTexture('/some/texture')
	const material = new MeshStandardMaterial({	map: texture })
	const geometry = new BoxBufferGeometry(1, 1, 1)
</script>

<!--
	*Theoretically* the texture would not need to be part of the property
	"disposables" as it's a property of "material" and therefore gets
	 disposed anyway. Leaving it in for the sake of completeness.
-->
<Disposables disposables={[texture, geometry, material]}>
	<Mesh {geometry} {material} position={{ x: 2 }}>
		<Mesh {geometry} {material} position={{ y: 2 }}>
			<Mesh {geometry} {material} position={{ x: 2 }} />
		</Mesh>
	</Mesh>
<Disposables/>

Properties

disposables accepts an array of three.js objects that have a dispose method.

// required
disposables: ({
		dispose?: () => void),
		type?: string
	} & Record<string, any>)[]