sample1

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

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

by [2016年2月23日]

 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を使ったサンプル

その1「3Dオブジェクトを置いてみる」

 こちらは、A-FRAMEを使って作られた3DCGです。四方を白で囲まれた空間に、3Dの立方体・球・円柱がそれぞれ存在しています。
sample1

その2「3Dオブジェクトを動かしてみる」

 次に設置した3Dオブジェクトを動かしてみます。A-FRAMEではアニメーション用としてtween.jsというライブラリを内包しています。tweenは簡単な指定でオブジェクトに動きを与えるライブラリで色々な所で使われています。Unityの中でも使われます。

sample2

vr_sheet

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

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

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

PageTopへ