No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

AugmentedRealityHitTest

Immersive augmented reality view that reacts to hit tests

AugmentedRealityHitTest showa a target when the hit test finds a surface and reacts to onHitTestSelect event when user selects

Select image to show:
Augmented reality is not supported in this browser
NameDescriptionDefault
id
string
-
className
string
-
style
CSSProperties
-
startStopComponent
Component to use to start/stop the session rather than the default button
((props: StartComponentProps) => Element)
-
unsupportedComponent
Component to use to display messages when augmented reality is not supported rather than the default message
((props: UnsupportedReasonProps) => Element)
-
showStats
Indicates whether to show the stats box
boolean
true
images
Array of images in gltf format to be displayed in the view
GltfImage[]
-
children
Content to overlay in the augmented reality view
ReactNode
-
showTarget
Boolean indicating whether to display the hit test target
boolean
-
targetImageUrl
Url of a gltf image to use instead of the default image to show the current hit test target
string
-
onHitTestSelect
Event called when a hit test target has been selected by the user
((matrix: Float32Array) => void)
-

Stories

With Invisible Target

Augmented reality is not supported in this browser

With Custom Target Image

Augmented reality is not supported in this browser