glodrei/docs/abstractions/image.mdx

useful add-ons for react-three-fiber

---
title: Image
sourcecode: src/core/Image.tsx
---

<Grid cols={4}>
  <li>
    <Codesandbox id="9s2wd9" />
  </li>
  <li>
    <Codesandbox id="l4klb" />
  </li>
  <li>
    <Codesandbox id="gsm1y" />
  </li>
  <li>
    <Codesandbox id="x8gvs" />
  </li>
  <li>
    <Codesandbox id="yjhzv" />
  </li>
</Grid>

A shader-based image component with auto-cover (similar to css/background: cover).

```tsx
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
}
```

```jsx
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" />
}
```

To make the material transparent:

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

You can have custom planes, for instance a rounded-corner plane.

```jsx
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>
```