Viro: Crosshair in AR

[draperunner]

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?

[rafthedeveloper]

Couldn't you implement this as a standard react native component that lives within the same render function as the ARSceneNavigator?

You can't render react native components in the scene itself, so it could be a sibling of the ARSceneNavigator, like so:

render() {
  return (
    {this._renderARSceneNavigator()}
    {this._renderCrossHair()}
   )
}

Then you can give the crosshair whatever styles needed to position it in the center.

[cjrorvik]

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