Render STL File in React

Question

I'm trying to display an STL file using react-three-fiber and threejs from a https link / file.

Issues:

1. CORS (localhost -> https issue)
2. Cannot load local files either

Also I know I can load files using threejs regularly (haven't tried this way nor do I know the correct integration between react-three and three) but I don't plan to use it since I will be loading in all my models via a link and I just assume react-three-fiber is better to use in my case?

What I've Tried

import React from 'react';
import {STLLoader} from 'three/examples/jsm/loaders/STLLoader';
import {useLoader} from 'react-three-fiber';

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

     const res = useLoader(STLLoader,url);
     
     return (
        <primitive object={res}/>
     )

}

class Layout extends Component {

     render() {
          const {project} = this.props;
          return (
             <Canvas>
                <Model url={project.tdFiles}/>
             </Canvas>
          )
     }

//project.tDFiles is a string thats a URL to my STL file location

//I've also tired './model.stl' , 'model.stl' to try and load a file locally
}

Model Update

export const Model = (props) => {

    const geom = useLoader(STLLoader, './book.stl')

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

I'm getting the error Error: failure loading ./book.stl

NEWEST Update

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>
                <primitive object={geom}/>
                <meshStandardMaterial color="hotpink"/>
            </mesh>
            <ambientLight/>
            <pointLight position={[10, 10, 10]}/>
        </Canvas>
    )
}

I imported it like that and now I have no errors BUT nothing is loading.

Answer 1

Model

export const Model = ({url}) => {
    const geom = useLoader(STLLoader, url);

    const ref = useRef();
    const {camera} = useThree();
    useEffect(() => {
        camera.lookAt(ref.current.position);
    });

    return (
        <>
            <mesh ref={ref}>
                <primitive object={geom} attach="geometry"/>
                <meshStandardMaterial color={"orange"}/>
            </mesh>
            <ambientLight/>
            <pointLight position={[10, 10, 10]}/>
        </>
    );
};

Other Component

<div className="content-div">
     <Canvas camera={{ position: [0, 10, 100] }}>
          <Suspense fallback={null}>
               <Model url={"./RaspberryPiCase.stl"} />
          </Suspense>
          <OrbitControls />
     </Canvas>
</div>

Answer 2

import {Canvas} from '@react-three/fiber'
import {FC, useEffect, useState} from 'react'
import {BufferGeometry} from 'three'
import {STLLoader} from 'three/examples/jsm/loaders/STLLoader'

interface Props {
  fileUrl: string
}

const Model: FC<Props> = ({fileUrl}) => {
  const [geometry, setGeometry] = useState<BufferGeometry>()

  useEffect(() => {
    const stlLoader = new STLLoader()
    stlLoader.load(fileUrl, geo => {
      setGeometry(geo)
    })
  }, [])

  return (
    <Canvas>
      <ambientLight />
      <mesh geometry={geometry}>
        <meshStandardMaterial color="#cccccc" />
      </mesh>
    </Canvas>
  )
}

export default Model