情報畑でつかまえてロゴ
本サイトは NTTテクノロスが旬の IT をキーワードに
IT 部門が今知っておきたい最新テクノロジーに関する情報をお届けするサイトです

VR空間に物体配置 - スマホブラウザでお手軽VR 第3回-

VRフレームワークA-Frameを使い VR空間にさまざまな物体を配置してみます。 さらに、設置した物体にライトの設定をし、アニメーションさせます。

はじめに

こんにちは。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-boxcolor属性を追加します。このたびコラムが「情報畑でつかまえて」になりましたので、畑っぽい色を。

<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をアニメーションさせたい要素の子要素として配置するだけです。アニメーションさせるのは、rotationpositionといった属性です。

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

著者プロフィール
鈴木 雅貴
鈴木 雅貴
作品公開の場としてのWebに可能性を感じ入社。 XML関連業務や継続的インテグレーション社内普及活動などを経て、 2013年より新たに設立されたHTML5推進室の主要メンバーとしてWeb技術を推進している。 セミナーでの講演や書籍執筆などの活動も行っている。 著書に『HTML5プロフェッショナル認定試験 レベル1 対策テキスト&問題集』(マイナビ/共著)。得意領域はCSS。 調理歴20年超。本人も原因不明のアヒル好き。