Three.js Viewing 3D OBJ Model Render Glitch (Transparent sides)

Questions
, ,
1

I am currently using three.js in Next.js app. I want to render 3D OBJ models specifically but the rendered model gets glitchy. From angles, it is seen through and from other angles it is not. Here is the normal model opened in 3D viewer and the rendered one:

Screenshot 2023-05-21 081139
Screenshot 2023-05-21 0811391058×497 47.1 KB

Screenshot 2023-05-21 081023

And here is my code:

type ModelProps = {
    scale?: number,
}


const Model = forwardRef((props: ModelProps, ref: any) => {

    const obj = useLoader(OBJLoader, "/models/3D Model.obj");

    return <primitive ref={ref} object={obj} {...props} />
})

type Props = {}

const LandingModel = (props: Props) => {
    const modelRef = useRef<any>();

  return (
    <div className='flex-[1] h-full'>
        <Canvas camera={{ position: [0, 10, 50], fov: 90}} className=' relative bottom-8 min-h-[496px] max-h-[496px] min-w-[425px] max-w-[425px]'>
            <PresentationControls speed={1} global polar={[-0.10, Math.PI / 4]}>
                <Stage environment={undefined}>
                    <Model ref={modelRef} scale={0.01} />
                </Stage>
            </PresentationControls>
        </Canvas>
    </div>
  )
}