Scroll

MENU

2018.10.18 Lab

Three.js + Cannon.jsでWebVRコンテンツを作ってみた

今回はThree.jsを使って簡単なWebVRコンテンツ「VR射的」を制作しましたので、その制作の話をまとめてみました。

 

なぜWebVRで?

Oculsu GOが2018年5月1日に発売開始しました。
Oculsu GoとはPC不要でVRが楽しめるスタンドアロン型のヘッドマウントディスプレイであり、Webブラウザが搭載されています。
そこで、今回は「ブラウザで楽しめるVR」をテーマにコンテンツを制作するということになりました。

 

完成デモ

制作したデモがこちらです!
 
弊社キャラクターのバクに射的のように玉を当てる遊びです♪
 

webVR サンプル画像

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コンテンツ制作に挑戦してみてはいかがでしょうか?

参考にした書籍

VRコンテンツ開発ガイド 2017

Back to List

【個人情報の取り扱いについて】

株式会社ジュニ(以下「当社」)は、以下のとおり個人情報保護方針を定め、個人情報保護の仕組みを構築し、全従業員に個人情報保護の重要性の認識と取組みを徹底させることにより、個人情報の保護を推進致します。

個人情報の管理
当社は、お客さまの個人情報を正確かつ最新の状態に保ち、個人情報への不正アクセス・紛失・破損・改ざん・漏洩などを防止するため、セキュリティシステムの維持・管理体制の整備・社員教育の徹底等の必要な措置を講じ、安全対策を実施し個人情報の厳重な管理を行ないます。
個人情報の利用目的
お客さまからお預かりした個人情報は、当社からのご連絡や業務のご案内やご質問に対する回答として、電子メールや資料のご送付に利用いたします。
個人情報の第三者への開示・提供の禁止
当社は、お客さまよりお預かりした個人情報を適切に管理し、次のいずれかに該当する場合を除き、個人情報を第三者に開示いたしません。

  • お客さまの同意がある場合
  • お客さまが希望されるサービスを行なうために当社が業務を委託する業者に対して開示する場合
  • 法令に基づき開示することが必要である場合
個人情報の安全対策
当社は、個人情報の正確性及び安全性確保のために、セキュリティに万全の対策を講じています。
ご本人の照会
お客さまがご本人の個人情報の照会・修正・削除などをご希望される場合には、ご本人であることを確認の上、対応させていただきます。
法令、規範の遵守と見直し
当社は、保有する個人情報に関して適用される日本の法令、その他規範を遵守するとともに、本ポリシーの内容を適宜見直し、その改善に努めます。
お問い合せ
当社の個人情報の取扱に関するお問い合せは下記までご連絡ください。
株式会社ジュニ
〒160-0022 東京都新宿区新宿1-10-2 黒新ビル2F
TEL:03-5295-8445 FAX:050-3737-3451
Mail: info@junni.jp

page top