🥽
【React Native × AR】画像を認識してARを表示する
はじめに
ReactVisionを使用してARの技術検証を行っています。その時のメモを残します。
expoSDKは古いものを使用しているため注意が必要です。
"@reactvision/react-viro": "^2.41.6",
"expo": "~50.0.4",
画像を認識してARを表示する
viroで画像を認識してARを表示するために必要なもの
- ViroARTrackingTargets
- ViroARImageMarker
トリガーとなる画像を設置
assets/ar/starbucks.jpg
を設置しておきます。
トリガーとなる画像を登録
ViroARTrackingTargets
を使用し、ARを表示するトリガーとなる画像を指定します。
"targetOne"というキーで登録します。
ViroARTrackingTargets.createTargets({
targetOne: {
source: require("../../assets/ar/starbucks.jpg"),
orientation: "Up",
physicalWidth: 0.15, // 画像の物理的な幅(m)
type: "Image",
},
});
画像認識時に表示されるオブジェクトを登録
ViroARImageMarker
を使用し、画像認識した際に表示されるオブジェクトをラップします。
targetにトリガーとなるターゲットのキー(今回は"targetOne")を指定します。
<ViroARScene onTrackingUpdated={onInitialized}>
<ViroARImageMarker
target={"targetOne"}
onAnchorFound={() => console.log("Image detected: targetOne")}
onAnchorRemoved={() => console.log("Image removed: targetOne")}
onAnchorUpdated={() => console.log("Image updated: targetOne")}
>
<ViroText
text="STARBACKS!"
scale={[0.2, 0.2, 0.2]}
style={styles.helloWorldTextStyle}
onDrag={(position) => {
console.log("position", position);
}}
/>
</ViroARImageMarker>
</ViroARScene>
これらのコールバック (onAnchorFound
, onAnchorRemoved
, onAnchorUpdated
) は、AR体験中に ターゲット画像がカメラの視界に入ったり、離れたり、または位置や状態が変化した際にトリガーされるイベントを追跡します。
表示されたAR
まとめ
今後もReactVisionを使用したAR検証メモを残していきます!
Discussion