Interface Sprite3DOptions

Constructor options for Sprite3D

texture, tint, alpha, alphaMode and alphaCutoff shape the sprite's material. Without material they build the unlit FlatMaterial the sprite makes; with one, those you set are written into it, texture into its baseColor slot. The other Mesh3DOptions apply too, and label defaults to 'Sprite3D'.

Example

const markerMaterial = new Material3D({ roughness: 0.8 });
const marker = new Sprite3D({
  material: markerMaterial,
  texture: markerTexture,
  alphaMode: 'mask',
  label: 'marker',
  parent: view.root,
});

Hierarchy

Omit<Mesh3DOptions, "geometry" | "material" | "skeleton" | "weights">
- Sprite3DOptions

Properties

`Optional`alpha

alpha?: number

Opacity multiplied into the texture's alpha

Default

Example

const smoke = new Sprite3D({ texture: smokeTexture, alpha: 0.5 });

`Optional`alphaCutoff

alphaCutoff?: number

Alpha below which 'mask' mode cuts a pixel away

Default

0.5

Example

const leaf = new Sprite3D({ texture: leafTexture, alphaMode: 'mask', alphaCutoff: 0.3 });

`Optional`alphaMode

alphaMode?: AlphaMode

How the texture's alpha is used

'blend' draws the sprite in the transparent pass, which sorts back to front every frame: the right default for soft edges. 'mask' cuts away pixels below alphaCutoff in the opaque pass, with depth writes and no sorting, so it batches better than 'blend'; it's the usual pick for foliage. 'opaque' draws the whole quad solid.

Default

'blend'

Example

const leaf = new Sprite3D({ texture: leafTexture, alphaMode: 'mask' });

`Optional`anchor

anchor?: number | PointData

Which point of the image sits on the node's origin, as a fraction of its size, with y measured down from the top edge

A single number sets both axes. 0.5 centres the image, and { x: 0.5, y: 1 } stands it on the origin. Left out, the texture's defaultAnchor applies, as on pixi's 2D Sprite; without one it's centred, unlike the 2D Sprite's (0, 0). The Sprite3D class notes cover how it behaves in each billboard mode.

Default

0.5

Example

const tree = new Sprite3D({ texture: treeTexture, anchor: { x: 0.5, y: 1 } });

`Optional`angle

angle?: PointData3D

Local rotation as Euler angles in degrees: turns around Z, then Y, then X, each about the parent's axes

Default

{ x: 0, y: 0, z: 0 }

Example

const turned = new Container3D({ angle: { x: 0, y: 90, z: 0 } });

`Optional`billboardMode

billboardMode?: BillboardMode

How the quad turns to face the camera; see BillboardMode

Sprites with different modes don't share a draw; the Sprite3D class notes say when that costs draw calls.

Default

'spherical'

Example

const tree = new Sprite3D({ texture: treeTexture, billboardMode: 'cylindrical' });

`Optional`boundsVolume

boundsVolume?: Box

Fixed local-space box used in place of this node's subtree when measuring bounds; see Container3D.boundsVolume

Example

const swarm = new Container3D({ boundsVolume: new Box(new Vector3(-10, 0, -10), new Vector3(10, 5, 10)) });

`Optional`castShadow

castShadow?: boolean

Whether the sprite casts shadows

Off by default because a billboarded sprite casts the shadow of its unturned quad, which doesn't turn with the camera and can thin to a sliver. In 'none' mode a sprite casts once it's 'opaque' or 'mask' and its front faces the light, though a masked one's shadow doesn't show its holes yet. A blended one, the default, casts nothing.

Default

false

Example

const sign = new Sprite3D({
  texture: signTexture,
  billboardMode: 'none',
  alphaMode: 'opaque',
  castShadow: true,
});

`Optional`children

children?: Container3D[]

Children to add, in order

Example

const car = new Container3D({ children: [body, frontWheels, rearWheels] });

`Optional`cursor

cursor?: string & {} | Cursor | null

CSS cursor shown while this node is the pointer's target

Only the target's own cursor counts, as in 2D: a hit on a 'passive' child shows its interactive ancestor's cursor, so set it on the node with the listeners. null shows the View3D's own cursor. Any CSS cursor value works, url(...) included.

Default

null

Example

button.cursor = 'pointer';
handle.cursor = 'grab';
blade.cursor = 'url("crosshair.png") 8 8, crosshair'; // custom, with a hotspot

See

https://developer.mozilla.org/en-US/docs/Web/CSS/cursor MDN Cursor Documentation

