React Three Fiber useProgress Hook Always Returns 0

Question

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.

Answer 1

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