ViroARImageMarker
ViroARImageMarker 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 image or to determine their location relative to the image target.
Example use:
// Register the target
ViroARTrackingTargets.createTargets({
"targetOne": {
source: require('res/targetOne.html'),
orientation: "Up",
physicalWidth: 0.1 // real world width in meters
},
});
<ViroARImageMarker target={"targetOne"}>
<ViroBox position={[0, .25, 0]} scale={[.5, .5, .5]} />
</ViroARImageMarker>
Props
target (* required)
| Type | Description |
|---|---|
| string | Name of the image 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 for more. |
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 anchor is update. For image markers, there's additional information provided in the returned anchor. See Anchor for more. |
onClick
See ViroNode onClick.
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.
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. |
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 |
componentRef.setNativeProps({ position: [0, 0, -1] });
Updated over 2 years ago