I'm working on a React Three Fiber application and using the useProgress hook from @react-three/drei to track the loading progress of my assets. However, I've encountered an issue where the progress value always remains at 0, and as a result, the "Start" button on my loading screen component stays disabled. I've tried various approaches and cannot figure out the root cause of this problem.
Here's an overview of my application's structure:
App Component:
import { Canvas } from '@react-three/fiber'
import { Suspense, useEffect, useState } from 'react'
import Experience from './Experience'
import { LoadingScreen } from './LoadingScreen'
const audio = new Audio('./hit.mp3')
function App() {
const [start, setStart] = useState(false)
useEffect(() => {
if (start) {
audio.play()
}
}, [start])
return (
<>
<Canvas
// ...
>
<Suspense fallback={null}>{start && <Experience />}</Suspense>
</Canvas>
<LoadingScreen started={start} onStarted={() => setStart(true)} />
</>
)
}
export default App
LoadingScreen Component:
import { useProgress } from '@react-three/drei'
import { useEffect } from 'react'
export const LoadingScreen = ({ started, onStarted }) => {
const { progress } = useProgress()
useEffect(() => {
let interval
interval = setInterval(() => {
console.log(`Progress: ${progress}%`)
}, 1000)
return () => {
clearInterval(interval)
}
}, [progress])
return (
<div className={`loadingScreen ${started ? 'loadingScreen--started' : ''}`}>
<div className='loadingScreen__progress'>
<div
className='loadingScreen__progress__value'
style={{
width: `${progress}%`,
}}
/>
</div>
<div className='loadingScreen__board'>
<h1 className='loadingScreen__title'>Title</h1>
<button
className='loadingScreen__button'
disabled={progress < 100}
onClick={onStarted}
>
Start
</button>
</div>
</div>
)
}
I've ensured that the asset paths are correct and that I'm using the useGLTF hook for loading models. However, despite this, the useProgress hook never updates the progress value.
If anyone has encountered a similar issue or has insights into why useProgress might not be working as expected, I would greatly appreciate your help in diagnosing and resolving this problem.
I solved it by removing the start condition from Experience render here {start && <Experience />}</Suspense>
Experience Component should be instantiated in order to load the models in there and update the progress