金子邦彦研究室 ▶ ３次元，地図 ▶ A-Frame の利用 ▶ パソコンで，Web サーバを立ち上げ，Web でマーカーベースの AR システムを動かしてみる（A-Frame, AR.js, Python を使用）

サイトマップ サイト内検索 まとめ

サイトの全体構成

パソコンで，Web サーバを立ち上げ，Web でマーカーベースの AR システムを動かしてみる（A-Frame, AR.js, Python を使用）

全体構成 人工知能 ３次元，地図 プログラミング 情報工学全般 インストール 支援 連絡先，業績
A-Frame, AR.js を用いて，パソコンで，マーカーベースの AR を動かしてみる． 所定の hiro マーカー（画像）をパソコンのカメラで撮影すると，それを読み取って，３次元のオブジェクトが現れる．それを Web ブラウザで動かす．

A-Frame: https://aframe.io

AR.js: https://github.com/jeromeetienne/AR.js

謝辞：ここで紹介するソフトウェアの作者に感謝します．

参考Webページ

https://medium.com/@akashkuttappa/using-3d-models-with-ar-js-and-a-frame-84d462efe498

前準備

Python のインストール（Windows 上）

【サイト内の関連ページ】

【関連する外部ページ】

Python の公式ページ: https://www.python.org/

パソコンで，マーカーベースの AR システムを動かしてみる（A-Frame, AR.js を使用）

ここで行うこと：hiro マーカーにより，箱（Box）を表示する Web ページを作る．Web サーバを稼働させ，Web ブラウザでこの Web ページが動くようにする．

  1. カメラ付きのパソコンを準備する．
  2. 作業用のフォルダ（ディレクトリ）を作る．

    名前は何でもよいが，日本語を含まないものがよい．

    [image]
  3. HTML ファイルを作成． いま作成した作業用のフォルダ（ディレクトリ）に， a.html のようなファイル名で保存する．

    次のページに記載のサンプルプログラムのうち，マーカーベースの AR のものを使う．（タイプミスと思われる部分を修正，a-box を使うように変更，URLを最新にものに修正など）．

    https://ar-js-org.github.io/AR.js-Docs/#getting-started 

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width">
    <title>marker AR</title>
    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
    <!-- we import arjs version without NFT but with marker + location based support -->
    <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
  </head>

  <body style="margin:0px; overflow:hidden;">
    <a-scene embedded arjs>
      <a-marker preset="hiro">
        <a-box position="0 0.5 0" wireframe="true"></a-box>
      </a-marker>
      <a-entity camera></a-entity>
    </a-scene>
  </body>
</html>
  4. Web サーバを稼働させる
    1. Windows で，コマンドプロンプトを実行．
    2. 「cd」コマンドで，先ほど作成した作業用ディレクトリに，カレントディレクトリを移動．
    3. Web サーバを稼働させる

      次のコマンドを実行． 

      python -m http.server 80
  5. 試しに，Webブラウザで表示してみる．
    1. Web ブラウザで次のURL を開く

      http://localhost/a.html

      [image]

      ※ カメラの使用の許可についての表示が出た場合には許可する．

      [image]
    2. カメラ画像が現れるので確認する．

      [image]
  6. 今度は，次の URL から，マーカー画像 hiro.png をダウンロードし，パソコンの画面に表示する．

    https://github.com/AR-js-org/AR.js/blob/master/data/images/hiro.png

    [image]
  7. 先ほどの HTML ファイルでは，マーカーを「hiro」に設定していた．

    カメラで，マーカー画像 hiro.pngを撮影すると，箱が現れるので確認する．

    [image]

オブジェクトデータの作成（Blender を利用）

.obj 形式ファイル，.mtl 形式ファイルを準備する． できたファイルは次のとおりである．

ここでは，Blender を用いる．

Windows でのBlender のインストールは，別ページ »で説明している．

Blender の使い方については，別ページ »にまとめ

  1. Blender でオブジェクトを編集

    [image]
  2. 「ファイル」→「エクスポート」「→Wavefront (.obj)」 と操作する．

    [image]
  3. ディレクトリ（フォルダ）名と，ファイル名を指定して， 「OBJ をエクスポート」をクリック．

    [image]
  4. .obj 形式ファイル，.mtl 形式ファイルができるので確認する

    [image]
  • .obj 形式ファイル，.mtl 形式ファイルは， 作業用のフォルダ（ディレクトリ）にコピーする．

    HTML ファイルの作成

    いま作成した作業用のフォルダ（ディレクトリ）に， b.html のようなファイル名で保存する． 

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width">
    <title>marker AR</title>
    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
    <!-- we import arjs version without NFT but with marker + location based support -->
    <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
  </head>

  <body style="margin:0px; overflow:hidden;">
    <a-scene embedded arjs>
      <a-marker preset="hiro">
        <a-entity
          position="0 0 0"
          scale="0.5 0.5 0.5"
          obj-model="obj:url(./a.obj); mtl:url(./a.mtl)">
        </a-entity>
      </a-marker>
      <a-entity camera></a-entity>
    </a-scene>
  </body>
</html>

    Web で表示

    1. Web サーバを稼働させる

      もし，Web サーバが稼働していなければ，次の手順で稼働させる．

      1. Windows で，コマンドプロンプトを実行．
      2. 「cd」コマンドで，先ほど作成した作業用ディレクトリに，カレントディレクトリを移動．
      3. Web サーバを稼働させる

        次のコマンドを実行． 

        python -m http.server 80
    2. 試しに，Webブラウザで表示してみる．
      1. Web ブラウザで次のURL を開く

        http://localhost/b.html

      2. 次の URL から，マーカー画像 hiro.png をダウンロードし，パソコンの画面に表示する．（先ほどと同じ画像である）

        https://github.com/AR-js-org/AR.js/blob/master/data/images/hiro.png

        [image]
      3. 先ほどの HTML ファイルでは，マーカーを「hiro」に設定していた．

        カメラで，マーカー画像 hiro.pngを撮影すると，３次元オブジェクトが現れるので確認する．

        [image]
      4. マーカーを大きく表示すると，３次元オブジェクトも大きく表示される．

        マーカーの場所，大きさ，傾きの応じて３次元オブジェクトが表示される．

        [image]

    本サイトは金子邦彦研究室のWebページである．

    資料等の公開では，原則，「クリエイティブコモンズ BY NC SA」として公開するようにしている． PDFファイル，パワーポイントファイルなどには， 「クリエイティブコモンズ BY NC SA」を明記するとともに，ロゴを記載するようにしている（作業が間に合っていない分もあるのでご容赦ください）．

    公開している資料をご利用になる場合の，再配布の条件，剽窃の防止などについて，別ページ »で説明 再配布や資料改変の際には，そのページをご確認ください．

    サイトマップは，サイトマップのページをご覧下さい． 本サイト内の検索は，サイト内検索のページをご利用下さい．

    問い合わせ先： 金子邦彦（かねこ くにひこ） [image]