# Render STL file

**URL:** <https://discourse.threejs.org/t/render-stl-file/35419>\
**Category:** Questions\
**Tags:** loaders, materials, geometry\
**Created:** [February 28, 2022, 4:30pm UTC](https://discourse.threejs.org/t/render-stl-file/35419 "2022-02-28T16:30:11Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![sajanv88](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/sajanv88/32/24591_2.png) [@sajanv88](https://discourse.threejs.org/u/sajanv88)\
**Post date:** [February 28, 2022, 4:30pm UTC](https://discourse.threejs.org/t/render-stl-file/35419/1 "2022-02-28T16:30:11Z")

</div>

Hello guys, I am new to threejs and i need some help to load .stl and 3mf files.  
I am using react-three-fiber package in my React application.  
Here is my code: stl file is logged as bufferGeometry, but it didn’t render on the screen. Could anyone please help me what is wrong in the below code?

```javascript
function ModelRender({url}) {
  const geom = useLoader(STLLoader, url);
  const obj = geom.toJSON();
  console.log(obj)
  return (
    <>
      <meshPhongMaterial color="white" />
      <primitive object={geom} attach="geometry" />
    </>
  )
}

function App() {

  return (
    <div className="App">
      <Canvas style={{height: '500px'}}>
        <Suspense fallback={"loading..."}>
          <ModelRender url="/model.stl" />
        </Suspense>
        <directionalLight position={[0, 10, 1]} />
        <OrbitControls panSpeed={0.5} />
      </Canvas>
    </div>
  );
}
```

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [February 28, 2022, 5:32pm UTC](https://discourse.threejs.org/t/render-stl-file/35419/2 "2022-02-28T17:32:41Z")

</div>

```nohighlight
<mesh geometry={geom}>
  <meshPhongMaterial color="white" />
</mesh>

```

geometry or materials alone do nothing, they’re technically not even 3d scene objects. always must be used in a mesh. as for the `<primitive object={geom} attach="geometry" />`, it would work but why, you have a geometry, just use mesh.geometry just like you would in plain three. `primitive` is when you have a foreign object or scene that you would need to put into the canvas.

---

<div class="post-metadata">

**Author:** ![sajanv88](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/sajanv88/32/24591_2.png) [@sajanv88](https://discourse.threejs.org/u/sajanv88)\
**Post date:** [February 28, 2022, 8:00pm UTC](https://discourse.threejs.org/t/render-stl-file/35419/3 "2022-02-28T20:00:42Z")

</div>

Thank you for your prompt response.

I tried what you have suggested but it didn’t work.

```javascript
function ModelRender({url}: ModelRenderProps) {
  const geom = useLoader(STLLoader, url);

  return (
    <mesh geometry={geom}>
      <meshPhongMaterial color="white" />
    </mesh>
  )
}

```

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [February 28, 2022, 8:49pm UTC](https://discourse.threejs.org/t/render-stl-file/35419/4 "2022-02-28T20:49:42Z")

</div>

if it didnt work the link doesnt work, 404, file broken, model too big or too small, camera facing the other way, it can have many reasons now. i’d start with chrome devtools \> networking to see if it actually loaded.

---

<div class="post-metadata">

**Author:** ![sajanv88](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/sajanv88/32/24591_2.png) [@sajanv88](https://discourse.threejs.org/u/sajanv88)\
**Post date:** [February 28, 2022, 8:53pm UTC](https://discourse.threejs.org/t/render-stl-file/35419/5 "2022-02-28T20:53:34Z")

</div>

I receipt a BufferGeometry object.

![Screen Shot 2022-02-28 at 21.51.46](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/8/0/8080a8c5dde71aa03880a94e3d51f0c3be29d267.png)  
 ![Screen Shot 2022-02-28 at 21.52.12](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/d/5/d555c49ce2add243871b3ef40a2990484d5c94c2.png)

 ![Screen Shot 2022-02-28 at 21.53.13](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/9/4/945b25552b892fe923a614351cd2df46753402ae.png)

It doesn’t render in the canvas.

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [March 1, 2022, 7:38am UTC](https://discourse.threejs.org/t/render-stl-file/35419/6 "2022-03-01T07:38:29Z")

</div>

as i said, it can have lots of reasons now, some trivial, like camera positioning. make a small codesandbox if you like, it’s impossible to help from here on otherwise.

---

<div class="post-metadata">

**Author:** ![sajanv88](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/sajanv88/32/24591_2.png) [@sajanv88](https://discourse.threejs.org/u/sajanv88)\
**Post date:** [March 1, 2022, 8:00am UTC](https://discourse.threejs.org/t/render-stl-file/35419/7 "2022-03-01T08:00:27Z")

</div>

@drcmda Here you go. Thanks again 🙂

> **[React Render STL - CodeSandbox](https://codesandbox.io/s/react-render-stl-micr37)**
>
> React Render STL by sajanv88 using @react-three/drei, @react-three/fiber, @types/three, react, react-dom, react-scripts, three

---

<div class="post-metadata">

**Author:** ![sajanv88](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/sajanv88/32/24591_2.png) [@sajanv88](https://discourse.threejs.org/u/sajanv88)\
**Post date:** [March 1, 2022, 8:06am UTC](https://discourse.threejs.org/t/render-stl-file/35419/8 "2022-03-01T08:06:09Z")

</div>

@drcmda Thanks mate! You were absolutely right. Camera wasn’t positioned properly 🙈