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 を見る

関連記事

three.js 環境マッピング

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

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

記事を読む

画像加工 cropbox.js

写真をアップロードして切り抜きが出来るcropboxにタッチイベントを付けてみる

Git Hub の cropbox 写真をアップロードしてカット出来るjQueryのプラグイン c

記事を読む

Blender と Three.js UVのマテリアル複数 エクスポート

Blender Three.js エクスポート その3( テクスチャなどがエクスポート出来ない場合)

Blender ではちゃんと表示しているのに、Three.js でエクスポートしたら、オブジェクトや

記事を読む

blender 環境テクスチャ

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

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

記事を読む

Blender Three.js 海 物理演算

Blender Three.js エクスポート その5(目のボーンとウェイトペイントとか)

前回亀の歩くアニメーションが、手足のボーンしか動かしてないのに、目や甲羅の部分まで連動してしまったの

記事を読む

blender three.js 地球

Blender Three.js 地球 その3(ベイクと星)

今回はベイクを試してみようと思います。 あと、参考サイトの英語の動画解説では、blenderの

記事を読む

Blender ボーンの追加

Blender Three.js エクスポート その4( モーフアニメーション)

前回作った亀に歩くモーフアニメーションを付けて、それを Three.js で表示するまでをやってみよ

記事を読む

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

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

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

記事を読む

blender 地球

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

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

記事を読む

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

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

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

記事を読む

brender javascript Three.js WebGL

Message

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

Wordpress 自作フォーム 2(注意点とエラー:This is somewhat embarrassing, isn’t it? など)
WordPress 自作フォーム その2(注意点とエラー:This is somewhat embarrassing, isn’t it? など)

前回(WordPress 自作フォーム 1)のつづきです。 今回は細

Wordpress 自作フォーム
WordPress 自作フォーム その1(サンプルと設置)

Wordpress でプラグインを使わずにフォームをやってみます。

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

Javascript でマウスドラッグのテストをしていきます。 分か

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

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

Wordpress VR Test
WordPress で VR させて、360°のパノラマ画像を表示する

WordPress.com内ショートコードで VR させる Word

→もっと見る

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