Load STL File

[AstroNik]

So for the past week I've been trying to load in a STL file and I can't get anything to work.

When I don't import my file as an import statement, I get an error saying cannot load file.

import React from 'react';
import {STLLoader} from "three/examples/jsm/loaders/STLLoader";
import {Canvas, useLoader} from "react-three-fiber";
import book from './book.stl'

export const Model = ({url}) => {

    const geom = useLoader(STLLoader, book)

    return (
        <Canvas>
            <mesh>
                <bufferGeometry ref={geom} attach="geometry"/>
                <meshStandardMaterial color="hotpink"/>
            </mesh>
            <ambientLight/>
            <pointLight position={[10, 10, 10]}/>
        </Canvas>
    )
}

Can someone help me figure out how to correctly load in a 3D object from an STL file and display it on a Canvas?

I also create a StackOverFlow question but no hits.

[joshuaellis]

<bufferGeometry ref={geom} attach="geometry"/>

This is your problem. The return from useLoader is typically an object, you should use it like this:

export const Model = ({url}) => {

    const geom = useLoader(STLLoader, book)

    return (
        <Canvas>
            <mesh>
                <primitive object={geom} attach="geometry"/> // note I've used primitive.
                <meshStandardMaterial color="hotpink"/>
            </mesh>
            <ambientLight/>
            <pointLight position={[10, 10, 10]}/>
        </Canvas>
    )
}

[AstroNik]

Hmm I tired that out, but nothing seems to be loading.

could it be an issue with where I'm calling it?

 <div className="content-div">
     <Suspense fallback={""}>
          <Model url={project.tDFiles}/>
     </Suspense>
</div>

I'm aware my Suspense fallback is empty.

On my browser it just shows that the canvas is empty.

[joshuaellis]

A. I thought fallback had to be null of a React Component?
B. Can you make a sandbox, I can probably fix it 10x quicker and you'll have a working example 🙇🏼‍♀️
C. I think your useLoader hook has to be encapsulated by a component not containing Canvas:

const Model = () => {
    const geom = useLoader(STLLoader, book)

    return (
<>
            <mesh>
                <primitive object={geom} attach="geometry"/> // note I've used primitive.
                <meshStandardMaterial color="hotpink"/>
            </mesh>
            <ambientLight/>
            <pointLight position={[10, 10, 10]}/>
</>
    )
}

const Scene = () => {
 return <div className="content-div">
     <Canvas>
       <Suspense fallback={""}>
          <Model url={project.tDFiles}/>
       </Suspense>
     </Canvas>
</div>
}

[AstroNik]

I created a sandbox https://codesandbox.io/live/zr6vo7h. (Closed Now)

It's live rightnow. Couldn't find a way to share it so other people could edit it unless it was live.

[drcmda]

You are using hooks outside of canvas. They are context related and can only be used within canvas.