Perspective

Rotate the plane in 3D space with pan and tilt

Props

center{x: number, y: number}

Default:{"x":0.5,"y":0.5}

Center point of rotation

center

{x: number, y: number}Default: {"x":0.5,"y":0.5}

Center point of rotation

pannumber

Default:0

Horizontal rotation (left/right)

pan

numberDefault: 0

Horizontal rotation (left/right)

tiltnumber

Default:0

Vertical rotation (up/down)

tilt

numberDefault: 0

Vertical rotation (up/down)

fovnumber

Default:60

Field of view - controls perspective intensity

fov

numberDefault: 60

Field of view - controls perspective intensity

zoomnumber

Default:1

Zoom in to fill the frame after rotation

zoom

numberDefault: 1

Zoom in to fill the frame after rotation

offset{x: number, y: number}

Default:{"x":0.5,"y":0.5}

Shift the result in X/Y

offset

{x: number, y: number}Default: {"x":0.5,"y":0.5}

Shift the result in X/Y

edges"stretch" | "transparent" | "mirror" | "wrap"

Default:transparent

How to handle edges

edges

"stretch" | "transparent" | "mirror" | "wrap"Default: transparent

How to handle edges

Usage

<Shader>
  <Perspective>
    <Circle />
  </Perspective>
</Shader>

<Shader>
  <Perspective>
    <Circle />
  </Perspective>
</Shader>

<Shader>
  <Perspective>
    <Circle />
  </Perspective>
</Shader>

<Shader>
  <Perspective>
    <Circle />
  </Perspective>
</Shader>

import { createShader } from 'shaders/js'

const shader = await createShader(canvas, {
  components: [
    { type: 'Perspective', props: {}, children: [
      { type: 'Circle', props: {} }
    ]}
  ]
})

Paper

Pixelate

Documentation

Perspective

Props

Usage