viro
viro copied to clipboard
Marker based AR not working
Environment
Please provide the following information about your environment:
- Development OS: Windows
- Device OS & Version: Android 11.
- Version: ViroReact version 2.20.2, React Native version 0.65.1
- Device(s): tested on Samsung Galaxy A50
Description
I have to display some text in AR when a certain image is detected. I have followed the documentation but the text is not appearing (or the image is not being recognized).
Reproducible Demo
- Clone the Viro starter kit repository
- Refactor
ViroConstantstoViroTrackingStateConstants - Add
import { ViroARImageMarker, ViroARTrackingTargets } from '@viro-community/react-viro'to the imports - Download this image, rename it as
logo.pngand place it in the same directory asApp.js - Paste this right after the imports in order to register the image as a marker:
ViroARTrackingTargets.createTargets({
"logo": {
source: require('./logo.png'),
orientation: "Up",
physicalWidth: 0.1 // real world width in meters
type: "Image"
},
});
- In the
returnfunction defined in theHelloWorldARfunction, enclose the<ViroText>in a<ViroARImageMarker target={"logo"}>tag; it should result in this:
return (
<ViroARScene onTrackingUpdated={onInitialized}>
<ViroARImageMarker target={"logo"}>
<ViroText
text={text}
scale={[0.5, 0.5, 0.5]}
position={[0, 0, -1]}
style={styles.helloWorldTextStyle}
/>
</ViroARImageMarker>
</ViroARScene>
);
- At this point the app should display a "Hello World" text over that image when pointing the camera at it, but this isn't happening
@retr00h did you find a solution?