パソコンで，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 3.12 のインストール（Windows 上） [クリックして展開]

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

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

管理者権限のコマンドプロンプトで以下を実行する。管理者権限のコマンドプロンプトを起動するには、Windows キーまたはスタートメニューから「cmd」と入力し、表示された「コマンドプロンプト」を右クリックして「管理者として実行」を選択する。

winget install --scope machine --id Python.Python.3.12 -e --silent --disable-interactivity --force --accept-source-agreements --accept-package-agreements --override "/quiet InstallAllUsers=1 PrependPath=1 Include_pip=1 Include_test=0 Include_launcher=1 InstallLauncherAllUsers=1"

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

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

Python 公式サイト（https://www.python.org/downloads/）にアクセスし、「Download Python 3.x.x」ボタンから Windows 用インストーラーをダウンロードする。
ダウンロードしたインストーラーを実行する。
初期画面の下部に表示される「Add python.exe to PATH」に必ずチェックを入れてから「Customize installation」を選択する。このチェックを入れ忘れると、コマンドプロンプトから python コマンドを実行できない。
「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 ページが動くようにする．

カメラ付きのパソコンを準備する．
作業用のフォルダ（ディレクトリ）を作る．
名前は何でもよいが，日本語を含まないものがよい．

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>

Web サーバを稼働させる
1. 以下の操作をコマンドプロンプトで実行する（手順：Windowsキーまたはスタートメニュー → cmd と入力 →「コマンドプロンプト」を選択）。
2. 「cd」コマンドで，先ほど作成した作業用ディレクトリに，カレントディレクトリを移動．
3. Web サーバを稼働させる
  次のコマンドを実行．
```
python -m http.server 80
```
試しに，Webブラウザで表示してみる．
1. Web ブラウザで次のURL を開く
  http://localhost/a.html
  
  * カメラの使用の許可についての表示が出た場合には許可する．
2. カメラ画像が現れるので確認する．
今度は，次の URL から，マーカー画像 hiro.png をダウンロードし，パソコンの画面に表示する．
https://github.com/AR-js-org/AR.js/blob/master/data/images/hiro.png
先ほどの HTML ファイルでは，マーカーを「hiro」に設定していた．
カメラで，マーカー画像 hiro.pngを撮影すると，箱が現れるので確認する．

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

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

ここでは，Blender を用いる．

Windows でのBlender のインストールは，別ページ »で説明

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

Blender でオブジェクトを編集
「ファイル」→「エクスポート」「→Wavefront (.obj)」と操作する．
ディレクトリ（フォルダ）名と，ファイル名を指定して，「OBJ をエクスポート」をクリック．
.obj 形式ファイル，.mtl 形式ファイルができるので確認する

.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 で表示

Web サーバを稼働させる
もし，Web サーバが稼働していなければ，次の手順で稼働させる．
1. 以下の操作をコマンドプロンプトで実行する（手順：Windowsキーまたはスタートメニュー → cmd と入力 →「コマンドプロンプト」を選択）。
2. 「cd」コマンドで，先ほど作成した作業用ディレクトリに，カレントディレクトリを移動．
3. Web サーバを稼働させる
  次のコマンドを実行．
```
python -m http.server 80
```
試しに，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. マーカーを大きく表示すると，３次元オブジェクトも大きく表示される．
  マーカーの場所，大きさ，傾きの応じて３次元オブジェクトが表示される．