Posted in Uncategorized

Crosshair in AR

   September 23, 2020  1 Comment on Crosshair in AR

Hi!

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?

Full dicussion on github.com

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}/>
        </View>)
    }
}

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',
    },
})