SimplePlane

Creates a PIXI.SimplePlane

The SimplePlane allows you to draw a texture across several points and then manipulate these points

Usage

<script>
  import { SimplePlane, onTick } from 'svelte-pixi'
  import * as PIXI from 'pixi.js'

  let plane
  $: buffer = plane && plane.geometry.getBuffer('aVertexPosition')

  onTick((delta) => {
    if (buffer) {
        // Randomize the vertice positions a bit to create movement.
        for (let i = 0; i < buffer.data.length; i++) {
            buffer.data[i] += (Math.random() - 0.5);
        }
        buffer.update();
    }
  })
</script>

<SimplePlane
  bind:instance={plane}
  texture={PIXI.Texture.from('/assets/bg_grass.jpg')}
  vertices={10}
/>

Component API

Props

Name Type Default Description
drawMode PIXI.DRAW_MODES The way the Mesh should be drawn, can be any of the PIXI.DRAW_MODES constants.
geometry PIXI.Geometry Includes vertex positions, face indices, normals, colors, UVs, and
custom attributes within buffers, reducing the cost of passing all this data to the GPU.
Can be shared between multiple Mesh objects.
instance PIXI.SimplePlane The PIXI.SimplePlane instance. Can be set or bound to.
shader PIXI.Shader PIXI.MeshMaterial Represents the vertex and fragment shaders that processes the geometry and runs on the GPU.
Can be shared between multiple Mesh objects.
state PIXI.State Represents the WebGL state the Mesh required to render, excludes shader and geometry.
E.g., blend mode, culling, depth testing, direction of rendering triangles, backface, etc.
texture PIXI.Texture The texture to use
vertices PointLike The number of vertices in the plane. This is only used on initial mount.
If you need to update the vertices, you will have to update the geometry buffer
from the instance.

Additional props are passed on to Container

Slots

Name Props Fallback
default

Events

Name Type Detail
added forwarded
click forwarded
create forwarded
mousedown forwarded
mousemove forwarded
mouseout forwarded
mouseover forwarded
mouseup forwarded
mouseupoutside forwarded
pointercancel forwarded
pointerdown forwarded
pointermove forwarded
pointerout forwarded
pointerover forwarded
pointertap forwarded
pointerup forwarded
pointerupoutside forwarded
removed forwarded
removedFrom forwarded
rightclick forwarded
rightdown forwarded
rightup forwarded
rightupoutside forwarded
tap forwarded
touchcancel forwarded
touchend forwarded
touchendoutside forwarded
touchmove forwarded
touchstart forwarded