Visit the Documentation of the upcoming Threlte 6.
  1. @threlte/core
  2. DisposableObject



Depending on the provided property dispose and the parent components dispose strategy, this component will call dispose on the provided object and all properties of object that have a method dispose.



Github View Source Code


NPM View Package

Basic Example

Automatically disposes the geometry.

	import { DisposableObject } from '@threlte/core'
	import { BoxBufferGeometry } from 'three'

	const cube = new BoxBufferGeometry(1, 1, 1)

<DisposableObject object={cube} />

Automatically disposes the material and associated textures.

	import { DisposableObject, useTexture } from '@threlte/core'
	import { MeshStandardMaterial } from 'three'

	const textures = useTexture({
		map: '/map.jpg',
		normalMap: '/normalMap.jpg',
	const material = new MeshStandardMaterial({ ...textures })

<DisposableObject object={material} />

Opt out of disposal, this is valid for the whole following tree.

	import { DisposableObject } from '@threlte/core'
	import { BoxBufferGeometry, MeshStandardMaterial } from 'three'

	const cube = new BoxBufferGeometry(1, 1, 1)
	const material = new MeshStandardMaterial()
	const texture = useTexture('/texture.jpg',)

<!-- the material is not being disposed -->
<DisposableObject dispose={false} object={material}>

		the geometry is also not being disposed: as the
		flag "dispose" is not provided, it's inheriting
		the dispose strategy from the upstream parent.
	<DisposableObject object={cube} />

		The texture will be disposed:
		the flag "dispose" is provided.
	<DisposableObject dispose object={texture} />

</DisposableObject />


// optional
dispose: boolean = true // internally uses "undefined" as default value, de-facto the default value is "true"
object: Object3D | undefined = undefined