はじめに

こんにちは。NTTソフトウェアの鈴木雅貴です。ソフト道場 がっつり試し食い！の「スマホブラウザでお手軽VR」コーナー、第3回です。VR、いろいろなコンテンツが出てきていますね。私も某夏の家庭教師VRコンテンツを体験することができたのですが、恥ずかしさで変な汗をかきました。人前でやるもんじゃない。

さて前回ですが、VRフレームワークA-Frameを使い、スマホブラウザ向けVRコンテンツを作成しました。今回はA-FrameのVR空間にさまざまな物体を配置してみます。ちなみに、玉ねぎみじん切りの炒め時間は、事前の電子レンジチンで短縮できます。さらに事前準備ができるのであれば、みじん切りを生のまま冷凍しておくのもおすすめです。

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

まずはじめに、A-Frameのバージョンが前回の0.2.0から上がって0.3.0になっています。今回のサンプルは0.3.0を対象に記述しています。

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

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

VR空間を作る a-scene

前回、全天球画像を表示させるために以下のコードを書きました(body要素内のみ記載しています)。

<a-scene>
<a-sky src="office.jpg"></a-sky>
</a-scene>

ここで用いたa-sceneは、VR空間を定義するものです。画面に表示したいものはすべてa-sceneに追加します。上記で追加したa-skyはVR空間の背景画像を配置するもので、これで全天球空間を実現していました。

では、ここに新しく物体を配置してみましょう。

直方体を配置する a-box

a-boxで直方体を配置することができます。

<a-scene>
<a-sky src="office.jpg"></a-sky>
<a-box></a-box>
</a-scene>

これだけで次のように直方体を配置できます。直方体が足元に置かれるので探してしまうかもしれませんが。

真っ白では味気ないので、この直方体の色を変更してみましょう。a-boxにcolor属性を追加します。このたびコラムが「情報畑でつかまえて」になりましたので、畑っぽい色を。

<a-box color="#d4e676"></a-box>

色が変わりました！

いい加減足元を確認するのが嫌になりましたので、大きさや位置も変更しましょう。属性width, height, depthで大きさを、positionで位置を、rotationで傾きを指定します。

<a-box color="#d4e676" width="2" height="3" depth="1" position="3 2 -5" rotation="0 20 20"></a-box>

大きさ、位置、傾きが変わりました！これで足元を見なくてすみますね。

このように、基本的な内容なら要素・属性を指定するだけで簡単に物体を配置することができます。

他の設置可能物体

簡単に設置可能な物体は他にもたくさんあります。

• 円柱 a-cylinder
• 球 a-sphere
• 平面 a-plane
• 画像 a-image
• 囲むような画像 a-curvedimage
• 3Dモデル(OBJファイル) a-model
• 動画 a-video
• 360度動画 a-videosphere

試しに、円柱と画像を配置してみました。

<a-scene>
<!-- 背景画像 -->
<a-sky src="office.jpg"></a-sky>
<!-- 直方体 -->
<a-box color="#d4e676" width="2" height="3" depth="1" position="3 2 -5" rotation="0 20 20"></a-box>
<!-- 円柱 -->
<a-cylinder color="#ccc" position="0 0 -10"></a-cylinder>
<!-- 画像 -->
<a-image src="duck.png" position="-2 2 -3"></a-image>
</a-scene>

同様にできます。簡単ですね。

ライトの設定

a-lightで、ライトを変更することができます。属性positionで位置を、typeで光の種類を、colorで色を、intensityで強さを指定します。光の種類には以下があります。(Three.jsと同様です)

• 環境光 ambient (色のみ指定可能)
• 直接光 directional
• 半球 hemisphere
• 点光源 point
• スポットライト spot

ライトを指定しないと、type="ambient" color="white"とtype="directional" intensity="0.2" position="-1 2 1"が指定されます。

試しにオレンジの点光源だけにしてみました。

<a-light type="point" color="orange" position="0 -1.8 8"></a-light>

アニメーション

設置した物体を少しアニメーションさせてみましょう。a-animationをアニメーションさせたい要素の子要素として配置するだけです。アニメーションさせるのは、rotationやpositionといった属性です。

rotationをつかって、円柱を回転させてみましょう。attributeにアニメーションさせたい属性を指定、toでアニメーション後の状態を記載、dueでアニメーションの時間、repeatでアニメーションの繰り返し回数(indefiniteはずっと繰り返します)、easingはアニメーションの変化スピードです。実はこのあたり、仕様として検討されているWeb Animationsを参考にしているようです。

<a-cylinder color="#ccc">
<a-animation
attribute="rotation"
to="0 360 360"
dur="2000"
repeat="indefinite"
easing="linear">
</a-animation>
</a-cylinder>

今回の全部のせファイルはこちらから確認できます。（←クリックでサンプルページが表示されます）

A-Frameの詳しい仕様に関しては、A-Frameの公式ドキュメントをご覧ください。

次回予告

次回は、JavaScriptを使って簡易なインタラクティブ性を追加してみようと思います。寒暖の差が激しいので、身体に気をつけて元気でお過ごしください。