ARを試してみてください.

5995 ワード
arjs ar テキストリンク
ヘイ!私はARを試みた!

本稿では、このアプリケーションの開発方法を説明します.
デモ:https://yuikoito.github.io/ar-sample/
ギタブhttps://github.com/yuikoito/ar-sample

セットアップ
次のドキュメントを作成して作成します.
https://ar-js-org.github.io/AR.js-Docs/
AR . jsの3種類があります.
  • イメージ追跡.特定のイメージを認識し、その上にモデルを表示します.
  • 位置ベースのAR .特定の場所にモデルを表示します.
  • マーカートラッキング.特定のマーカー位置にモデルを表示します.
    • 今回使用するタイプはマーカートラッキングです.
    あなたが使用するタイプに応じて、インポートする必要があるものにわずかな違いがあります.
    私はマーカートラッキングを使用するので、私は次のインポートする必要があります.
      <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
  <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
    現在、私はARを使うことができるように見えます.

    元のマーカーを使用する
    AR . jsは、あなたが使用したい場合は、次のように書くヒロと呼ばれる事前設定マーカーを持っています.
    <a-marker preset="hiro">
    この場合、私は自分のマーカーを使いたかったのでthis site を作成する.
    あなたが欲しいものは何でもイメージを変えることができます、しかし、現在、私はこれを使います.

    ダウンロードしたマーカーを資産フォルダーの下に設定します.
    <a-marker preset="custom" type="pattern" url="assets/pattern-marker.patt">
  // Set the model to be displayed in this.
</a-marker>

    オリジナルの3 Dモデルを表示
    たとえ自分のモデルを持っていなくてもa-text テキストを表示するにはa-box ボックスを表示するには、十分に前に準備されたものと遊ぶのは楽しいでしょう.
    今回は、良いウルフモデルをダウンロードしましたFree3D , それで、それを表示します.
    これはgltf フォーマットモデルなので、次のようにIDを指定します.
    <a-entity gltf-model="#wolf"></a-entity>
    モデルをロードするa-assets 前もって.
          <a-assets>
        <a-asset-item
          id="wolf"
          src="assets/Wolf-Blender-2.82a.glb"
        ></a-asset-item>
      </a-assets>
    今、私はそれを表示することができます.非常に簡単.
    コード全体.
      <body>
    <a-scene
      embedded
      arjs="sourceType: webcam; debugUIEnabled: false; detectionMode: mono_and_matrix; matrixCodeType: 3x3;"
    >
      <a-assets>
        <a-asset-item
          id="wolf"
          src="assets/Wolf-Blender-2.82a.glb"
        ></a-asset-item>
      </a-assets>

      <a-marker preset="custom" type="pattern" url="assets/pattern-marker.patt">
        <a-entity
          id="model"
          gltf-model="#wolf"
          position="0 0 1"
          scale="1 1 1"
          rotation="0 -90 60"
        >
        </a-entity>
      </a-marker>
      <a-entity camera></a-entity>
    </a-scene>
  </body>

    それだ!
    読書ありがとう.
    これは私の初めてのARを使用するが、それは本当に簡単だった.
    もっとやってみる
    🍎🍎🍎🍎🍎🍎
    必要ならメッセージを送ってください.
    [email protected]
    🍎🍎🍎🍎🍎🍎
    Linux(centos)jdk mysql redis tomcatのインストール
    Android——TabページジェスチャースライドのViewPager