AR.js研究ノート

中国語のドキュメントリンク：

ホーム|AR.jsAR.jsは、画像追跡、位置ベースのAR、マーカー追跡などの機能を備えたWeb側拡張現実向けの軽量フレームワークです。http://febeacon.com/arjs-docs-zh-cn/routes/ AR.jsはA-Frameに依存しているため、ドキュメントを理解したい場合は、最初にA-Frameを読む必要があります。
はじめに-A-Frame中国語ドキュメント-温江ブログA-フレームとは何ですか？-Frameは、仮想現実（VR）アプリケーションを構築するためのWeb開発フレームワークです。WebVRのイニシエーターであるMozillaVRチームによって開発された、WebVRコンテンツを開発するための現在の主流の技術ソリューションです。WebVRは完全にオープンソースのプロジェクトであり、主要なVRコミュニティに成長しています… https：//www.wenjiangs.com/doc/aframe-introduceの記事はおそらく読むのに十分であり、必要に応じて注意深く読むことができます。

それを読んだ後、記事に例を貼り付けて実行しましょう：

これは画像追跡のコードです。カメラを開くには、アクセスがHTTPSプロトコルである必要があることに注意してください。ウィンドウに付属のIISマネージャーによって構築されたHTTPS Webサイトを使用します（IISマネージャーはBaiduを単独で使用できません）。注意してくださいここにロードされているいくつかのリソースはすべて海外のアドレスです。最初にローカルでダウンロードすることをお勧めします。

<script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>

<style>
  .arjs-loader {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .arjs-loader div {
    text-align: center;
    font-size: 1.25em;
    color: white;
  }
</style>

<body style="margin : 0px; overflow: hidden;">
  <!--图像加载前显示加载中...-->
  <div class="arjs-loader">
    <div>Loading, please wait...</div>
  </div>
  <a-scene
    vr-mode-ui="enabled: false;"
    renderer="logarithmicDepthBuffer: true;"
    embedded
    arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;"
  >
    <!--我们使用了 cors 代理来避免跨域问题-->
    <a-nft
      type="nft"
      url="https://arjs-cors-proxy.herokuapp.com/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="https://arjs-cors-proxy.herokuapp.com/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/scene.gltf"
        scale="5 5 5"
        position="50 150 0"
      >
      </a-entity>
    </a-nft>
    <a-entity camera></a-entity>
  </a-scene>
</body>

次に、このページを開き、この写真をスキャンして、arの効果を確認します。

画像を変更したい場合は、このページで画像を変換できます。画像の解像度が高いほど、認識効果が高くなります。

NFT-Creator-Web https://carnaux.github.io/NFT-Marker-Creator/#/ダウンロード後、サフィックスを書き込まずにa-nftタグのURLを置き換えます。3つのファイルがダウンロードされ、同じ場所に配置されます。ディレクトリ。

SketchUpをモデルとして使用でき、3Dmaxよりもシンプルに見え、特別な調査はありません。

モデルが完成したら、このプラグインを使用してgltf形式のファイルをエクスポートし、a-entityタグのgltf-modelを置き換えます。これにより、作成したモデルを確認できます。

glTFのエクスポート（glTFエクスポート）-SUプラグイン百科事典https://www.suplugin.com/gltf-export/

現在、自分で作った画像表示モデルは特定できますが、場所がわからず、場所が違うことが多く、揺れています。私が研究を終えた後、私はあなたとそれを共有し続けて効果を示します

おすすめ