Mesh

Introduction¶

Render a group of textured vertices and manipulate the view of those vertices, such as rotation, translation or scaling.

Author: Richard Davey

WebGL only

It only works in WebGL render mode.

Usage¶

Quad¶

Note

See also Plane

Load texture
```
scene.load.image(key, url);
```

Add mesh object

var mesh = scene.add.mesh(x, y, texture, frame);

or

var mesh = scene.make.mesh({
    x: 0,
    y: 0,
    add: true,

    key: null,
    frame: null
});

Set perspective or orthographic projection
- Perspective projection
```
mesh.setPerspective(width, height, fov);
// mesh.setPerspective(width, height, fov, near, far);
```
  - width, height : The width/height of the projection matrix. Typically the same as the Mesh and/or Renderer.
  - fov : The field of view, in degrees.
  - near, far : The near/far value of the view. Default value are 0.01/1000.
- Orthographic projection
```
mesh.setOrtho(mesh.width/mesh.height, 1);
// mesh.setOrtho(scaleX, scaleY, near, far);
```
  - scaleX, scaleY : The default horizontal/vertical scale in relation to the Mesh / Renderer dimensions.
  - near, far : The near/far value of the view. Default value are 0.01/1000.
Creates a grid of vertices
```
Phaser.Geom.Mesh.GenerateGridVerts({
    mesh: mesh,
    texture: textureKey,
    frame: frameName,
    width: 1,
    height: 1,
    widthSegments: 1,
    heightSegments: 1,

    // x: 0,
    // y: 0,
    // colors: 0xffffff,
    // alphas: 1,
    // tile: false,
    // isOrtho: false
})
```
- mesh : The vertices of the generated grid will be added to this Mesh Game Object.
- texture : The texture to be used for this Grid.
- frame : The name or index of the frame within the Texture.
- width , height : The width/height of the grid in 3D units.
```
{
    // ...
    width: (frameWidth/frameHeight),
    height: (frameHeight/frameHeight)
    // ...
}
```
- widthSegments, heightSegments : The number of segments to split the grid horizontally/vertically in to.
- colors : An array of colors, one per vertex, or a single color value applied to all vertices.
- alphas An array of alpha values, one per vertex, or a single alpha value applied to all vertices.
- tile :
  - false : Display as a single texture. Default value.
  - true : Texture tile (repeat) across the grid segments.

Model¶

Load model
```
scene.load.obj(key, url, objURL, matURL);
```
- objURL : URL to load the obj file.
- matURL : URL to load the material file.

Add mesh object

var mesh = scene.add.mesh(x, y);

or

var mesh = scene.make.mesh({
    x: 0,
    y: 0,
    add: true
});

Add model
```
mesh.addVerticesFromObj(key, scale, x, y, z, rotateX, rotateY, rotateZ, zIsUp);
```
- key : The key of the model data in the OBJ Cache to add to this Mesh.
- scale : An amount to scale the model data by. Default is 1.
- x, y, z : Translate the model x/y/z position by this amount.
- rotateX, rotateY, rotateZ : Rotate the model on the x/y/z axis by this amount, in radians.
- zIsUp :
  - true : Z axis is up.
  - false : Y axis is up.

Custom mesh class¶

Define class

class MyMesh extends Phaser.GameObjects.mesh {
    constructor(scene, x, y, texture, frame, vertices, uvs, indicies, containsZ, normals, colors, alphas) {
        super(scene, x, y, texture, frame, vertices, uvs, indicies, containsZ, normals, colors, alphas);
        // ...
        scene.add.existing(this);
    }
    // ...

    // preUpdate(time, delta) {
    //     super.preUpdate(time, delta);
    // }
}

scene.add.existing(gameObject) : Adds an existing Game Object to this Scene.
- If the Game Object renders, it will be added to the Display List.
- If it has a preUpdate method, it will be added to the Update List.

Create instance

var mesh = new MyMesh(scene, x, y, texture, frame);

Control¶

View¶

Translates the view position of this Mesh on the x/y/z axis by the given amount.
```
mesh.panX(x);
mesh.panY(y);
mesh.panZ(z);
```

Model¶

Position

mesh.modelPosition.x = x;
mesh.modelPosition.y = y;
mesh.modelPosition.z = z;

x, y, z : Offset position.
- z+ : Near
- z- : Far
- x- : Left
- x+ : Right
- y+ : Up
- y- : Down

Rotation

mesh.modelRotation.x = radiansX;
mesh.modelRotation.y = radiansY;
mesh.modelRotation.z = radiansZ;

or

mesh.rotateX = degreesX;
mesh.rotateY = degreesY;
mesh.rotateZ = degreesZ;

radiansX, radiansY, radiansZ : Rotation angle in radians.
degreesX, degreesY, degreesZ : Rotation angle in degrees.

Scale

mesh.modelScale.x = scaleX;
mesh.modelScale.y = scaleY;
mesh.modelScale.z = scaleZ;

scaleX, scaleY, scaleZ : Scale value, 1 is origin size.

Backward facing Faces¶

Hide backward facing Faces. Default behavior.
```
mesh.hideCCW = true;
```
Show backward facing Faces
```
mesh.hideCCW = false;
```

Faces¶

Mesh is composed of triangle faces.

var faces = mesh.faces;

Contains¶

Has any face which contains point

var isHit = mesh.hasFaceAt(worldX, worldY);
// var isHit = mesh.hasFaceAt(worldX, worldY, camera);

Get face contains point

var face = mesh.getFaceAt(worldX, worldY);
// var face = mesh.getFaceAt(worldX, worldY, camera);

Properties¶

Alpha

Get
```
var alpha = face.alpha;
```
Set
```
face.alpha = alpha;
```

Angle

Rotate

Phaser.Geom.Mesh.RotateFace(face, radians);

Center position
- Get
```
var x = face.x;
var y = face.y;
```
  - x : 0(left) ~ 1(right)
  - y : 1(top) ~ 0(bottom)
- Set
```
face.x = x;
face.y = y;
```
  or
```
face.translate(x, y);
```
  - x : 0(left) ~ 1(right)
  - y : 1(top) ~ 0(bottom)

Vertices¶

Each face has 3 vertices.

var vertices = mesh.vertices;

vertices : Array of vertex.

Properties¶

Alpha

Get
```
var alpha = vertex.alpha;
```
Set
```
vertex.alpha = alpha;
```

Tint

Get
```
var color = vertex.color;
```
Set
```
vertex.color = color;
```

Update properties¶

Start updating
```
mesh.ignoreDirtyCache = true;
```
Stop updating
```
mesh.ignoreDirtyCache = false;
```

Interactive¶

To test if pointer is at any face of this mesh game object.

mesh.setInteractive();

Debug¶

Set debug Graphics

var debugGraphics = scene.add.graphics();
mesh.setDebug(debugGraphics);

Update Graphics in scene.update() method.

debugGraphics.clear();
debugGraphics.lineStyle(1, 0x00ff00);

Other properties¶

See game object

Create mask¶

var mask = mesh.createBitmapMask();

See mask

Shader effects¶

Support postFX effects

Note

No preFX effect support