Three.jsで360°パノラマ画像を VR させる

公開日: : brender, javascript, Three.js, WebGL

Three.jsで360°パノラマ画像を VR させる

Three.jsで360°パノラマ画像を VR させる

VRを作るのに前回のプラグイン「WP-VR-view」などいろいろ試してみましたが、カスタマイはしずらかったので Three.js で作っていきました。その初期のテスト段階をメモしておこうと思います。

まず、three.js で360°パノラマ画像を表示をやってみました。
DEMO を見る

VR にBlenderで作ったオブジェクトを追加

以前Blenderで作ったガラスの靴を追加してみました。

var cubeCamera1, cubeCamera2;//追加

ガラスの反射の為に、cubeCamera1、cubeCamera2 と2つのカメラを追加します。

//追加
cubeCamera1 = new THREE.CubeCamera( 1, 1000, 256 );
cubeCamera1.renderTarget.texture.minFilter = THREE.LinearMipMapLinearFilter;
scene.add( cubeCamera1 );
cubeCamera2 = new THREE.CubeCamera( 1, 1000, 256 );
cubeCamera2.renderTarget.texture.minFilter = THREE.LinearMipMapLinearFilter;
scene.add( cubeCamera2 );
wrapperElm.appendChild( renderer.domElement );
material = new THREE.MeshBasicMaterial( {
   envMap: cubeCamera2.renderTarget.texture
} );
//追加
//Blenderのオブジェクトを読み込む(文字)
loaderglass = new THREE.JSONLoader();
loaderglass.load( './glass.json', function ( geometryg, materialsg ) { 
	var faceMaterialg = new THREE.MeshFaceMaterial( materialsg );
	material = new THREE.MeshBasicMaterial( {
	envMap: cubeCamera2.renderTarget.texture,
	reflectivity: 1, //反射率
	opacity: 0.6, //透明度
	transparent: true
} );
var mesh_glass = new THREE.Mesh( geometryg, material );
	mesh_glass.position.set( 0, 0, 0);
	mesh_glass.scale.set( 10, 10, 10 );
	scene.add( mesh_glass );
} );

render の中で、cubeCamera1、cubeCamera2 をupdateします。

//追加
material.envMap = cubeCamera1.renderTarget.texture;
cubeCamera2.updateCubeMap( renderer, scene );
material.envMap = cubeCamera2.renderTarget.texture;
cubeCamera1.updateCubeMap( renderer, scene );

DEMO を見る
Three.jsの公式サイトを参考にしました。
Three.jsの公式サイト

ガラスの反射やスマホにも対応した以下のサイトも参考にしました。
Three.jsによるWebGLで360度パノラマ表示

StereoEffect.js で2画面ゴーグルを試してみる

2画面ゴーグル用を作るのに、Google の Cardboard スクリプトを利用しました。
http://vr.chromeexperiments.com/
サイトからダウンロードします。

three.js の他に以下が入っています。

  • StereoEffect.js → 2画面
  • DeviceOrientationControls.js → ジャイロ機能(スマホの傾き)
  • OrbitControls.js → マウス操作

今回 OrbitControls.js のマウス操作の部分は、camera.lookAt でやっているので使いません。

2画面を作るのに、StereoEffect.js の読み込みをthree.min.js の読み込みの下に加えます。

<script src="./StereoEffect.js"></script>

2画面用のボタンとファンクションを作っておきます。

<a href="javascript:void(0);" class="bt-f2" onClick="Fnk_TowSC()">tow screen</a>
<script>
.....
flg_TowSC = false,//追加2
.....
//追加2
function Fnk_TowSC() {
flg_TowSC = true;
var fulltarget = document.getElementsByClassName('fullsc')[0];
requestFullscreen(fulltarget);//フルスクリーンの呼び出しも入れておく
}
</script>

カメラとシーンを作ったら以下を追加しておきます。

scene.add(camera);

render オブジェクト生成後に、以下のようにステレオエフェクトオブジェクトを生成します。

effect = new THREE.StereoEffect(renderer);

フルスクリーンのWindowリサイズファンクションのところで effect のサイズをセットします。

effect.setSize( wrapperElm.clientWidth, wrapperElm.clientHeight );

2画面だったら effect を render させます。

camera にfov を渡すとマウスホイールも効くようになります。

