Interface PlaneGeometryOptions

Example

const options: Partial<PlaneGeometryOptions> = { width: 16, height: 9, flipV: true };
const screen = new PlaneGeometry(options);

interface PlaneGeometryOptions {
    attributes?: Record<string, Attribute>;
    bounds3D?: Box;
    colors?:
        | Float32Array<ArrayBufferLike>
        | Uint8Array<ArrayBufferLike>
        | Uint16Array<ArrayBufferLike>
        | Attribute;
    colors1?:
        | Float32Array<ArrayBufferLike>
        | Uint8Array<ArrayBufferLike>
        | Uint16Array<ArrayBufferLike>
        | Attribute;
    dynamic?: boolean;
    flipV: boolean;
    height: number;
    heightSegments: number;
    indexCount?: number;
    indices?:
        | Uint16Array<ArrayBufferLike>
        | Uint32Array<ArrayBufferLike>
        | Buffer;
    interleave?: boolean;
    joints?:
        | Uint8Array<ArrayBufferLike>
        | Uint16Array<ArrayBufferLike>
        | Attribute;
    morphTargets?: {
        normals?: Float32Array<ArrayBufferLike>;
        positions: Float32Array;
    }[];
    normals?: Float32Array<ArrayBufferLike>
    | Attribute;
    positions?: Float32Array<ArrayBufferLike> | Attribute;
    quantizeNormals?: boolean;
    quantizeTangents?: boolean;
    shrinkBuffersToFit?: boolean;
    tangents?: Float32Array<ArrayBufferLike> | Attribute;
    topology?: Topology;
    uvs?: Float32Array<ArrayBufferLike> | Attribute;
    weights?:
        | Float32Array<ArrayBufferLike>
        | Uint8Array<ArrayBufferLike>
        | Uint16Array<ArrayBufferLike>
        | Attribute;
    width: number;
    widthSegments: number;
}

Hierarchy (View Summary)

Geometry3DOptions
- PlaneGeometryOptions

Properties

`Optional`attributes

attributes?: Record<string, Attribute>

A prebuilt attribute map, keyed by shader attribute name

Use it to supply your own buffers or interleaved layout. The names the other options fill are aPosition, aUV, aNormal, aTangent, aJoints, aWeights, aColor and aColor1.

With a map, the per-attribute options build nothing, so pass bounds3D too: a geometry with empty bounds is never culled, and picking never hits it.

Example

const geometry = new Geometry3D({
  attributes: { aPosition: { buffer, format: 'float32x3', stride: 12, offset: 0 } },
  bounds3D: new Box(new Vector3(-1, -1, -1), new Vector3(1, 1, 1)),
});

`Optional`bounds3D

bounds3D?: Box

The geometry's local bounding box; computed from float positions when omitted

Pass it when you already know the box, to skip scanning the positions. Integer positions throw without it, and need it in the values their format reads as: within -1 to 1 for snorm16x4, the stored integers for sint16x4.

Example

const geometry = new Geometry3D({
  positions,
  bounds3D: new Box(new Vector3(-1, -1, -1), new Vector3(1, 1, 1)),
});

`Optional`colors

colors?:
    | Float32Array<ArrayBufferLike>
    | Uint8Array<ArrayBufferLike>
    | Uint16Array<ArrayBufferLike>
    | Attribute

Vertex colours, four components per vertex (RGBA)

A Float32Array is used as floats; an integer array is read as normalized, 0 to 1. Widen RGB colours to RGBA with an opaque alpha first. BaseMaterial3D#vertexColors decides whether they tint.

Example

const red = new Uint8Array([255, 0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255]);
const geometry = new Geometry3D({ positions, colors: red });

`Optional`colors1

colors1?:
    | Float32Array<ArrayBufferLike>
    | Uint8Array<ArrayBufferLike>
    | Uint16Array<ArrayBufferLike>
    | Attribute

A second set of vertex colours, read as aColor1, with the same rules as colors

Materials never tint with it; only a custom shader bit that declares aColor1 reads it, which makes it the place for data that isn't really a colour, such as a wind mask.

Example

const geometry = new Geometry3D({ positions, colors1: windMask });

`Optional`dynamic

dynamic?: boolean

Draw the geometry from its own buffers, so later writes to them reach the screen

Set it when you rewrite the vertices every frame, as a trail or a particle system does. A dynamic geometry is never frustum-culled. Fixed at construction.

Default

false

Example

const trail = new Geometry3D({ positions: new Float32Array(64 * 3), dynamic: true });

