web-dev-qa-db-ja.com

カスタムマーカーを使用することは可能ですか？

以下のような「ヒロ」マーカーに似ていない特注のマーカーを使用することは可能ですか？ランダムな形状（たとえば、赤い楕円形）をマーカーとして使用できる可能性はありますか？

これが現在サポートされていない場合、誰かが私にこの機能の構築を開始する可能性のある正しい方向を教えてもらえますか？

enter image description here

javascriptthree.jsaugmented-realityaframe
8
Anthony Budd

AR.js カスタムマーカーをサポートします。 マーカージェネレーター でばかげた画像を作成します。

マーカーを使用することをar.jsに知らせます。

<a-marker type="pattern" url="patterns/mypattern.patt">
      <a-entity myobject></a-entity>
</a-marker>

と出来上がり。 this 画像を使用してこの グリッチ で確認できます。

9
Piotr Adam Milewski

1。プリセット= "パターン"

まず、生のjsスクリプトを見ると： https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js 、preset="custom"がないことに気付くでしょう。 else ifで。たとえば、else if( _this.data.preset === 'kanji' ){を検索します。

ただし、preset="pattern"があります。したがって、ドキュメントを無視してpreset="pattern"を設定します。例：

<a-marker preset="pattern" type="pattern" url="img/pattern-marker.patt"> <a-box position='0 0.5 0' material='color: black;' soundhandler></a-box> </a-marker>

2。 .pattをGitHubにアップロードして、ファイルを解決できるようにします

次に、私の.pattがローカルで取得されていなかったため、url="img/pattern-marker.patt"が機能しない可能性があります。この.pattファイルをGitHubにプッシュし、raw.githubusercontentを使用して参照します。

例

私のパターンを使用してこれをテストできます。 https://raw.githubusercontent.com/lbelfield/augmented-reality/master/src/components/trainTicket/train-ticket.patt 。

マーカーの画像は以下のとおりです： https://github.com/lbelfield/augmented-reality/blob/master/src/components/trainTicket/train-ticket.png

React-Web-AR：これはあなたには当てはまりませんが、誰かが私のようにReact-Web-ARを使用している場合は、これを使用してください：

<Marker parameters={{ preset: 'pattern', type: 'pattern', patternUrl: 'https://raw.githubusercontent.com/lbelfield/augmented-reality/master/src/components/trainTicket/train-ticket.patt', url: 'https://raw.githubusercontent.com/lbelfield/augmented-reality/master/src/components/trainTicket/train-ticket.patt' }}>

4
Belfield