|Anazawa
ブログ技術XR
どうも穴澤です。
先日「Image Tracking」のサンプルを動かしてみて、他の画像を認識させてみたくなりました。
ということで、手元にあった名刺を認識して恐竜を出してみます。
任意の画像を認識できるようにする
今回もGithubのドキュメントを参考にします。
まず任意の画像を認識できるように、NFT Marker Creatorで作成します。
「Click or drag image」に任意の画像を選択します。
今回は私の名刺（裏側）を使用しました。
しばらくすると、３つのファイルがダウンロードされます。
ダウンロードされたら認識画像の作成は終了です。
任意の画像を認識させる
前回のサンプルソースを修正します。
前回
<body style="margin : 0px; overflow: hidden;">
<!-- minimal loader shown until image descriptors are loaded -->
Loading, please wait...
<a-scene
vr-mode-ui="enabled: false;"
renderer="logarithmicDepthBuffer: true; precision: medium;"
embedded
arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;"
>
<!-- we use cors proxy to avoid cross-origin problems ATTENTION! you need to set up your server -->
<a-nft
type="nft"
url="your-server/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/trex-image/trex"
smooth="true"
smoothCount="10"
smoothTolerance=".01"
smoothThreshold="5"
>
<a-entity
gltf-model="your-server/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/scene.gltf"
scale="5 5 5"
position="150 300 -100"
>
</a-entity>
</a-nft>
<a-entity camera></a-entity>
</a-scene>
</body>
今回
<body style="margin : 0px; overflow: hidden;">
<!-- minimal loader shown until image descriptors are loaded -->
Loading, please wait...
<a-scene
vr-mode-ui="enabled: false;"
renderer="logarithmicDepthBuffer: true; precision: medium;"
embedded
arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;"
>
<!-- we use cors proxy to avoid cross-origin problems ATTENTION! you need to set up your server -->
<a-nft
type="nft"
url="https://xxx.github.io/namecard/work/material/marker/namecard"
smooth="true"
smoothCount="10"
smoothTolerance=".01"
smoothThreshold="5"
>
<a-entity
gltf-model="your-server/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/scene.gltf"
scale="5 5 5"
position="150 300 -100"
>
</a-entity>
</a-nft>
<a-entity camera></a-entity>
</a-scene>
</body>
変更点は39行目を作成したファイルに置き換えるだけです。
注意点は３ファイル同じところに置き、urlを指定する際は拡張子を記載せずに指定します。
試してみよう
名刺をカメラで読み取ると恐竜が出てきたので成功です。
結果
恐竜が出てきたので成功です。
ここまでくると恐竜を別のオブジェクトに変更したくなりました。
次回、機会があれば恐竜以外を表示させたいと思います。