app.ticker.add(() => {
  writeTrailPoints(trail.positions);
  trail.attributes.aPosition.buffer.update();
});

flipV

flipV: boolean

Put v = 0 on the top edge instead of the bottom, so an image texture shows the right way up

Set it when the plane shows a picture, which otherwise renders upside down. Only the UVs change.

Default

false

Example

const photo = new PlaneGeometry({ width: 4, height: 3, flipV: true });

height

height: number

The height of the plane along the local Y axis

Default

Example

const poster = new PlaneGeometry({ width: 2, height: 3, flipV: true });

heightSegments

heightSegments: number

Subdivision count along the height (Y axis)

Floored, and clamped to a minimum of 1.

Default

Example

const flag = new PlaneGeometry({ width: 3, height: 2, widthSegments: 30, heightSegments: 20 });

`Optional`indexCount

indexCount?: number

How many indices to draw, when that is fewer than the index buffer holds

0 draws the whole buffer. Only a dynamic geometry honours it; any other draws its whole index buffer. Use it to draw a prefix of an index buffer several geometries share.

Default

Example

const firstTen = new Geometry3D({ positions, indices: sharedQuadIndices, indexCount: 10 * 6, dynamic: true });

`Optional`indices

indices?: Uint16Array<ArrayBufferLike> | Uint32Array<ArrayBufferLike> | Buffer

Vertex indices, three per triangle for the default triangle-list topology

Left out, the vertices are drawn in order. A Uint16Array of odd length is copied into a Uint32Array. A Buffer is used as it is, so several geometries can share one.

Example

const quad = new Geometry3D({
  positions: new Float32Array([-1, -1, 0, 1, -1, 0, 1, 1, 0, -1, 1, 0]),
  indices: new Uint16Array([0, 1, 2, 0, 2, 3]),
});

`Optional`interleave

interleave?: boolean

Whether to pack the attributes into one interleaved buffer

Only a dynamic geometry draws from its own buffers; for any other, this changes how its own data is laid out, not how it draws. Per-triangle picking, a hitVolume of 'geometry', never hits an interleaved geometry.

Default

false

Example

const trail = new Geometry3D({ positions, colors, interleave: true, dynamic: true });

`Optional`joints

joints?: Uint8Array<ArrayBufferLike> | Uint16Array<ArrayBufferLike> | Attribute

Four bone indices per vertex, for skinning

Example

const geometry = new Geometry3D({ positions, joints: new Uint8Array(vertexCount * 4), weights });

`Optional`morphTargets

morphTargets?: {
normals?: Float32Array<ArrayBufferLike>;
positions: Float32Array;
}[]

Morph targets (blend shapes), each a set of per-vertex offsets from positions

A Mesh3D drawing the geometry blends the targets by its Mesh3D#weights. Normal offsets are used only when every target has them. A geometry morphs in one renderer only: once a second renderer draws it, even a new Application made after the first is destroyed, it draws unmorphed from then on and warns once.

Culling allows for weights from 0 to 1. For weights outside that range, pass a larger bounds3D.

Type Declaration

`Optional`normals?: Float32Array<ArrayBufferLike>

Offsets from the base normals, three floats per vertex

Example

const geometry = new Geometry3D({
  positions,
  normals,
  morphTargets: [{ positions: bulgeOffsets, normals: bulgeNormalOffsets }],
});

positions: Float32Array

Offsets from the base positions, three floats per vertex

Example

const raise = new Float32Array(vertexCount * 3);
for (let i = 1; i < raise.length; i += 3) raise[i] = 0.5;
const geometry = new Geometry3D({ positions, morphTargets: [{ positions: raise }] });

Example

const geometry = new Geometry3D({ positions, morphTargets: [{ positions: smileOffsets }] });
const face = new Mesh3D({ geometry, material, weights: new Float32Array([0.5]) });

`Optional`normals

normals?: Float32Array<ArrayBufferLike> | Attribute

Vertex normals, three floats per vertex

Without them the geometry shades as if every normal were (0, 0, 1), which suits unlit billboards and ribbons. quantizeNormals decides how they are stored.

Example

const geometry = new Geometry3D({ positions, normals });

`Optional`positions

positions?: Float32Array<ArrayBufferLike> | Attribute

Vertex positions, three floats per vertex

Integer positions come in as an Attribute, since only its format says how to read them: snorm as -1 to 1, unorm as 0 to 1, and sint or uint as the stored integers. An integer typed array throws. Pad 8- and 16-bit xyz to four components per vertex, and pass bounds3D.

