3D Model not showing up but why

Questions
,
1

Hi everyone,

I’m trying to display a .glb 3D model of Mars on my React website using @react-three/fiber and @react-three/drei. I created a separate component to load the model with useGLTF and display it inside a <Canvas>. I’m using the <primitive> component to render the loaded scene.

However, the Mars model is not showing up in the browser. I’m not getting any errors, except sometimes I see a warning about <primitive> being an unrecognized tag if used outside <Canvas>. I ensured the model file path is correct and added basic lighting (ambient + directional).

Here is my simplified code for the model component: import React, { Suspense } from ‘react’;
import { Canvas } from ‘@react-three/fiber’;
import { OrbitControls, useGLTF } from ‘@react-three/drei’;

function MarsModel() {
const { scene } = useGLTF(‘/assets/MarsModel.glb’);
return ;
}

export default function MarsViewer() {
return (
<Canvas camera={{ position: [3, 2, 3], fov: 50 }}>

<directionalLight position={[5, 5, 5]} intensity={1} />





);
}

2

You need something like this

function MarsModel() {
const { scene } = useGLTF(‘/assets/MarsModel.glb’);
return <primitive object = {scene}/> ;
}

export default function MarsViewer() {
return (
<Canvas camera={{ position: [3, 2, 3], fov: 50 }}>
   <MarsModel />
<directionalLight position={[5, 5, 5]} intensity={1} />
</Canvas>)

And check for right model path,if you use Next js you can just put .glb into public folder and then ‘/MarsModel.glb’