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')

  let time = 0
  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.sin(time / 10 + i) * 0.5
      }
      buffer.update()
      time++
    }
  })
</script>

<SimplePlane
  x={-300}
  y={-200}
  bind:instance={plane}
  anchor={0.5}
  texture={PIXI.Texture.from('/assets/bg_grass.jpg')}
  vertices={10}
/>

API

Props

Name	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.ShaderPIXI.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
globalmousemove	forwarded
globalpointermove	forwarded
globaltouchmove	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