Search code examples
reactjsthree.js3dreact-three-fiber

How to make edges of model smooth in React three fibre


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;

Solution

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