ViroBox

A simple 3D box that is defined by width, height and length.

Example use:

JavaScript

<ViroBox
  height={2}
  length={2}
  width={2}
/>

Props

animation

Type	Description
ViroAnimation	A collection of parameters that determine if this component should animate. For more information on animated components please see our Animation Guide.

dragPlane

Type	Description
ViroDragPlane	When a drag type of "FixedToPlane" is given, dragging is limited to a user defined plane. The dragging behavior is then configured by this property (specified by a point on the plane and its normal vector). You can also limit the maximum distance the dragged object is allowed to travel away from the camera/controller (useful for situations where the user can drag an object towards infinity).

dragType

Type

Description

"FixedDistance" | "FixedToWorld" | "FixedDistanceOrigin" | "FixedToPlane"

Determines the behavior of drag if onDrag is specified. The default value is "FixedDistance". FixedDistance: Dragging is limited to a fixed radius around the user, dragged from the point at which the user has grabbed the geometry containing this draggable node FixedDistanceOrigin: Dragging is limited to a fixed radius around the user, dragged from the point of this node's position in world space. FixedToWorld: Dragging is based on intersection with real world objects. Available only in AR FixedToPlane: Dragging is limited to a fixed plane around the user. The configuration of this plane is defined by the dragPlane property.

height

Type	Description
number	The height of the box in 3D space. Default value is 1.

highAccuracyEvents

Type	Description
boolean	True if events should use the geometry of the object to determine if the user is interacting with this object. If false, the object's axis-aligned bounding box will be used instead. Enabling this is more accurate but takes more processing power, so it is set to false by default.

ignoreEventHandling

Type	Description
boolean	When set to true, this control will ignore events and not prevent controls behind it from receiving event callbacks. The default value is false.

lightReceivingBitMask

Type	Description
number	A bit mask that is bitwise and-ed (&) with each light's influenceBitMask. If the result is > 0, then the light will illuminate this object. For more information please see the Lighting and Materials Guide.

length

Type	Description
number	The length of the box in 3D space. Default value is 1.0.

materials

Type	Description
string[]	An array of strings that each represent a material that was created via ViroMaterials.createMaterials(). See ViroMaterials for more. A ViroBox can accept one material, which is used for all sides.

onClick

See ViroNode onClick.

onClickState

See ViroNode onClickState.

onCollision

See ViroNode onCollision.

onDrag

See ViroNode onDrag.

onFuse

See ViroNode onFuse.

onHover

See ViroNode onHover.

onPinch

See ViroNode onPinch.

onRotate

See ViroNode onRotate.

onScroll

See ViroNode onScroll.

onSwipe

See ViroNode onSwipe.

onTouch

See ViroNode onTouch.

onTransformUpdate

See ViroNode onTransformUpdate.

opacity

Type	Description
number	A number from 0 to 1 that specifies the opacity of the object. A value of 1 translates into a fully opaque object while 0 represents full transparency.

position

Type	Description
[number, number, number]	Cartesian position of the box in 3D world space, specified as [x, y, z].

physicsBody

Type	Description
Physics Body	Creates and binds a physics body that is configured with the provided collection of physics properties associated with this control.For more information on physics components, please see the Physics.

rotation

Type	Description
[number, number, number]	The rotation of the component around it's local axis specified as Euler angles [x, y, z]. Units for each angle are specified in degrees.

rotationPivot

Type	Description
[number, number, number]	Cartesian position in [x,y,z] about which rotation is applied relative to the component's position.

scale

Type	Description
[number, number, number]	The scale of the box in 3D space, specified as [x,y,z]. A scale of 1 represents the current size of the box. A scale value of < 1 will make the box proportionally smaller while a value >1 will make the box proportionally bigger along the specified axis.

scalePivot

Type	Description
[number, number, number]	Cartesian position in [x,y,z] from which scale is applied relative to the component's position.

shadowCastingBitMask

Type	Description
number	A bit mask that is bitwise and-ed (&) with each light's influenceBitMask. If the result is > 0, then this object will cast shadows from the light. For more information please see the Lighting and Materials Guide.

transformBehaviors

Type

Description

string[]

An array of transform constraints that affect the transform of the object. For example, putting the value "billboard" will ensure the box is facing the user as the user rotates their head on any axis. This is useful for icons or text where you'd like the box to always face the user at a particular rotation. Allowed values(values are case sensitive): "billboard": Billboard object on x,y,z axis "billboardX": Billboard object on the x axis "billboardY": Billboard object on the y axis "billboardZ": Billboard object on the z axis

viroTag

Type	Description
string	A tag given to other components when their physics body collides with this component's physics body. Refer to physics for more information.

visible

Type	Description
boolean	False if the box should be hidden. By default the box is visible and this value is true.

width

Type	Description
number	The width of the component in 3D space. Default value is 1.

renderingOrder

Type	Description
	This determines the order in which this Node is rendered relative to other Nodes. Nodes with greater rendering orders are rendered last. The default rendering order is zero. For example, setting a Node's rendering order to -1 will cause the Node to be rendered before all Nodes with rendering orders greater than or equal to 0.

Methods

async getBoundingBoxAsync()

Async function that returns the component's bounding box in world coordinates. Returns a Promise that will be completed with the following object:

JSON

{
  "boundingBox": {
    "minX": number,
    "maxX": number,
    "minY": number,
    "maxY": number,
    "minZ": number, 
    "maxZ": number
  }
}

async getTransformAsync()

Async function that returns the component's transform (position, scale and rotation).

Returns a transform object that contains "position", "scale" and "rotation" keys which point to number arrays

applyImpulse(force: number[], position: number[])

A function used with physics to apply an impulse (instantaneous) force to an object with a physics body.

Parameter	Description
force	an array of magnitudes to be applied as force (N) to the object in the positive x, y and z directions
position	a position relative to the object from which to apply the given force

applyTorqueImpulse(torque: number[], position: number[])

A function used with physics to apply an impulse (instantaneous) torque to an object with a physics body.

Parameter	Description
torque	an array of magnitudes to be applied as a torque (N * m) to the object in the positive x, y and z directions at the given position
position	a position relative to the object from which to apply the given torque

setVelocity(velocity: number[])

A function used with physics to set the velocity of an object with a physics body.

Parameter	Description
velocity	an array of numbers corresponding to x, y, and z velocity

setNativeProps(nativeProps)

A wrapper function around the native component's setNativeProps which allow users to set values on the native component without changing state/setting props and re-rendering. Refer to the React Native documentation on Direct Manipulation for more information.

Parameter	Description
nativeProps	an object where the keys are the properties to set and the values are the values to set

JavaScript

componentRef.setNativeProps({ position: [0, 0, -1] });