Marker based AR not working
retr00h opened this issue · 1 comments
retr00h commented
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
ViroConstants
toViroTrackingStateConstants
- Add
import { ViroARImageMarker, ViroARTrackingTargets } from '@viro-community/react-viro'
to the imports - Download this image, rename it as
logo.png
and 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
return
function defined in theHelloWorldAR
function, 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