超現場ブログ

Technique,Design and Events

Web VRの簡単コンテンツ制作方法

Twitter Facebook Google+ はてブ

blog_main0517

こんにちは名古屋駅校の山下です。

前回はWeb VRを体験してみるという内容で記事を書きましたが
今回は実際のコンテンツ制作についてのお話です。
デモも追加してデータをダウンロード出来るようにしましたので、興味ある方はご一読ください。

まずは天球形式の画像撮影

天球形式の画像が必要になりますので、360°(天球)撮影ができるカメラが必要になります。
下記参考
RICOH 360°カメラ RICOH THETA S 全天球カメラ
blog_0517_00

上記のようなカメラがない場合はGoogleのアプリ Google Camera等でも撮影することができます。
前回のサンプルは Google Cameraで撮影しています。
Google Cameraを使うとPhoto Sphereという360度の天球形式の写真を、アプリの指示通りにスマホのカメラを向けて、複数方向の写真を撮ることで撮影できます。
※複数の角度の写真をアプリが合成する

1:Web VRコンテンツ作成必要な物

  • インターネット接続環境
  • コンテンツをアップできるレンタルサーバ
  • テキストエディタ
  • ブラウザ(IE以外ならたぶん大丈夫)
  • 上記で撮影した天球形式の写真

まずは上記の準備をしましょう。

2:A-FRAMEのダウンロード

A-FRAMEはwebブラウザ上で動作するVR開発のためのオープンソースフレームワークですね。
JavascriptのJQueryのようにWeb VRを簡単に扱えるようにしたものです。
A-FRAME本家
まずは下記よりA-FRAMEをダウンロードしましょう。
https://github.com/aframevr/aframe/
blog_0517_01

ダウンロードした「aframe-master.zip」を解凍して必要なファイルを取り出します。
aframe-master→distの中にあるaframe-v0.5.0.min.jsを今回は利用します。

図のようなディレクトリの構成にしてコーディングの準備をしておきます。
blog_0517_02

3:コーディング

それではindex.htmlをコーディングしていきます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>WEB塾名古屋駅校VRサンプル</title>
<!-- ライブラリ読込み -->
<script src="./js/aframe-v0.5.0.min.js"></script>
</head>
<body>
<!-- シーンの定義 -->
<a-scene>
<!-- 全天球の背景画像として全天球写真を読み込む -->
<a-sky src="./img/vr_meieki2.jpg"></a-sky>
</a-scene>
</body>
</html>

はいたったこれだけで完成!

<script src="./js/aframe-v0.5.0.min.js"></script>

でライブラリを読み込み

<a-scene>
<!-- 全天球の背景画像として全天球写真を読み込む -->
<a-sky src="./img/vr_meieki2.jpg"></a-sky>
</a-scene>

で天球画像を配置するだけ。
たった数行書くだけで簡単なものであれば出来てしまいます。

サンプルで用意したデータのzipファイルも置いておきます。
ダウンロード

4:サーバにアップロード

後はレンタルサーバ等にデータをアップロードしてスマートホンでアクセスして確認してください。
デモは下記
Web VRサンプル:http://chogenba.com/nagoya/vr/index2.html
QRコードも置いておきます。
0517_qr_code.png

Web VRコンテンツ制作まとめ

A-FRAMEを使えばたった数行で完成!
Web上で展開すればURLのやり取りだけでコンテンツの共有が可能!
専用のアプリをインストールする必要がない!

ということで興味ある方は是非お試しください。

名古屋駅校ではVR体験もできちゃいますので、是非体験授業にお越しください!

名駅校では夏のshift_upセミナーと称して
WebVR(仮想現実)体験セミナーを8月25日(金)16:00~開催いたします。
VRゴーグル代1,000円のみでご参加いただけます!
皆さんのご参加お待ちしております。

WebVR(仮想現実)体験セミナーのお申し込みはコチラ

それではまた!!

まずは無料の体験レッスン・カウンセリングへ!

あなたの目的や目標をお伺いしたうえで、
現在のスキルを分析し、
あなたに最適なカリキュラムをご提案します。

体験レッスン・カウンセリングの流れ

ご質問・ご相談の方はこちら

ご質問・ご相談ですか?

どんなことでもお気軽にご相談ください。

ご質問・ご相談はこちら

Copyright © 超現場主義 All rights reserved.