Three.js + Cannon.jsでWebVRコンテンツを作ってみた
今回はThree.jsを使って簡単なWebVRコンテンツ「VR射的」を制作しましたので、その制作の話をまとめてみました。
なぜWebVRで？
Oculsu GOが2018年5月1日に発売開始しました。
Oculsu GoとはPC不要でVRが楽しめるスタンドアロン型のヘッドマウントディスプレイであり、Webブラウザが搭載されています。
そこで、今回は「ブラウザで楽しめるVR」をテーマにコンテンツを制作するということになりました。
完成デモ
制作したデモがこちらです！
弊社キャラクターのバクに射的のように玉を当てる遊びです♪
https://junni.co.jp/lab/webvr/
実装に関して
今回はWebVRコンテンツという点に焦点を絞り簡単にまとめます。
WebVR.jsの利用方法
WebVR APIを利用してWebVRを実装をしました。参考
オリジントライアルを利用するにはtokenの発行が必要になりますので、次のリンク先からリクエストを行ってください。Origin Trials Guide for Web Developers
トークンキーが発行されたらHTMLに以下の記述を追加します。
<!-- Origin Trial Token, feature = WebVR (For Chrome M62+) -->
<meta http-equiv="origin-trial" content="**insert your token as provided in the the email here**">
次に、Three.jsでレンダラーをインスタンス化した際に、renderer.vr.enabledをtrueにします。
// レンダラーを作成
const renderer = new THREE.WebGLRenderer({
alpha:false,
antialias:true
});
renderer.vr.enabled = true;
Three.jsのサンプルファイルの中にあるWebVR.jsを読み込み、JSで以下の記述をするとVRモードに入るためのボタンが追加されます。
//VRモードに入るためのボタンを生成
document.body.appendChild(WEBVR.createButton(renderer));
これでWebVR APIを利用する準備は完了です。
HMD付属コントローラーの利用
Webブラウザ上でHMDに付属しているコントローラーを使うためにはGamepad APIを利用します。
コントローラーを制御するためのクラスをつくり、そのなかでデバイスの判定やアップデートなどを行います。
//デバイスのIDと一致しているかを判定
let likeVRPad = (gamepad.id === 'OpenVR Gamepad') || (gamepad.id === 'Oculus Go Controller');
コントローラーの傾き情報の更新やボタンの判定などは以下のように行います。
// デバイスからの情報を元に姿勢を更新し、ルームスケールのマトリクスを掛けて最終的な姿勢を決定する
this.matrix.compose(this.position, this.quaternion, this.scale);
this.matrix.multiplyMatrices(this.standingMatrix, this.matrix);
this.matrixWorldNeedsUpdate = true;
this.visible = true;
//トリガーボタンの判定 押すとtrueが返ってくる
this.triggerIsPressed = gamepad.buttons[1].pressed;
if(this.triggerIsPressed) {
//押されてる時の処理
}
まとめ
WebVR APIとGamepad APIを利用することによって、Webの技術のみでインタラクティブなVRコンテンツを制作する事ができます。
「UnityやWindowsでしかVR開発できないし…」と思っていたWebディベロッパーの皆さんもVRコンテンツ制作に挑戦してみてはいかがでしょうか？