How to make edges of model smooth in React three fibre

Viewed 39

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;
1 Answers

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>
Related