search

sabomate / AR-video_viewer

0 stars 0 forks source link

画像マーカーでオブジェクトを配置してみたいぜっ！ #10

Closed tagahei closed 8 months ago

tagahei commented 8 months ago

やりたいこと

ImageTrackingが意外といけそうな雰囲気あるので，とりあえず適当な画像をmarker化して，認識&オブジェクト配置までができるかどうか確認してみようぜよ

ImageTracking詳細

tagahei commented 8 months ago

Image Tracking

NFT Marker Creator でマーカーにしたい画像をアップロードして，画像の特徴点を示すImage Descriptorsを作成する それをダウンロードして認識するコードでいろいろ書く感じ

サンプルは恐竜の画像から🦖オブジェクト表示 ...うごかないけど

参考になりそう

tagahei commented 8 months ago

AR.jsとA-Frameを使ってスマホでWebAR

うごくさんぷるみっけ！

tagahei commented 8 months ago

生成したImage Descriptorsの指定ができない

urlで生成したImage Descriptorsのディレクトリを指定するらしいのだが，404ってなる

      <a-nft
        type="nft"  
        url="./descriptors/Sabomate"
        smooth="true"
        smoothCount="10"
        smoothTolerance=".01"
        smoothThreshold="5"
      >
        <a-box position="80 80 0" scale="70 70 70" color="tomato" wireframe="true" animation="property: rotation; to: 0 360 0; loop: true; dur: 20000" ></a-box>
      </a-nft>
      <a-entity camera></a-entity>
    </a-scene>

www2上にせっちしたらCORSエラーが発生する（.httac)を設置してもダメやった

url="https://arjs-cors-proxy.www2.yoslab.net/~minari/sample/dinaso"
tagahei commented 8 months ago

これは動いた！ ImageTracckingサンプルページ

tagahei commented 8 months ago

src直下で相対パスをsrcから書いたら行けた

      <a-nft
        type="nft"  
        url="/src/descriptors/Sabomate"
        smooth="true"
        smoothCount="10"
        smoothTolerance=".01"
        smoothThreshold="5"
      >
        <a-box position="80 80 0" scale="70 70 70" color="tomato" wireframe="true" animation="property: rotation; to: 0 360 0; loop: true; dur: 20000" ></a-box>
      </a-nft>
      <a-entity camera></a-entity>
    </a-scene>