# 3D Model not showing up but why

**URL:** <https://discourse.threejs.org/t/3d-model-not-showing-up-but-why/82669>\
**Category:** Questions\
**Tags:** loaders, geometry\
**Created:** [May 16, 2025, 2:49pm UTC](https://discourse.threejs.org/t/3d-model-not-showing-up-but-why/82669 "2025-05-16T14:49:04Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![MissBrezel](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/missbrezel/32/59971_2.png) [@MissBrezel](https://discourse.threejs.org/u/MissBrezel)\
**Post date:** [May 16, 2025, 2:49pm UTC](https://discourse.threejs.org/t/3d-model-not-showing-up-but-why/82669/1 "2025-05-16T14:49:04Z")

</div>

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} /\>  
  
  
  
  
  
);  
}

---

<div class="post-metadata">

**Author:** ![Oleksandr-Fedorov](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/oleksandr-fedorov/32/56293_2.png) [@Oleksandr-Fedorov](https://discourse.threejs.org/u/Oleksandr-Fedorov)\
**Post date:** [May 16, 2025, 10:20pm UTC](https://discourse.threejs.org/t/3d-model-not-showing-up-but-why/82669/2 "2025-05-16T22:20:08Z")

</div>

You need something like this

```javascript
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’