A-Frameを使ってロボットアームをVR空間に表示する方法
この記事について
この記事では VR コンテンツを制作するための Web フレームワークである A-Frame を使ってロボットアームを表示する方法を紹介します。
デモは下記のページからご覧になれます。
コーディングの準備
ターミナルで下記のコマンドを実行してディレクトリやファイルを作成します。
mkdir vr-robot-arm
cd vr-robot-arm
touch index.html
3D モデルのダウンロード
VR 空間に表示するロボットアームの 3D モデルを用意します。3D モデルは何でも良いですが、今回は Free3D から下記のロボットアームの 3D モデルをダウンロードして使わせてもらいます。
ダウンロードした Zip ファイルの中には Rmk3.c4d と Rmk3.obj の2つのファイルが含まれていますが、必要になるのは後者の Rmk3.obj だけです。
OBJ → glTF への変換
ダウンロードした 3D モデルのデータ形式は OBJ ですが A-Frame では glTF を使うことが推奨されています。
We recommend glTF for distributing assets in production over the web.
OBj → glTF に変換するには obj2gltf が必要になるので、ターミナルで下記のコマンドを実行してインストールします。
npm install -g obj2gltf
続いて下記のコマンドを実行して OBj → glTF に変換します。
obj2gltf Rmk3.obj -o robot-arm.gltf
コーディング
エディタで index.html を開いて下記の内容を入力します。
ポイントを下記に示します。
-
a-assetsとa-asset-itemを使って 3D モデルを読み込みます。 -
a-gltf-modelを使って 3D モデルを表示します。この際、srcで表示する 3D モデルを指定します。 -
positionやscaleを使って位置やサイズを調整します。
動作確認
ファイルをブラウザで開くと CORS エラーが発生するのでターミナルで下記のコマンドを実行して HTTP サーバーを起動します。
python3 -m http.server
ブラウザで http://localhost:8000/ にアクセスしてロボットアームが表示されることを確認します。
おわりに
A-Frame を初めて使いましたが驚くほど簡単にロボットアームを VR 空間に表示できて感銘を受けました。まだ A-Frame 公式ドキュメント をほとんど読んでいないので Introduction だけでも一読しようと思います。A-Frame は three.js や WebXR Device API を内部で使っているようなので、余力があればこれらについても学びたいと思います。
Discussion