@threlte/extras
useProgress
Convenience hook that wraps THREE.DefaultLoadingManager.
Model: Battle Damaged Sci-fi Helmet by theblueturtle_
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
finishedOnce, // Readable<boolean> – whether a progress of 1 has been achieved ever.
} = useProgress()
</script>