sample3

「HTMLで作れるVR!? A-FRAME超入門」雑誌『VRFREEK』予告 後編

  • このエントリーをはてなブックマークに追加

by [2016年3月01日]

 VR元年といわれる2016年、VRコンテンツを自力で作ってみたいと思っている方も少なくないでしょう。2016年3月8日に発売される雑誌『VRFREEK』では、VRコンテンツの考え方とともに、個人の開発環境でVRコンテンツを簡単に作れる方法を紹介しています。
 一般の人がVRコンテンツを作るうえで、選択肢としてまず挙げられるのがゲーム開発に特化したUnityです。最近のUnityは、MicrosoftのVisual Studioが標準で使えるようになり、開発経験の豊富な人にとってはとても便利になっています。とはいえ、初学者の間からは機能が多すぎて使いづらいという声も多いのが実情です。
 VRFREEKのオススメ開発環境は、初学者でも扱いやすいA-FRAMEです。A-FRAMEの最大の利点は、VRの3DCGをHTMLで構築できる点です。タグだけの操作で3DCGコンテンツをページのデザインに組み込めます。2015年の12月に出たばかりで機能的に足りない部分が多いのも事実ですが、3DCGの覚え始めるにあたってこれ以上のものはありません。

▼VRFREEK予告記事「HTMLで作れるVR!? A-FRAME超入門」
前編 3Dオブジェクトを置いてみる/3Dオブジェクトを動かしてみる
後編 オブジェクトにテクスチャーを貼り付ける/<a-sky>タグで背景に静止画を設置する

A-FRAMEを使ったサンプル

その3「オブジェクトにテクスチャーを貼り付ける」

 前回までのサンプルでは無地のオブジェクトばかりでしたが、画像を貼り付けることもできます。オブジェクトに貼り付ける画像のことをテクスチャーと呼びます。
sample3

その4「<a-sky>タグで背景に静止画を設置する」

 ここまでのサンプルの背景は真っ白で何もありませんでしたが<a-sky>タグで遠景を設置できます。背景に単に色を付けるだけなら<a-sky>タグのcolor属性で指定できますが、ここではRICHO THETA Sで撮影した静止画を遠景にしてみます。
sample4

vr_sheet

あなたのスマホでVRを体験できます!

 これらの3DCG、どうやって作ったのでしょうか?
 雑誌『VRFREEK』は、本稿で紹介したVRコンテンツをソースコードとともに掲載しています。組み立て式のVRシート(写真)も付属しますので、ぜひ体験してみてください。また、ここでご紹介したサンプルよりも高度なサンプルも収録していますので、試してみたいという方はぜひ書店で手にとってみてください!

▼VRFREEKの詳細はコチラ
VR情報専門誌『VRFREEK』

PageTopへ