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

【概要】

A-Frame と AR.js を用いて，パソコンでマーカーベースの AR を動かしてみる。 所定の hiro マーカー（画像）をパソコンのカメラで撮影すると，それを読み取って３次元のオブジェクトが現れる。Python の簡易 Web サーバを稼働させ，Web ブラウザでこの Web ページが動くようにする。

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

【目次】

【関連する外部ページ】

【サイト内の関連情報】

前準備

Python 3.12 のインストール

Pythonのインストールを行い、Pythonのプログラムを実行する環境を整える。扱う環境は、Windows搭載パソコンである。金子研究室では、Python 3.12.10を推奨する。

[Windows での Python 3.12 のインストール手順を見るには、ここをクリック]

Windows での Python 3.12 のインストール

以下のいずれかの方法でPython 3.12をインストールする。Pythonがインストール済みの場合、この手順は不要である。

方法 1：winget によるインストール

【インストールコマンドの実行方法】

管理者権限でコマンドプロンプトを起動する（手順：Windowsキーまたはスタートメニュー → cmd と入力 → 右クリック → 「管理者として実行」）。そして、コマンド全体をコマンドプロンプトにコピー＆ペーストする。

--scope machine を指定することで、システム全体（全ユーザー向け）にインストールされる。このオプションの実行には管理者権限が必要である。インストール完了後、コマンドプロンプトを再起動するとPATHが反映される。

REM Python 3.12 をシステム領域にインストール
winget install --id Python.Python.3.12 -e --scope machine --silent --accept-source-agreements --accept-package-agreements --override "/quiet InstallAllUsers=1 PrependPath=1 Include_test=0 Include_pip=1 Include_launcher=1 InstallLauncherAllUsers=1 TargetDir=\"C:\Program Files\Python312\""

REM Python と Scripts を PATH 先頭に追加
powershell -NoProfile -Command "$p='C:\Program Files\Python312'; $s=\"$p\Scripts\"; $c=[Environment]::GetEnvironmentVariable('Path','Machine'); if((Test-Path $p) -and (';'+$c+';' -notlike \"*;$p;*\") -and (';'+$c+';' -notlike \"*;$s;*\")){[Environment]::SetEnvironmentVariable('Path',\"$p;$s;$c\",'Machine')}"

方法 2：インストーラーによるインストール

  1. Python公式サイト（https://www.python.org/downloads/）にアクセスし、「Download Python 3.x.x」ボタンからWindows用インストーラーをダウンロードする。
  2. ダウンロードしたインストーラーを実行する。
  3. 初期画面の下部に表示される「Add python.exe to PATH」にチェックを入れてから「Customize installation」を選択する。このチェックを入れ忘れると、コマンドプロンプトから python コマンドを実行できない。
  4. 「Install Python 3.xx for all users」にチェックを入れ、「Install」をクリックする。

インストールの確認

コマンドプロンプトで以下を実行する。

python --version

バージョン番号（例：Python 3.12.x）が表示されればインストール成功である。「'python' は、内部コマンドまたは外部コマンドとして認識されていません。」と表示される場合は、インストールが正常に完了していない。

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

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

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

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

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

    次のページに記載のサンプルプログラムのうち，マーカーベースの AR のものを使う（a-box を使うように変更し，A-Frame のバージョンを AR.js と対応するものに合わせている）。

    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.6.0/aframe.min.js"></script>
    <!-- NFTなし，マーカー＋位置情報対応版の AR.js を読み込む -->
    <script src="https://raw.githack.com/AR-js-org/AR.js/3.4.7/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キーまたはスタートメニュー → cmd と入力 → 「コマンドプロンプト」を選択）。
    2. 「cd」コマンドで，先ほど作成した作業用ディレクトリに，カレントディレクトリを移動する。
    3. Web サーバを稼働させる。次のコマンドを実行する。 
      python -m http.server 80
  5. 試しに，Webブラウザで表示してみる。
    1. Web ブラウザで次のURL を開く。

      http://localhost/a.html

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

    2. カメラ画像が現れるので確認する。
  6. 次の URL から，マーカー画像 hiro.png をダウンロードし，パソコンの画面に表示する。

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

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

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

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

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

ここでは，Blender（バージョン 5.2 LTS）を用いる。

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

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

  1. Blender でオブジェクトを編集する。
  2. 「ファイル」→「エクスポート」→「Wavefront (.obj)」と操作する。
  3. ディレクトリ（フォルダ）名とファイル名を指定して， 「OBJ をエクスポート」をクリックする。
  4. .obj 形式ファイルと .mtl 形式ファイルができるので確認する。
  5. .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.6.0/aframe.min.js"></script>
    <!-- NFTなし，マーカー＋位置情報対応版の AR.js を読み込む -->
    <script src="https://raw.githack.com/AR-js-org/AR.js/3.4.7/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キーまたはスタートメニュー → cmd と入力 → 「コマンドプロンプト」を選択）。
    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

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

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

    4. マーカーを大きく表示すると，３次元オブジェクトも大きく表示される。
      マーカーの場所，大きさ，傾きに応じて３次元オブジェクトが表示される。