`Optional`depth

depth?: number

Target depth along z; sets scale.z from the local bounds of the node and its children

Example

const bench = new Container3D({ children: [benchMesh], depth: 0.5 });

`Optional`eventMode

eventMode?: EventMode

How this node takes part in pointer events, as on a pixi.js Container

'none': never picked, and neither is anything below it. The subtree costs nothing per pointer event.
'passive' (default): fires no listeners and is never the target. Under an interactive ancestor it is still picked, and the hit goes to that ancestor with this node's surface data. So one 'static' group makes its whole subtree clickable, with the group as target.
'auto': as 'passive', but ray-tested even with no interactive ancestor, which costs time and finds no target. Prefer 'passive'.
'static': picked against its hitVolume, and fires listeners.
'dynamic': as 'static', and the View3D also picks again while a mouse or pen is still, so a node that moves under it gets its enter and leave events.

The renderer's eventMode option only sets the default for 2D containers, and the View warns once when it isn't 'passive'. Picking costs time for each node that takes part, so set the mode on the nodes and groups that need it.

Default

'passive'

Example

button.eventMode = 'static';   // a clickable mesh
spinner.eventMode = 'dynamic'; // it moves under a still pointer
panel.eventMode = 'none';      // decoration; skip it and its children

// A whole model that answers as one target; its meshes need no setup
robot.eventMode = 'static';

`Optional`height

height?: number

The sprite's height in world units, in place of pixelSize on this axis; see Sprite3DOptions.width for how it combines with width

Example

const tree = new Sprite3D({ texture: treeTexture, height: 4 });

`Optional`hitVolume

hitVolume?: HitVolume3DInput

Shape the pointer ray is tested against when picking this node, like hitArea in 2D

Setting it doesn't make the node interactive; eventMode does that. Left null, a Mesh3D uses its geometry's bounding box and a plain Container3D has no shape, so it only hears events from its children.

A shape you set also clips the node's descendants, as hitArea does in 2D: a descendant only hits where the hit point is inside every such shape above it, whatever those nodes' eventMode. A clipped hit doesn't block what is behind it. A Geometry3D clips by its bounding box, an IHitVolume3D only through its optional containsPoint, and the default bounding box never clips. A ray that misses a Box or Sphere shape, or a Geometry3D's bounding box, skips the exact test of every descendant under it.

Default

null

Example

mesh.interactive = true;                  // picked by its bounding box
mesh.hitVolume = 'geometry';              // picked per triangle
mesh.hitVolume = new Sphere(center, 0.4); // a cheaper or tighter shape
mesh.hitVolume = null;                    // back to the bounding box

// Children of the porthole only pick inside its sphere
porthole.hitVolume = new Sphere(new Vector3(), 1);

See

HitVolume3DInput For what each accepted value resolves to.

`Optional`interactive

interactive?: boolean

Shorthand for eventMode, as on a pixi.js Container

true sets 'static' and false sets 'passive'. It reads true for 'static' and 'dynamic'. false doesn't stop picking: under an interactive ancestor, a 'passive' node is still picked on that ancestor's behalf. Set eventMode = 'none' to take a node and its subtree out of picking.

Example

mesh.interactive = true;  // eventMode = 'static'
mesh.interactive = false; // eventMode = 'passive'

`Optional`interactiveChildren

interactiveChildren?: boolean

Whether this node's descendants can be picked, as on a pixi.js Container

false takes the whole subtree out of picking: descendants neither hit nor block what is behind them, and cost nothing per pointer event. The node itself still picks by its own eventMode and volume, so it can answer for the subtree.

Default

true

Example

menu.interactiveChildren = false; // nothing in the menu can be picked
menu.interactiveChildren = true;  // every button picks again, eventMode intact

// One sphere answers for the whole robot: one ray test instead of one per mesh
robot.eventMode = 'static';
robot.hitVolume = new Sphere(new Vector3(), 2);
robot.interactiveChildren = false;

`Optional`label

label?: string | null

Name to find the node by; see Container3D#label

Default

null

Example

const turret = new Container3D({ label: 'turret' });

`Optional`material

material?: BaseMaterial3D<MaterialData, MaterialTextures, BaseMaterial3DOptions>

The material to draw the quad with; it needs a baseColor texture slot

It can be shared between sprites. Left out, the sprite makes an unlit, double-sided FlatMaterial of its own and frees it on destroy.

Example

