Visit the Documentation of the upcoming Threlte 6.
  1. @threlte/extras
  2. useProgress



Convenience hook that wraps THREE.DefaultLoadingManager.

Model: Battle Damaged Sci-fi Helmet by theblueturtle_



Github View Source Code


NPM View Package

Related Docs


Basic Example

You can use and place this hook anywhere. Typically you would use this hook outside of your <Canvas> component to show a loading indicator in your DOM.

<script lang="ts">
  // `useProgress` returns readable stores
  const {
		active, // Readable<boolean> – if the DefaultLoadingManager is active
		item, // Readable<string | undefined> – the currently loading item
		loaded, // Readable<number> - amount of items loaded
		total, // Readable<number> - total amount of items to load
		errors, // Readable<string[]> - all error messages
		progress, // Readable<number> - normalized (0-1) loading progress
		finishedOnce, // Readable<boolean> – whether a progress of 1 has been achieved ever.
	} = useProgress()