How to make camera adapt to different screen size. (responsive camera)

Questions
5

Thank you, this is quite useful. But it did not solve my issue.

1709098272978
my plane geometry aspect ratio is still effected by screen size. i guess i misused word “responsive”, what i need is to prevent the image from distorted. Ideally this item should be “responsive” and yet undistorted, otherwise this image won’t look good on mobile device.

I assume there are a couple of ways, maybe use OrthographicCamera, or maybe update the aspect ratio on window resize. but none of them really worked

export function Items() {
  const ref = useRef()

  const texture = useLoader(TextureLoader, 'https://dummyimage.com/600x400/000/fff')

  // Load the image using THREE.TextureLoader
  const aspect = texture.image.width / texture.image.height
  let scaleX = 1
  let scaleY = 1
    const desiredAspect = 600 / 400

  if (aspect > desiredAspect) {
    // Texture is wider than the desired aspect ratio
    scaleY = (1 / aspect) * desiredAspect
  } else {
    // Texture is taller than or equal to the desired aspect ratio
    scaleX = aspect / desiredAspect
  }
  return (
    <group scale={[scaleX, scaleY, 1]}>
      <mesh ref={ref}>
        <planeGeometry />
        <meshBasicMaterial map={texture} side={DoubleSide} />
      </mesh>
    </group>
  )
}

const CustomOrthographicCamera= (props) => {
  const frustumSize = 5

  const camera = useRef()
  const { size } = useThree()

  useEffect(() => {
    const aspect = size.height / size.width
    camera.current.left = -frustumSize / 2
    camera.current.right = frustumSize / 2
    camera.current.top = (frustumSize * aspect) / 2
    camera.current.bottom = (-frustumSize * aspect) / 2
    camera.current.updateProjectionMatrix()
  }, [size, frustumSize])

  return <OrthographicCamera ref={camera} {...props} />
}

i also tried

          <PerspectiveCamera
            fov={60}
            position={[0, 0, -4]}
            manual
            aspect={size.width / size.height}
            onUpdate={(c) => c.updateProjectionMatrix()}
          />

Did i miss anything?

note: i found a similar issue here: Resize canvas with different aspect ratio - #7 by HasanTheSyrian
his method is update the camera aspect ratio onresize