const leaves = new Material3D({ baseColorTexture: leafTexture, alphaMode: 'mask' });
const card = new Sprite3D({ material: leaves, billboardMode: 'cylindrical' });

`Optional`onclick

onclick?: Pointer3DEventHandler | null

Property-based handler for the click event

Fired when a mouse click on this node completes, with any button but the right one.

Default

null

Example

mesh.eventMode = 'static';
mesh.onclick = (e) => {
  if (e.hit3D) marker.position.copyFrom(e.hit3D.point);
};

See

IFederatedContainer3D#onpointertap For the equivalent for every pointer type.

`Optional`oncontextmenu

oncontextmenu?: Pointer3DEventHandler | null

Property-based handler for the contextmenu event

Fired when the browser is about to open its context menu over this node; call preventDefault() to keep it closed.

Default

null

Example

mesh.oncontextmenu = (e) => {
  e.preventDefault();
  openMenuFor(mesh, e.global);
};

`Optional`onglobalmousemove

onglobalmousemove?: Pointer3DEventHandler | null

Property-based handler for the globalmousemove event

Fired on every mouse move, wherever the pointer is on the page.

Default

null

Example

mesh.onglobalmousemove = (e) => {
  if (dragging) dragTo(e.global);
};

See

IFederatedContainer3D#onglobalpointermove For the equivalent for every pointer type.

`Optional`onglobalpointermove

onglobalpointermove?: Pointer3DEventHandler | null

Property-based handler for the globalpointermove event

Fired on every pointer move on the page, whether or not the pointer is over this node. The node still needs eventMode 'static' or 'dynamic' to hear it.

Default

null

Example

// Keep a drag going once the pointer runs off the dragged mesh
mesh.onglobalpointermove = (e) => {
  const hit = dragging && view3d.screenToWorld(e.global, ground);
  if (hit) mesh.position.copyFrom(hit);
};

`Optional`onglobaltouchmove

onglobaltouchmove?: Pointer3DEventHandler | null

Property-based handler for the globaltouchmove event

Fired on every touch move, wherever the touch is on the page.

Default

null

Example

mesh.onglobaltouchmove = (e) => {
  if (dragging) dragTo(e.global);
};

See

IFederatedContainer3D#onglobalpointermove For the equivalent for every pointer type.

`Optional`onmousedown

onmousedown?: Pointer3DEventHandler | null

Property-based handler for the mousedown event

Fired when a mouse button other than the right one goes down over this node.

Default

null

Example

mesh.onmousedown = (e) => {
  if (e.button === 1) startPan(e.global); // middle button
};

See

IFederatedContainer3D#onpointerdown For the equivalent for every pointer type.

`Optional`onmouseenter

onmouseenter?: Pointer3DEventHandler | null

Property-based handler for the mouseenter event

Fired when the mouse enters this node. Doesn't bubble.

Default

null

Example

mesh.onmouseenter = () => (tooltip.visible = true);

See

IFederatedContainer3D#onpointerenter For the equivalent for every pointer type.

`Optional`onmouseleave

onmouseleave?: Pointer3DEventHandler | null

Property-based handler for the mouseleave event

Fired when the mouse leaves this node. Doesn't bubble.

Default

null

Example

mesh.onmouseleave = () => (tooltip.visible = false);

See

IFederatedContainer3D#onpointerleave For the equivalent for every pointer type.

`Optional`onmousemove

onmousemove?: Pointer3DEventHandler | null

Property-based handler for the mousemove event

Fired while the mouse moves across this node.

Default

null

Example

mesh.onmousemove = (e) => tooltip.position.copyFrom(e.global);

See

IFederatedContainer3D#onpointermove For the equivalent for every pointer type.

`Optional`onmouseout

onmouseout?: Pointer3DEventHandler | null

Property-based handler for the mouseout event

Fired when the mouse moves off this node. Bubbles, unlike mouseleave.

Default

null

Example

shelf.onmouseout = (e) => unhighlight(e.target3D);

See

IFederatedContainer3D#onpointerout For the equivalent for every pointer type.

`Optional`onmouseover

onmouseover?: Pointer3DEventHandler | null

Property-based handler for the mouseover event

Fired when the mouse moves onto this node. Bubbles, unlike mouseenter.

Default

null

Example

// One handler on the shelf hears every item on it
shelf.onmouseover = (e) => highlight(e.target3D);

See

IFederatedContainer3D#onpointerover For the equivalent for every pointer type.

`Optional`onmouseup

onmouseup?: Pointer3DEventHandler | null

Property-based handler for the mouseup event

