🥽

【React Native × AR】画像を認識してARを表示する

2025/01/14に公開

はじめに

ReactVisionを使用してARの技術検証を行っています。その時のメモを残します。

https://github.com/ReactVision
https://viro-community.readme.io/

expoSDKは古いものを使用しているため注意が必要です。

"@reactvision/react-viro": "^2.41.6",
"expo": "~50.0.4",

画像を認識してARを表示する

viroで画像を認識してARを表示するために必要なもの

  • ViroARTrackingTargets
  • ViroARImageMarker

https://viro-community.readme.io/docs/viroartrackingtargets
https://viro-community.readme.io/docs/viroarimagemarker#onanchorremoved

トリガーとなる画像を設置

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