glodrei/docs/portals/fisheye.mdx

useful add-ons for react-three-fiber

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

<Grid cols={4}>
  <li>
    <Codesandbox id="7qytdw" />
  </li>
</Grid>

```tsx
export type FisheyeProps = JSX.IntrinsicElements['mesh'] & {
  /** Zoom factor, 0..1, 0 */
  zoom?: number
  /** Number of segments, 64 */
  segments?: number
  /** Cubemap resolution (for each of the 6 takes), null === full screen resolution, default: 896 */
  resolution?: number
  /** Children will be projected into the fisheye */
  children: React.ReactNode
  /** Optional render priority, defaults to 1 */
  renderPriority?: number
}
```

This component will take over system rendering. It portals its children into a cubemap which is then projected onto a sphere. The sphere is rendered out on the screen, filling it. You can lower the resolution to increase performance. Six renders per frame are necessary to construct a full fisheye view, and since each facet of the cubemap only takes a portion of the screen full resolution is not necessary. You can also reduce the amount of segments (resulting in edgier rounds).

```jsx
<Canvas camera={{ position: [0, 0, 5] }}>
  <Fisheye>
    <YourScene />
  </Fisheye>
  <OrbitControls />
```