Fired when a mouse button other than the right one is released over this node.

Default

null

Example

mesh.onmouseup = (e) => {
  if (e.button === 1) endPan();
};

See

IFederatedContainer3D#onpointerup For the equivalent for every pointer type.

`Optional`onmouseupoutside

onmouseupoutside?: Pointer3DEventHandler | null

Property-based handler for the mouseupoutside event

Fired when a mouse button that went down on this node is released anywhere else.

Default

null

Example

mesh.onmouseupoutside = () => endPan();

See

IFederatedContainer3D#onpointerupoutside For the equivalent for every pointer type.

`Optional`onpointercancel

onpointercancel?: Pointer3DEventHandler | null

Property-based handler for the pointercancel event

Never called: pixi delivers no pointer cancellation, in 2D either.

Default

null

Example

// End a drag on these two instead
handle.onpointerup = endDrag;
handle.onpointerupoutside = endDrag;

`Optional`onpointerdown

onpointerdown?: Pointer3DEventHandler | null

Property-based handler for the pointerdown event

Fired when a pointer goes down on this node: mouse, touch or pen alike.

Default

null

Example

handle.eventMode = 'static';
handle.onpointerdown = (e) => {
  if (!e.hit3D) return;
  dragOffset.copyFrom(e.hit3D.localPoint); // where on the handle it was grabbed
  dragging = true;
};

`Optional`onpointerenter

onpointerenter?: Pointer3DEventHandler | null

Property-based handler for the pointerenter event

Fired when a pointer enters this node. Doesn't bubble, so an ancestor hears it only when the pointer enters the ancestor itself.

Default

null

Example

button.eventMode = 'static';
button.onpointerenter = () => button.scale.set(1.1);

`Optional`onpointerleave

onpointerleave?: Pointer3DEventHandler | null

Property-based handler for the pointerleave event

Fired when a pointer leaves this node. Doesn't bubble.

Default

null

Example

button.onpointerleave = () => button.scale.set(1);

`Optional`onpointermove

onpointermove?: Pointer3DEventHandler | null

Property-based handler for the pointermove event

Fired while a pointer moves across this node.

Default

null

Example

// Trail the cursor across the surface it is over
table.eventMode = 'static';
table.onpointermove = (e) => {
  if (e.hit3D) cursorMarker.position.copyFrom(e.hit3D.point);
};

`Optional`onpointerout

onpointerout?: Pointer3DEventHandler | null

Property-based handler for the pointerout event

Fired when a pointer moves off this node. Bubbles, unlike pointerleave.

Default

null

Example

shelf.onpointerout = (e) => unhighlight(e.target3D);

`Optional`onpointerover

onpointerover?: Pointer3DEventHandler | null

Property-based handler for the pointerover event

Fired when a pointer moves onto this node. Bubbles, unlike pointerenter.

Default

null

Example

// One handler on the shelf hears every item on it
shelf.onpointerover = (e) => highlight(e.target3D);

`Optional`onpointertap

onpointertap?: Pointer3DEventHandler | null

Property-based handler for the pointertap event

Fired when a pointer completes a tap on this node, for any pointer type and any button, right clicks included.

Default

null

Example

// Works for mouse, touch and pen alike
mesh.eventMode = 'static';
mesh.onpointertap = (e) => select(e.target3D);

`Optional`onpointerup

onpointerup?: Pointer3DEventHandler | null

Property-based handler for the pointerup event

Fired when a pointer is released over this node.

Default

null

Example

handle.onpointerup = () => {
  dragging = false;
};

`Optional`onpointerupoutside

onpointerupoutside?: Pointer3DEventHandler | null

Property-based handler for the pointerupoutside event

Fired when a pointer that went down on this node is released anywhere else. The event's target3D is the node that was pressed, and hit3D is what the pointer was released over.

Default

null

Example

// The release that ends a drag usually happens off the mesh
handle.onpointerupoutside = () => {
  dragging = false;
};

`Optional`onrightclick

onrightclick?: Pointer3DEventHandler | null

Property-based handler for the rightclick event

Fired when a right click completes on this node.

Default

null

Example

mesh.onrightclick = () => openMenuFor(mesh);

`Optional`onrightdown

onrightdown?: Pointer3DEventHandler | null

Property-based handler for the rightdown event

Fired when the right mouse button goes down over this node.

Default

null

Example

mesh.onrightdown = (e) => startRotate(e.global);

`Optional`onrightup

onrightup?: Pointer3DEventHandler | null

Property-based handler for the rightup event

