Render STL file

[sajanv88]

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?

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

[drcmda]

<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.

[sajanv88]

Thank you for your prompt response.

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

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

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

[drcmda]

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.

[sajanv88]

I receipt a BufferGeometry object.

It doesn’t render in the canvas.

[drcmda]

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.

[sajanv88]

@drcmda Here you go. Thanks again

React Render STL - CodeSandbox

[sajanv88]

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