1. @threlte/extras
  2. useProgress

@threlte/extras

useProgress

Convenience hook that wraps THREE.DefaultLoadingManager.

Loading

Model: Battle Damaged Sci-fi Helmet by theblueturtle_

Import

Source

Github View Source Code

Package

NPM View Package

Related Docs


Examples

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
	} = useProgress()
</script>