Fired when the right mouse button is released over this node.

Default

null

Example

mesh.onrightup = endRotate;

`Optional`onrightupoutside

onrightupoutside?: Pointer3DEventHandler | null

Property-based handler for the rightupoutside event

Fired when the right mouse button that went down on this node is released anywhere else.

Default

null

Example

mesh.onrightupoutside = endRotate;

`Optional`ontap

ontap?: Pointer3DEventHandler | null

Property-based handler for the tap event

Fired when a touch completes a tap on this node. Chrome gives each touch a new pointerId, and detail only counts repeat taps by the same one, so it stays 1 there; time a double tap yourself.

Default

null

Example

let lastTap = 0;
mesh.ontap = (e) => {
  if (e.timeStamp - lastTap < 300) focusOn(mesh); // double tap
  lastTap = e.timeStamp;
};

See

IFederatedContainer3D#onpointertap For the equivalent for every pointer type.

`Optional`ontouchcancel

ontouchcancel?: Pointer3DEventHandler | null

Property-based handler for the touchcancel event

Never called: pixi delivers no touch cancellation, in 2D either.

Default

null

Example

// End a drag on these two instead
handle.ontouchend = endDrag;
handle.ontouchendoutside = endDrag;

`Optional`ontouchend

ontouchend?: Pointer3DEventHandler | null

Property-based handler for the touchend event

Fired when a touch lifts off this node.

Default

null

Example

handle.ontouchend = endDrag;

See

IFederatedContainer3D#onpointerup For the equivalent for every pointer type.

`Optional`ontouchendoutside

ontouchendoutside?: Pointer3DEventHandler | null

Property-based handler for the touchendoutside event

Fired when a touch that started on this node lifts off anywhere else.

Default

null

Example

handle.ontouchendoutside = endDrag;

See

IFederatedContainer3D#onpointerupoutside For the equivalent for every pointer type.

`Optional`ontouchmove

ontouchmove?: Pointer3DEventHandler | null

Property-based handler for the touchmove event

Fired while a touch moves across this node.

Default

null

Example

canvasMesh.hitVolume = 'geometry'; // per triangle, so hits carry a uv
canvasMesh.ontouchmove = (e) => {
  if (e.hit3D) paintAt(e.hit3D.uv);
};

See

IFederatedContainer3D#onpointermove For the equivalent for every pointer type.

`Optional`ontouchstart

ontouchstart?: Pointer3DEventHandler | null

Property-based handler for the touchstart event

Fired when a touch lands on this node.

Default

null

Example

handle.ontouchstart = (e) => startDrag(e.pointerId);

See

IFederatedContainer3D#onpointerdown For the equivalent for every pointer type.

`Optional`onwheel

onwheel?: Wheel3DEventHandler | null

Property-based handler for the wheel event

Fired when the wheel turns while the pointer is over this node.

Default

null

Example

// Scroll to push the panel away from the camera
panel.eventMode = 'static';
panel.onwheel = (e) => {
  panel.position.z += e.deltaY * 0.01;
};

`Optional`origin

origin?: number | PointData3D

Point in local space that rotation and scale happen around; see Container3D#origin

Default

{ x: 0, y: 0, z: 0 }

Example

const hinge = new Container3D({ origin: { x: 0.5, y: 0, z: 0 } });

`Optional`parent

parent?: Container3D

Parent to add this node to, once everything else is applied

Example

const crate = new Container3D({ label: 'crate', parent: view.root });

`Optional`pixelSize

pixelSize?: number

World units per texture pixel, which sets the sprite's size

At the default 0.01 a 512 px texture is 5.12 units across, which suits a scene measured in metres.

Default

0.01

Example

const tile = new Sprite3D({ texture: tileTexture, pixelSize: 1 / 32 });

`Optional`position

position?: PointData3D

Local position

Default

{ x: 0, y: 0, z: 0 }

Example

const lamp = new Container3D({ position: { x: 0, y: 3, z: 0 } });

`Optional`quaternion

quaternion?: QuaternionData

Local rotation as a unit quaternion

Default

{ x: 0, y: 0, z: 0, w: 1 }

Example

const turned = new Container3D({ quaternion: { x: 0, y: Math.SQRT1_2, z: 0, w: Math.SQRT1_2 } });

`Optional`receiveShadow

receiveShadow?: boolean

Whether the sprite is shadowed

Only a lit material takes shadows, so it does nothing with the default FlatMaterial.

Default

true

Example

