How to load STL file

[mic-tientpn]

👋 hi there, i have a problem, I try load model from .stl file but received error "TypeError: Proto is not a constructor"

can you help me? thanks.

#my code

import React , {useMemo, Suspense } from 'react'
import { Canvas,  useLoader } from "@react-three/fiber"
import  { OrbitControls } from '@react-three/drei'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import { Box } from './model'
import { OBJLoader, STLLoader } from 'three/examples/jsm/loaders/OBJLoader'

const Model = ({ url }) => {
  const gltf = useLoader(STLLoader, url)
  console.log(gltf)
  return gltf ? <primitive object={gltf} /> : null
};

const Result = ({url}) => {
  const Component = useMemo(()=> <Model url={url}/> , [url])
  return (
    <>
      {Component}
    </>
  )
}

const ModalPreview = (props) => {
  return (
    <>
      <Canvas>
        <OrbitControls/>
        <Suspense fallback={<Box/>}>
          <Result url={props.url}/>
        </Suspense>
     </Canvas>
    </>
  )
}

export default ModalPreview

[drcmda]

stlloader is not part of objloader

import { STLLoader } from 'three/examples/jsm/loaders/STLLoader'

the error message tells you what you did TypeError: Proto is not a constructor you give it undefined as the loader.

return gltf ? : null

you don't need to check against null, it will never be null, and you can't just return the output.

import scene = useLoader(STLLoader, url)
return <primitive object={scene} />

that is ... if STLLoader really gives you a scene, i have never used it. but if you want to dump an existing object into the scene then you do that with primitive.

[mic-tientpn]

@drcmda thanks for your reply.

I have a question, when I load STL file by STLLoader, I receipt a BufferGeometry object.

How can I show it in canvas.

thanks.

[drcmda]

<mesh geometry={bufferGeom}>
  <meshStandardMaterial color="hotpink" />
</mesh>

[mic-tientpn]

@drcmda

Thank you so much, I resolved my problem.