ViroARPlaneSelector

The ViroARPlaneSelector is a composite component written entirely in React Native leveraging ViroARPlane that provides developers with an easy way to have the end user select a plane they want to use. This component surfaces all the same properties as ViroARPlane but rather than attaching the developer's components to the first surface found, it presents end users with white, transparent surfaces which they can select to indicate where they want to have their AR experience.

Example use:
<ViroARPlaneSelector
    minHeight={.5}
    minWidth={.5}
    onPlaneSelected={...}
>
    <ViroBox
        position={[0, .25, 0]}
        scale={[.5, .5, .5]}
    />
    ...
</ViroARPlaneSelector>

Props

alignment

TypeDescription
"Horizontal" |"HorizontalUpward" | "HorizontalDownward" | "Vertical"Don't forget to set the anchorDetectionTypes prop of ViroARScene to tell the AR Session what type of planes to discover.

Note: "HorizontalUpward" and "HorizontalDownward" are only supported in Android.

Specifies the desired alignment of a plane that this component will "anchor" to.

The default value is "Horizontal".

dragPlane

TypeDescription
ViroDragPlaneWhen 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

TypeDescription
"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.

ignoreEventHandling

TypeDescription
booleanWhen set to true, this control will ignore events and not prevent controls behind it from receiving event callbacks.

The default value is false.

maxPlanes

TypeDescription
numberThe number of planes to present to the end user for them to select. If the AR system discovers more planes than this number, then it will only display the first maxPlanes number of planes to the end user.The default value is 15.

minHeight

TypeDescription
numberSpecifies the minimum height, in meters, of a plane that this component will "anchor" to.

The default value is 0.

minWidth

TypeDescription
numberSpecifies the minimum width, in meters, of a plane that this component will "anchor" to.

The default value is 0.

onAnchorFound

TypeDescription
(anchor) => voidDeveloper should instead listen to onPlaneSelected

Called when this component is anchored to a plane that is at least minHeight by minWidth large. This is when the component is made visible.

See Anchor for more.

onAnchorRemoved

TypeDescription
() => voidCalled when this component is detached from a plane and is no longer visible.

onAnchorUpdated

TypeDescription
(anchor) => voidCalled when the plane to which this component is anchored is updated.

See Anchor for more.

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.

onPlaneSelected

TypeDescription
() => voidThis function is called when the end user has selected a plane to use.

onRotate

See ViroNode onRotate.

onScroll

See ViroNode onScroll.

onSwipe

See ViroNode onSwipe.

onTouch

See ViroNode onTouch.

opacity

TypeDescription
numberA number from 0 to 1 that specifies the opacity of the container. A value of 1 translates into a fully opaque node while 0 represents full transparency.

viroTag

TypeDescription
stringA tag given to other components when their physics body collides with this component's physics body. Refer to physics for more information.

visible

TypeDescription
booleanFalse if the container should be hidden. By default the container is visible and this value is true.

renderingOrder

TypeDescription
numberThis 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.

rotation

TypeDescription
[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.

scale

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

transformBehaviors

TypeDescription
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

Anchor

This is the object given to the developer through the onAnchorFound and onAnchorUpdated callback functions.

KeyTypeValue
position[number, number, number]Position of the attached plane in world coordinates.
rotation[number, number, number]Rotation of the attached plane in world coordinates.
center[number, number, number]Center of the underlying plane relative to the plane's position.
widthnumberCurrent width of the attached plane
heightnumberCurrent height of the attached plane

Methods

reset()

This function resets the ARPlaneSelector back to the "selection" state which presents the end user with all planes that have been found by the AR system (up to maxPlanes number of planes).