1. @threlte/extras
  2. 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.



Github View Source Code


NPM View Package


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.

	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)

	*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 }} />


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

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