2

i got the following error, when i tried to render 3d model using react-three-fiber, I'm kinda new of using threejs, any help would be much appreciated

uncaught Error: Could not load ./desktop_pc/scene.gltf: THREE.GLTFLoader: Failed to load buffer "scene.bin

here is my code:

import { 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 = () => {
   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}
          />
    </mesh>
  )
}

export const ComputersCanvas = () => {

  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 />
        </Suspense>

        <Preload all />
     </Canvas>
  )
}
mohdraazy
  • 39
  • 2

1 Answers1

0

You can use this gltf-to-glb, then drags all the files in desktop_pc folder into the box and wait for the convert progress. After the progress finish, you will get an .glb file, put that file inside the desktop_pc folder and replace the path in useGLFT() with '/desktop_pc/scene.glb'

    const computer = useGLTF(
      '/desktop_pc/scene.glb'
    )
Trương Đức Vinh
  • 1
  • 1