React three fiber Loading screen: components not loading

Questions
, , ,
1

Heyy everyone! I have this piece of code here that sets up a 3D scene in react three fiber. My main issue currently is the loading screen component. I want the loading screen to persist until my 3D scene and its elements have loaded.
Here is my code for that:

import React, { useState, useRef, useEffect , Suspense} from "react"
import './index.css'
import {Canvas} from "@react-three/fiber"
import {Shadow, Html, CameraControls,useProgress} from "@react-three/drei"
import Object from "./Object"
// import LoadingScreen from "./LoadingScreen"
import { LoadingScreen } from "./LoadingScreen"


export default function Objects() {
   const cameraControlRef = useRef();
  //  const [isLoading, setIsLoading] = useState(true);

  //  const handleButtonClick = () => {
  //     // Replace the URL with the desired link
  //     window.location.href = "https://drive.google.com/file/d/1LViNS_p6i3R7LzjpsyITiqIBI8Y17R28/view?usp=sharing";
  //   };
  //   useEffect(() => {
  //     // Simulate loading for 2 seconds
  //     setTimeout(() => {
  //       setIsLoading(false);
  //     }, 2000);
  //   }, []);
  
  const [start, setStart] = useState(false);
  return (
    <>
     {/* {isLoading && <LoadingScreen/>} */}
      <Canvas 
        shadows
        camera={{ fov: 75, position: [-3, 5, 10]}}
      >
        <CameraControls ref={cameraControlRef} enableTransition/>
        <Shadow
          scale={2}
          bias={-0.001}
          width={1024}
          height={1024}
        />
        <Suspense fallback={null}>{start &&
          <Object /> &&
            <Html>
            <div className="buttons" style={{  position: 'absolute',
              top: '-250px',
              left: '-725px',
              zIndex: 999, }}>
              <button
                type="button"
                onClick={() => {
                  cameraControlRef.current?.setPosition(-3,5,10,true);
                }}
              >
                View Scene
              </button>
              <button
                type="button"
                onClick={() => {
                  cameraControlRef.current?.setPosition(0,0.5,3.8,true);
                }}
              >
                Explore More
              </button>
            </div>
            </Html>}    
      </Suspense>
      </Canvas>
      {/* <LoadingScreen/> */}
      <LoadingScreen started={start} onStarted={() => setStart(true)} />  
      </>        
  );
}

Now my issue is the program doesn’t load the 3D scene at all. The loading screen is working fine. After some troubleshooting I realised the main error is on the line {start && && <Html…} but without the line 3D scene content becomes visible beforehand (aka while loading is not fully done) and the whole thing looks extremely blocky. I looked up on the internet but couldn’t find answers for this specific problem. I want my loading screen to persist until my 3D scene in Object is loaded and the elements in HTML tag is loaded. Please help me out :")
and thanks in advance!!

2

Is not valid javascript / JSX (and in some magical world in which it’d be valid, it’d be equivalent to {start && undefined && <Html> - which will always be falsy and never render the <Html> part.)

Not 100% sure, but I think instead of:

{start &&
<Object /> &&
<Html>...}

You meant:

{start ?
<Object /> :
<Html>...}

? If alternatively, you want the <Html> part to render when <Object> returns null - it’s better to not chain it like this, and just create separate return statements in separate if conditionals, you’ll likely find it easier to debug.

3

Heyy! Thank you so very much for the solution. I started debugging with the line {start && …} and yes it did turn out to be the main issue. I wasn’t sure before as to why because no errors showed up on the console.
I actually wanna load the element(which contains my 3D scene) and the HTML tag elements together. The loading screen should persist till both have successfully loaded and then when the user presses enter, they should be able to enter into the ‘Experience’. Do you have any suggestions/fixes in my pre-existing code for that? (removing the start line makes my loading screen content load perfectly and then fade away when I press enter. So I think this code works).
Attaching my LoadingScreen.jsx code here for reference:


import { useProgress } from "@react-three/drei"

// export default function LoadingScreen() {
//   return (
//     <div className="loading">
//       <ReactLoading type="spinningBubbles" color="white" height={100} width={100}/>
//     </div>
//   );
// }

export const LoadingScreen = ({started, onStarted})=>{
  const {progress}=useProgress();
  return( 
    <div className={`loadingScreen ${started ? "loadingScreen--started" : ""}`}>
      <div className="loadingScreen_progress">
        <div 
          className="loadingScreen_progress_value"
          style={{
            width: `${progress}%`,
          }}/>
      </div>
      <div className="loadingScreen_board">
        <h2 className="loadingScreen_title">Diya's Mac</h2>
        <button className="loadingScreen_button"
          disabled={progress<100}
          onClick={onStarted}>
            Enter
          </button>
      </div>
    </div>
  );

};
4

it’s just this, suspense is what tells you when something’s done

<Suspense fallback={<Loading />}>
  <Canvas>
    <SomeAsyncComponent />
    ...