はじめに

こんにちは。NTTソフトウェアの鈴木雅貴です。ソフト道場 がっつり試し食い！の「スマホブラウザでお手軽VR」コーナー、第5回です。

さて前回ですが、VRフレームワークA-Frameで配置した物体をJavaScriptで制御し、コンテンツに動きを加えてみました。今回は、そのコンテンツ作成方法として、比較的とっつきやすいGUIツールを紹介します。ちなみに里芋の皮むきですが、ラップして電子レンジに3分ほどかけると、ぬるぬるせずかゆくもならないので楽ですよ。

記事修正のお詫び

前回の予告にて「CUIツールを使ってA-FrameのVR空間を作ってみる予定」と書いておりましたが、正しくは「GUIツールを使って...」でした。訂正してお詫び申し上げます。

A-Frameのバージョンが0.3.0に

A-Frameのバージョンが前回の0.3.0から0.4.0に上がっています。今回の画面キャプチャは0.4.0を対象に記述しています。

0.4.0を使用する場合は、A-Frame CDNのURLが変更になりますので、ご注意ください。具体的には、以下のようになります。

<!-- A-FrameのライブラリをCDNで読み込む -->
<script src="https://aframe.io/releases/0.4.0/aframe.min.js"></script>

GUIツールの起動

本題です。今回は任意のA-Frameコンテンツでかまわないのですが、ここでは第3回と同じコンテンツ(A-Frameのバージョンは0.4.0にしています)を対象にします。

こちらが対象です。

では、このコンテンツを対象に、GUIツールを起動してみましょう。

Webブラウザで開いた状態で、<Ctrl> + <alt> + iを押してください。すると、以下のような画面になります。

これがGUIツールです。なんと、A-Frameの中にあらかじめ組み込まれていたのですね。新たにツールを導入したりする必要がないので、楽でよいですね。

このGUIツールですが、インスペクタ(Inspector)と呼ばれています。本記事内でも、以降インスペクタと表記します。

では、さっそくインスペクタを使って、VRコンテンツに手を加えてみましょう！

インスペクタで見方を変更する

まず、コンテンツの見え方を変更する方法です。

• 回転: 左クリックしたままドラッグ
• 見回す: 右クリックしたままドラッグ
• 拡大縮小: スクロール操作(ホイール等)

これで、適宜いい感じに見え方を調整しましょう。

インスペクタで物体を動かす

では、既存の物体を動かしてみましょう。 画面左から対象の物体に対応する要素を選択するか、表示されている物体を直接クリックしてください。すると、選択された物体の設定値が画面右に表示されます。ここでは、<a-cylinder>を選択してみました。

位置を変更してみましょう。位置を指定するpositionは左からx軸、y軸、z軸となっていますので、適当に数字を入れてみると、動きます。

同様に、角度はrotation、サイズはscaleで指定可能です。

表示されている物体を直接動かして設定することもできます。画面右上にあるアイコンを使用します。

これらのアイコンは左からtranslate(移動)、rotate(回転)、scale(拡大縮小)です。対象の物体をクリックしたのち、実施したい操作のアイコンをクリックすると、それらの操作に対応した表示になります。たとえば、回転では以下のように表示されます。

回転させたい方向にあった線をドラッグすると、その方向に回転します。合わせて、画面右の設定値も変更されます。

localのチェックボックスを選択すると、物体を基準とした移動ができます。

インスペクタで物体の形状を変更する

物体の形状を変更するには、画面右のGEOMETRYを使用します。

primitiveで物体の形状を選択できます。たとえば、boxを選択すると箱になります。

また、物体の形状によりますが、heightやwidthなどで、物体のサイズを指定することもできます。

インスペクタで物体の色などを変更する

物体の色などの見た目変更には、画面右のMATERIALを使用します。

例えば、色はcolorで変更できます。

他にも、透明度opacityや金属っぽさのmetailnessなどがあります。

このように、見た目を確認しながら変更できるので、便利ですね。

インスペクタで物体を追加する

物体を追加するには、画面左上の「+」アイコン(add a new entity)をクリックします。

すると、画面左の物体リストに、新しく<a-entity>が追加されます。

これを選択した状態で、画面右の「Add component...」から「geometry」と「material」を選択すると、今までと同様に物体の形状や色などを変更することができます。

ここでcomponentとありますが、A-Frameでは物体をコンポーネント(部品)化して利用することができるようになっています。現状使えるコンポーネントには、公式ドキュメントのものと、右のアイコンクリックで見られる、A-Frame Registryに掲載されているものがあります。コンポーネントについて詳しく知りたい方は公式ドキュメントをご参照ください。

このように、表示結果を確認しながら物体を配置・変更することができるので、作業が楽になりますね。

インスペクタで作成したコンテンツを保存する

ただ、現在はコンテンツは画面に表示されているだけで、どこにも保存されていません。せっかく作ったものですので、どこかに出力しましょう。

出力するには、作成したコンテンツをHTMLとしてクリップボードに出力する方法と、HTMLファイルとしてダウンロードする方法があります。

まず、クリップボードに出力する方法ですが、画面左上のファイルが重なったアイコンをクリックします。

これで、クリップボードにコピーされます。あとは、テキストエディタ等でお好きなファイルに貼り付ければ、作成したコンテンツをそのまま使えます。

次に、HTMLファイルとしてダウンロードする方法ですが、これも画面左上の、今度は下矢印のついたアイコンをクリックします。

これで、HTMLファイルがそのままダウンロードされます。

このように、A-FrameにはGUIでコンテンツを作るツールがあらかじめ組み込まれています。これを使わない手はないですね。

次回予告...はありません

実は、今回が最終回です。全5回、A-Frameを使ったスマホ向けの簡単なVRコンテンツ作成方法について紹介してきましたが、いかがでしたでしょうか。A-Frameには本連載で紹介していない機能もたくさんありますので、その気になればもっと凝ったコンテンツも作れます。また、開発も活発ですので、今後の発展にも期待できるでしょう。

全天球画像だけでも結構楽しめますので、簡単な一歩として、A-FrameでのVR、是非お試しください。それでは、よきVRライフを！