Search code examples
reactjsthree.jsreact-three-fiber

GLTF objects doesn`t load into my react three fiber Canvas element

I downloaded a gltf model from sketchfab to put in my website. This one, https://sketchfab.com/3d-models/space-exploration-wlp-series-8-91964c1ce1a34c3985b6257441efa500.

But everytime I try to load it into my project, everything from my screen just disappears. I thought that I set up the Canvas element somewhat wrong, so I tested it by putting some Stars object from three/drei.

import { Canvas } from "@react-three/fiber";
import { Suspense } from "react";

import { Stars } from '@react-three/drei';

function App() {
  return (
    <div className="App">
      <Canvas style={{ height: '100vh', width: '100vw' }}>
        <Suspense>
          <pointLight color="#f6f3ea" position={[10, 5, 10]} intensity={2} />
          <Stars />
        </Suspense>
      </Canvas>
    </div>
  )
}

and sure enough, it works.enter image description here

I converted the gltf object I donwloaded into a jsx component using npx gltfjsx, resulting in the Scene component

import React, { useRef } from 'react'
import { useGLTF } from '@react-three/drei'

export function Scene(props) {
  const { nodes, materials } = useGLTF('/scene.gltf')
  return (
    <group {...props} dispose={null}>
      <group rotation={[-Math.PI / 2, 0, 0]}>
        <group position={[0, 0.02, -6.33]} rotation={[0.24, -0.55, 0.56]} scale={7}>
          <mesh geometry={nodes.planet001_1.geometry} material={materials.scene} />
          <mesh geometry={nodes.planet001_2.geometry} material={materials.scene} />
        </group>
      </group>
    </group>
  )
}

useGLTF.preload('/scene.gltf')

but when I tried to load the component into my Canvas element

  <Canvas style={{ height: '100vh', width: '100vw' }}>
    <Suspense>
      <pointLight color="#f6f3ea" position={[10, 5, 10]} intensity={2} />
      <Stars />
      <Scene />
    </Suspense>
  </Canvas>

my screen just turns up blank, it shows nothing on the screen. I thought that the z position of -6.33 on the group element in the Scene component was pushing it "behind" the screen (if that makes sense), so I changed it to 2 or 5 or 10, but the result was the same. I also thought that the rotation might be a problem, so I took it out to see what would happen, but same result. Why is that when I try to load this gltf into my scene, not only I can't see it but my entire background with the stars also vanished?

Solution

  • Make sure to download all the resources from Sketchfab:

    • textures/scene_baseColor.png
    • textures/scene_emissive.png
    • scene.bin
    • scene.gltf

    Then, use the following setup:

    import { Canvas } from '@react-three/fiber'
import { Suspense } from 'react'
import { Stars } from '@react-three/drei'
import { useLoader } from '@react-three/fiber'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'

export default function App() {
  const gltf = useLoader(GLTFLoader, 'scene.gltf')

  return (
    <div className="App">
      <Canvas style={{ height: '100vh', width: '100vw' }}>
        <Suspense>
          <pointLight color="#f6f3ea" position={[10, 5, 10]} intensity={2} />
          <Stars />
          <primitive scale={[0.25, 0.25, 0.25]} object={gltf.scene} />
        </Suspense>
      </Canvas>
    </div>
  )
}