Example

const triangle = new Geometry3D({ positions: new Float32Array([0, 1, 0, -1, -1, 0, 1, -1, 0]) });

`Optional`quantizeNormals

quantizeNormals?: boolean

Whether to store Float32Array normals as 16-bit signed integers

They then take 8 bytes per vertex instead of 12, with negligible visual difference. Read them back as floats with getAttributeData.

Default

true

Example

const geometry = new Geometry3D({ positions, normals, quantizeNormals: false });

`Optional`quantizeTangents

quantizeTangents?: boolean

Whether to store Float32Array tangents as 16-bit signed integers

They then take 8 bytes per vertex instead of 16, with negligible visual difference. Read them back as floats with getAttributeData.

Default

true

Example

const geometry = new Geometry3D({ positions, normals, tangents, quantizeTangents: false });

`Optional`shrinkBuffersToFit

shrinkBuffersToFit?: boolean

Whether the geometry's own GPU buffers may shrink to fit their data when it gets smaller

Default

false

Example

const geometry = new Geometry3D({ positions, shrinkBuffersToFit: true });

`Optional`tangents

tangents?: Float32Array<ArrayBufferLike> | Attribute

Vertex tangents, four floats per vertex: the tangent direction, then 1 or -1 for which way the bitangent points

Normal maps use them when present and otherwise derive a tangent frame per pixel. quantizeTangents decides how they are stored.

Example

const geometry = new Geometry3D({ positions, normals, uvs, tangents });

`Optional`topology

topology?: Topology

Primitive topology used when drawing the mesh

Default

'triangle-list'

Example

const wireframe = new Geometry3D({ positions, indices: edgeIndices, topology: 'line-list' });

`Optional`uvs

uvs?: Float32Array<ArrayBufferLike> | Attribute

Texture coordinates, two floats per vertex

Integer coordinates come in as an Attribute, read as integer positions are: unorm16x2 as 0 to 1, uint16x2 as the stored integers, which the material's BaseMaterial3D#uvTransform has to scale back down.

Example

const quad = new Geometry3D({ positions, uvs: new Float32Array([0, 0, 1, 0, 1, 1, 0, 1]) });

`Optional`weights

weights?:
    | Float32Array<ArrayBufferLike>
    | Uint8Array<ArrayBufferLike>
    | Uint16Array<ArrayBufferLike>
    | Attribute

Four bone weights per vertex, matching joints

A Float32Array is used as floats; an integer array is read as normalized, 0 to 1.

Example

const geometry = new Geometry3D({ positions, joints, weights: new Float32Array(vertexCount * 4) });

width

width: number

The width of the plane along the local X axis

Default

Example

const banner = new PlaneGeometry({ width: 4, height: 1 });

widthSegments

widthSegments: number

Subdivision count along the width (X axis)

Floored, and clamped to a minimum of 1.

Default

Example

const water = new PlaneGeometry({ width: 50, height: 50, widthSegments: 128, heightSegments: 128 });

Interface PlaneGeometryOptions

Example

Hierarchy (View Summary)

Index

Properties

Properties

Optionalattributes

Example

Optionalbounds3D

Example

Optionalcolors

Example

Optionalcolors1

Example

Optionaldynamic

Default

Example

flipV

Default

Example

height

Default

Example

heightSegments

Default

Example

OptionalindexCount

Default

Example

Optionalindices

Example

Optionalinterleave

Default

Example

Optionaljoints

Example

OptionalmorphTargets

Type Declaration

Optionalnormals?: Float32Array<ArrayBufferLike>

Example

positions: Float32Array

Example

Example

Optionalnormals

Example

Optionalpositions

Example

OptionalquantizeNormals

Default

Example

OptionalquantizeTangents

Default

Example

OptionalshrinkBuffersToFit

Default

Example

Optionaltangents

Example

Optionaltopology

Default

Example

Optionaluvs

Example

Optionalweights

Example

width

Default

Example

widthSegments

Default

Example

Settings

On This Page

`Optional`attributes

`Optional`bounds3D

`Optional`colors

`Optional`colors1

`Optional`dynamic

`Optional`indexCount

`Optional`indices

`Optional`interleave

`Optional`joints

`Optional`morphTargets

`Optional`normals?: Float32Array<ArrayBufferLike>

`Optional`normals

`Optional`positions

`Optional`quantizeNormals

`Optional`quantizeTangents

`Optional`shrinkBuffersToFit

`Optional`tangents

`Optional`topology

`Optional`uvs

`Optional`weights