Image

export type ImageProps = Omit<JSX.IntrinsicElements['mesh'], 'scale'> & {
  segments?: number
  scale?: number | [number, number]
  color?: Color
  zoom?: number
  radius?: number
  grayscale?: number
  toneMapped?: boolean
  transparent?: boolean
  opacity?: number
  side?: THREE.Side
}

function Foo() {
  const ref = useRef()
  useFrame(() => {
    ref.current.material.radius = ... // between 0 and 1
    ref.current.material.zoom = ... // 1 and higher
    ref.current.material.grayscale = ... // between 0 and 1
    ref.current.material.color.set(...) // mix-in color
  })
  return <Image ref={ref} url="/file.jpg" />
}

<Image url="/file.jpg" transparent opacity={0.5} />

import { extend } from '@react-three/fiber'
import { Image } from '@react-three/drei'
import { easing, geometry } from 'maath'

extend({ RoundedPlaneGeometry: geometry.RoundedPlaneGeometry })

<Image url="/file.jpg">
  <roundedPlaneGeometry args={[1, 2, 0.15]} />
</Image>