Failed to load buffer

Questions
1

I am following this tutorial here:
https://www.youtube.com/watch?v=0fYi8SGA20k&list=PL6QREj8te1P6wX9m5KnicnDVEucbOPsqR&ab_channel=JavaScriptMastery

and I keep facing this error:

Error: Could not load ./desktop_pc/scene.gltf: THREE.GLTFLoader: Failed to load buffer “scene.bin”.)

Here’s the code:

import React, { Suspense, useEffect, useState } from "react";
import { Canvas } from "@react-three/fiber";
import { OrbitControls, Preload, useGLTF } from "@react-three/drei";

import CanvasLoader from "../Loader";

const Computers = ({ isMobile }) => {
  const computer = useGLTF("./desktop_pc/scene.gltf");

  return (
    <mesh>
      <hemisphereLight intensity={0.15} groundColor='black' />
      <spotLight
        position={[-20, 50, 10]}
        angle={0.12}
        penumbra={1}
        intensity={1}
        castShadow
        shadow-mapSize={1024}
      />
      <pointLight intensity={1} />
      <primitive
        object={computer.scene}
        scale={isMobile ? 0.7 : 0.75}
        position={isMobile ? [0, -3, -2.2] : [0, -3.25, -1.5]}
        rotation={[-0.01, -0.2, -0.1]}
      />
    </mesh>
  );
};

const ComputersCanvas = () => {
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    // Add a listener for changes to the screen size
    const mediaQuery = window.matchMedia("(max-width: 500px)");

    // Set the initial value of the `isMobile` state variable
    setIsMobile(mediaQuery.matches);

    // Define a callback function to handle changes to the media query
    const handleMediaQueryChange = (event) => {
      setIsMobile(event.matches);
    };

    // Add the callback function as a listener for changes to the media query
    mediaQuery.addEventListener("change", handleMediaQueryChange);

    // Remove the listener when the component is unmounted
    return () => {
      mediaQuery.removeEventListener("change", handleMediaQueryChange);
    };
  }, []);

  return (
    <Canvas
      frameloop='demand'
      shadows
      dpr={[1, 2]}
      camera={{ position: [20, 3, 5], fov: 25 }}
      gl={{ preserveDrawingBuffer: true }}
    >
      <Suspense 
      // fallback={<CanvasLoader />}
      >
        <OrbitControls
          enableZoom={false}
          maxPolarAngle={Math.PI / 2}
          minPolarAngle={Math.PI / 2}
        />
        <Computers isMobile={isMobile} />
      </Suspense>

      <Preload all />
    </Canvas>
  );
};

export default ComputersCanvas;```
2

gltf is a container format, it refers to external files, like scene.bin. you would normally have to instruct the gltfloader how to load them, but gltf is not commonly used on the web, instead you turn it into a glb, which is smaller and contains everything in one. the quickest way is to open shell and run: npx gltfjsx scene.gltf --transform

copy the resulting file into your projects /public folder. it will also generate a *.jsx file which you can use as-is. this will allow you to easily alter scene contents, whereas primitive object just dumps a blackbox into your scene.

1 Like
3

Thank you! You are right, I actually find the solution, it took me hours to figure this out on my own :"(
I followed these steps and it worked:

All you have to do is convert the file to .glb instead of .gltf, using these steps:

1- Go to Make glb
2- Drag all files and folders inside the model folder and drop it in the website
3- Dowload the .glb file and name it scene.glb and write this line of code instead:
const computer = useGLTF(“./desktop_pc/scene.glb”);

1 Like