Crosshair in AR


I am using findCollisionsWithRayAsync to find objects that the user is aiming at with the camera. I would like to add a crosshair to the center of the screen (that is, the default camera’s position), to make it easier for the user to know where he is aiming.

How should I proceed in order to do this? I have tried placing a ViroBox right in front of the camera. The problem with this is that it lags when moving the camera around, and it is kind of overkill. I just need a static, 2d cross stuck to the middle of the screen, so why render a 3d box.

I guess this issue generalizes to implementing a HUD of any kind on the camera view, like buttons and texts that are bound to screen dimensions, not world dimensions.

Any tips on how I can proceed?

1 possible answer(s) on “Crosshair in AR

  1. Implemented a crosshair in this way. Works pretty nice with the v.2.2.0 onHover on 3dObjects update.

    import { Dimensions, StyleSheet, View } from 'react-native'
      render() {
         return (<View style={{ flex: 1 }}>
                <ViroARSceneNavigator initialScene={{ scene: ArScene }} apiKey={API_KEY}/>
                <View style={styles.crosshair}/>
    const styles = StyleSheet.create({
        crosshair: {
            position: 'absolute',
            top: (Dimensions.get('window').height / 2),
            left: (Dimensions.get('window').width / 2),
            width: 20,
            height: 20,
            borderRadius: 15,
            borderWidth: 1,
            backgroundColor: 'grey',