PixiJS

Class: PerspectiveMesh

PerspectiveMesh

A perspective mesh that allows you to draw a 2d plane with perspective. Where ever you move the corners the texture will be projected to look like it is in 3d space. Great for mapping a 2D mesh into a 3D scene.

The calculations is done at the uv level. This means that the more vertices you have the more smooth the perspective will be. If you have a low amount of vertices you may see the texture stretch. Too many vertices could be slower. It is a balance between performance and quality! We leave that to you to decide.

IMPORTANT: This is not a full 3D mesh, it is a 2D mesh with a perspective projection applied to it :)

new PerspectiveMesh (options)

ts:91
Name Type Description
options PerspectivePlaneOptions

Options to be applied to PerspectiveMesh
See:

Example

```js
const meshPlane = new PerspectiveMesh({
 texture: Texture.from('snake.png'),
 verticesX: 20,
 verticesY: 20,
 x0: 0,
 y0: 0,
 x1: 100,
 y1: 0,
 x2: 100,
 y2: 100,
 x3: 0,
 y3: 100
});

Members

defaultOptions PerspectivePlaneOptions static

default options for the mesh

texture Texture

The texture that the mesh uses

Methods

setCorners (x0, y0, x1, y1, x2, y2, x3, y3)

ts:150

Set the corners of the quad to the given coordinates The mesh will then calculate the perspective so it looks correct!

Name Type Description
x0 number

x coordinate of the first corner
y0 number

y coordinate of the first corner
x1 number

x coordinate of the second corner
y1 number

y coordinate of the second corner
x2 number

x coordinate of the third corner
y2 number

y coordinate of the third corner
x3 number

x coordinate of the fourth corner
y3 number

y coordinate of the fourth corner

textureUpdated () void protected

ts:118

Update the geometry when the texture is updated