スマホでお手軽にVR！Google CardbordとThree.jsでVR体験その②

2016.07.11

こんにちはエージーワークス代表の増本修二です。

前回の記事、
お手軽にVR！Google CardbordとThree.jsでVR体験その①
http://www.ag-works.com/blog/google-cardbord-three-js/
のつづきです。

簡単にVRを体験出来るGoogle Cardboard。

そのコンテンツをThree.jsで作ってみます。

【サンプルコンテンツの中身】

まずはダウンロードしたコンテンツの中身です。

googleのcardboardサイト、

https://vr.chromeexperiments.com

ここから「DOWNLOAD CODE」でダウンロードした中身が下記になります。

three.js以外、必要なファイルは下記の3つになります。
・DeviceOrientationControls.js
・OrbitControls.js
・StereoEffect.js

・DeviceOrientationControls.js
このライブラリでスマホの回転を取得します。

・OrbitControls.js
Three.jsで簡単にUIを追加出来るライブラリです。

・StereoEffect.js
画面を2分割し、立体視表示させるライブラリです。

【実際のコードについて】

実際のサンプルコードを見ていきましょう。

まずはVR表示として2画面表示させる部分。

effect = new THREE.StereoEffect(renderer);

1	effect = new THREE.StereoEffect(renderer);

ステレオ表示するためのオブジェクトをrendererを引数に生成します。

そして、通常

function render() {
	renderer.render( scene, camera );
}

1

2

3

function render() {

renderer.render( scene, camera );

}

などとするところを、代わりに

function render(dt) {
	effect.render(scene, camera);
}

1

2

3

function render(dt) {

effect.render(scene, camera);

}

として、2画面に表示させるeffectを使用します。

次にスマホの向き、回転を取得する部分。

function setOrientationControls(e) {
	if (!e.alpha) {
		return;
	}
	controls = new THREE.DeviceOrientationControls(camera, true);
	controls.connect();
	controls.update();
	element.addEventListener('click', fullscreen, false);
	window.removeEventListener('deviceorientation', setOrientationControls, true);
}
window.addEventListener('deviceorientation', setOrientationControls, true);

1

2

3

4

5

6

7

8

9

10

11

function setOrientationControls(e) {

if (!e.alpha) {

return;

}

controls = new THREE.DeviceOrientationControls(camera, true);

controls.connect();

controls.update();

element.addEventListener('click', fullscreen, false);

window.removeEventListener('deviceorientation', setOrientationControls, true);

}

window.addEventListener('deviceorientation', setOrientationControls, true);

DeviceOrientationControlsオブジェクトを生成し、deviceorientationイベントを取得します。
つまり、スマホの回転、deviceorientationイベントが発生するたびにsetOrientationControlsを実行し、スマホの角度に合わせてcontrolsを定義しています。

これだけででGoogle CardboardでVR表示が可能になります。

思いの外簡単だったのではないでしょうか。

あとはオブジェクトやアニメーションを自由に設置して、VRコンテンツを作ってみましょう！

TECH WEB スマホ