if(flg_TowSC){
camera.fov = fov;//マウスホイール
effect.render( scene, camera );
}
else{
renderer.render( scene, camera );
}

このような感じになりました。
DEMO を見る

DeviceOrientationControls.js でジャイロ機能

ジャイロ機能を付けるには、Cardboard スクリプトの中にDeviceOrientationControls.js があります。

ジャイロとはスマートフォンの傾きに連動する動きのことです。

スマホだったらジャイロにするようにまず切り分けを追加します。

//スマホかどうかの切り分け
var ua = 'pc';
if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf( 'iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) { 
    ua = 'other';
}

以下のようにコントロールオブジェクトにカメラを渡します。

if(ua == 'other'){
controls = new THREE.DeviceOrientationControls(camera, true);
controls.connect();
}

controlsを render ファンクションの中でアップデートさせます。

if(ua == 'other'){
controls.update();
}

DEMO を見る

関連記事

blender 地球

Blender Three.js 地球 その2(ノード)

前回はNASAの地球のテクスチャを1つだけ使って、球へのテクスチャの貼り方を2パターンやってみました

記事を読む

Blender と Three.js で3Dのテキストのアニメーションやってみる その2

Blender Three.js エキスポート その2(3DのテキストのアニメーションやってみるⅡ)

今回は、Three.js を使って、前回Blenderから書き出した JSONファイル を表示したり

記事を読む

JavaScript タイピングゲーム スマホ用

Javascript タイピング ゲーム スマホ用 をつくる

JavaScript スマホ用 切り替え 前回の記事のゲームですが、スマホだとサイズが合わなくてや

記事を読む

Blender と Three.js で3Dのテキストのアニメーションやってみる

Blender Three.js エキスポート その1(3DのテキストのアニメーションやってみるⅠ)

Blender インストール 3Dを作るのに、Blender(ブレンダー)という、ソフトを使ってみ

記事を読む

JavaScript 規制標識 タイピングゲーム(自分用・激ムズ)

HTML5 audio タグ を使って音声を出す

HTML5からaudioタグを使えば、Flashなどのプラグインを使わなくてもブラウザ上で音声を再生

記事を読む

blender 環境テクスチャ

Blender Three.js ガラス その1(Cyclesレンダー)

Blenderでガラスの靴をモデリングしてみました。 最終的にはthree.jsで表示しようと思い

記事を読む

Javascript 写真ギャラリー サムネイルスライド横 レスポンシブ対応

Javascript 写真ギャラリー サムネイルスライド横 レスポンシブ対応

Javascript でマウスドラッグのテストをしていきます。 分かりやすいように、ボールを投げる

記事を読む

three.js 環境マッピング

Blender Three.js ガラス その2(環境マップ)

前回Cyclesレンダーを試してみました。 Cyclesレンダーはノードを使用しているので、ガ

記事を読む

blender 球 テクスチャ

Blender Three.js 地球 その1(テクスチャ)

Blender 地球 テクスチャ Blenderで地球を作ってみようと思います。 最終的にはエク

記事を読む

Javascript ノード の取得や挿入

Javascript ノードの取得や挿入

ノードの取得 ノードの取得(ダイレクトアクセス) document.getElementById

記事を読む

brender javascript Three.js WebGL

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

WordPress Twenty Seventeen function.php
WordPress twentyseventeen の function.php を見る – その2

前回の続きです。 次のスターターコンテンツは、今回のシンプルテン

WordPress Twenty Seventeen function.php
WordPress twentyseventeen の function.php を見る – その1

WordPress の最低限の機能だけのシンプルなテンプレートが欲しか

WordPress Warning エラー
WordPress フォルダー・ファイル系の関数 is_dir や opendir や exif_imagetype で Warning エラー

Wordpress の管理画面でフォルダーの中身を読み込む関数 ope

Wordpress 自作フォーム (チェックボックスなど)
WordPress 自作フォーム その3(チェックボックスなど)

以前、WordPress 自作フォーム その1の記事で Wordpre

Javascript ノード の取得や挿入
Javascript ノードの取得や挿入

ノードの取得 ノードの取得(ダイレクトアクセス) document

→もっと見る

にほんブログ村 IT技術ブログへ にほんブログ村 IT技術ブログ PHPへ にほんブログ村 IT技術ブログ WordPressへ
にほんブログ村 FC2 Blog Ranking
PAGE TOP ↑