I am using React three fibre to render a sphere but when I zoom on the model the edges become jagged. How do I fix it?
function Shape() {
const moonTexture = useLoader(TextureLoader, texture);
return (
<mesh>
<sphereGeometry attach='geometry' />
<meshStandardMaterial map={moonTexture} />
</mesh>
);
}
function Model() {
return (
<div className='model'>
<Canvas className='canvas' camera={{ fov: 35, zoom: 1.0, near: 1, far: 1000 }}>
<OrbitControls />
<Stars />
<ambientLight intensity={0.03} />
<spotLight position={[90, 0, 5]} intensity={1.0} angle={0.3} />
{/* <spotLight position={[0, 0, 0]} intensity={-10.0} angle={0.2} /> */}
<Shape />
</Canvas>
</div>
);
}
export default Model;
I found adding these sets of arguments does the job.
<mesh rotation={[0, -Math.PI / 5, 0]}>
<sphereGeometry attach='geometry' args={[1, 100, 100]} />
<meshStandardMaterial map={moonTexture} />
</mesh>