const card = new Sprite3D({ material: litLeaves, receiveShadow: false });

`Optional`rotation

rotation?: PointData3D

Local rotation as Euler angles in radians: turns around Z, then Y, then X, each about the parent's axes

Default

{ x: 0, y: 0, z: 0 }

Example

const turned = new Container3D({ rotation: { x: 0, y: Math.PI / 2, z: 0 } });

`Optional`scale

scale?: number | PointData3D

Local scale; a number scales all three axes

Default

Example

const giant = new Container3D({ scale: 3 });

`Optional`texture

texture?: Texture<TextureSource<any>>

The image on the quad

Its untrimmed pixel size times pixelSize sets the sprite's world size.

Default

a passed material's baseColor texture, else Texture.WHITE

Example

const tree = new Sprite3D({ texture: await Assets.load('tree.png') });

`Optional`tint

tint?: ColorSource

Colour multiplied into the texture, any ColorSource, as with Container.tint

Default

0xffffff

Example

const glow = new Sprite3D({ texture: glowTexture, tint: 0xffaa33 });

`Optional`visible

visible?: boolean

Whether this node and its descendants draw

Default

true

Example

const hiddenUntilSpawn = new Container3D({ visible: false });

`Optional`width

width?: number

The sprite's width in world units, in place of pixelSize on this axis

Pass only width or only height and the other follows the texture's aspect ratio: { height: 4 } on a 128×200 texture gives 2.56 × 4. Pass both to stretch the image to that box. It ends up in scale, as on pixi's 2D Sprite, but unlike there a lone width or height keeps the aspect ratio; the Sprite3D#width and Sprite3D#height accessors set one axis each.

It's measured against the texture once, at construction. A texture still loading has no size, so the value is dropped with a warning; size the sprite once it loads.

Example

const sign = new Sprite3D({ texture: signTexture, width: 2 });

`Optional`x

x?: number

Local position on x; the same as position.x

Example

const left = new Container3D({ x: -2 });

`Optional`y

y?: number

Local position on y; the same as position.y

Example

const shelf = new Container3D({ y: 1.2 });

`Optional`z

z?: number

Local position on z; the same as position.z

Example

const back = new Container3D({ z: -5 });

Interface Sprite3DOptions

Example

Hierarchy

Index

Properties

Properties

Optionalalpha

Default

Example

OptionalalphaCutoff

Default

Example

OptionalalphaMode

Default

Example

Optionalanchor

Default

Example

Optionalangle

Default

Example

OptionalbillboardMode

Default

Example

OptionalboundsVolume

Example

OptionalcastShadow

Default

Example

Optionalchildren

Example

Optionalcursor

Default

Example

See

Optionaldepth

Example

OptionaleventMode

Default

Example

Optionalheight

Example

OptionalhitVolume

Default

Example

See

Optionalinteractive

Example

OptionalinteractiveChildren

Default

Example

Optionallabel

Default

Example

Optionalmaterial

Example

Optionalonclick

Default

Example

See

Optionaloncontextmenu

Default

Example

Optionalonglobalmousemove

Default

Example

See

Optionalonglobalpointermove

Default

Example

Optionalonglobaltouchmove

Default

Example

See

Optionalonmousedown

Default

Example

See

Optionalonmouseenter

Default

`Optional`alpha

`Optional`alphaCutoff

`Optional`alphaMode

`Optional`anchor

`Optional`angle

`Optional`billboardMode

`Optional`boundsVolume

`Optional`castShadow

`Optional`children

`Optional`cursor

`Optional`depth

`Optional`eventMode

`Optional`height

`Optional`hitVolume

`Optional`interactive

`Optional`interactiveChildren

`Optional`label

`Optional`material

`Optional`onclick

`Optional`oncontextmenu

`Optional`onglobalmousemove

`Optional`onglobalpointermove

`Optional`onglobaltouchmove

`Optional`onmousedown

`Optional`onmouseenter

`Optional`onmouseleave

`Optional`onmousemove

`Optional`onmouseout

`Optional`onmouseover

`Optional`onmouseup

`Optional`onmouseupoutside

`Optional`onpointercancel

`Optional`onpointerdown

`Optional`onpointerenter

`Optional`onpointerleave

`Optional`onpointermove

`Optional`onpointerout

`Optional`onpointerover

`Optional`onpointertap

`Optional`onpointerup

`Optional`onpointerupoutside

`Optional`onrightclick

`Optional`onrightdown

`Optional`onrightup

`Optional`onrightupoutside

`Optional`ontap