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>
)
}
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?
2
Answers
Make sure to download all the resources from Sketchfab:
Then, use the following setup:
Working demo
Please check your console
and if indicates an error of the above type
you need to change in your Scene Component
to
because You need to export it as a default function. your problem is a usual problem for starters that use gltfjsx. I think that answer will help you