ViroARObjectMarker

📘

Unsupported platform: Android

This component is currently available only for iOS, specifically for iOS 12+/ARKit 2.0+

ViroARObjectMarker is a component that attempts to find the given target in the user's view allowing the developer to place objects with respect to the object or to determine their location relative to the object target.

This component has the exact same signature as ViroARImageMarker but its target uses the new "Object" target type.

You can create an .arobject file through the instructions here (download the sample app, build it, scan your object, and send it to your computer):
https://developer.apple.com/documentation/arkit/scanning_and_detecting_3d_objects?language=objc

If you are running into file path issues, make sure your metro.config.js file has been updated with the correct extensions -> Adding Asset Types.

Example use:

JavaScript

// Register the target
ViroARTrackingTargets.createTargets({
  "targetOne": {
    source: require('./res/targetOne.arobject'),
    type: 'Object'
  },
});


<ViroARObjectMarker target={"targetOne"}>
  <ViroBox position={[0, .25, 0]} scale={[.5, .5, .5]} />
</ViroARObjectMarker>

Props

target (* required)

Type	Description
string	Name of the object target created with ViroARTrackingTargets.

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.

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.

onAnchorFound

Type	Description
(anchor) => void	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

onAnchorRemoved

Type	Description
() => void	Called when this component is detached from a plane and is no longer visible.

onAnchorUpdated

Type	Description
(anchor) => void	Called when the plane to which this component is anchored is updated. See Anchor

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 container. A value of 1 translates into a fully opaque node while 0 represents full transparency.

pauseUpdates

Type	Description
boolean	True/False to stop the automatic positioning/rotation of children components of a ViroARPlane. This does not stop onAnchorUpdated from being called.

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 container should be hidden. By default the container is visible and this value is true.

renderingOrder

Type	Description
number	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.

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.

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.

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

Methods

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	Type	Description
nativeProps	object	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] });