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

関連記事

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

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

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

記事を読む

blender 地球

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

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

記事を読む

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

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

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

記事を読む

canvas タグでお絵描き(レスポンシブ)

canvas タグでお絵描き(レスポンシブ)

簡単なメモ張みたいなものが欲しいので作ってみました。 canvas のレスポンシブが少しひっかかっ

記事を読む

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

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

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

記事を読む

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

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

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

記事を読む

blender 球 テクスチャ

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

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

記事を読む

WEBページをアプリっぽくする(サービスワーカーでホーム画面に追加)

WEBページをアプリっぽくする(サービスワーカーでホーム画面に追加)

前回作ったお絵かきページを、簡単にアプリっぽくしようと思います。 具体的には、スマホで最近よく見か

記事を読む

画像の拡大・縮小 タッチイベント

画像の拡大縮小を javascript の touch イベントでやってみる

画像の幅と高さを取得 まずは、neko.jpg という画像を用意して、幅と高さを取得します。

記事を読む

Javascript ノード の取得や挿入

Javascript ノードの取得や挿入

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

記事を読む

brender javascript Three.js WebGL

Message

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

WEBページをアプリっぽくする(サービスワーカーでホーム画面に追加)
WEBページをアプリっぽくする(サービスワーカーでホーム画面に追加)

前回作ったお絵かきページを、簡単にアプリっぽくしようと思います。 具

canvas タグでお絵描き(レスポンシブ)
canvas タグでお絵描き(レスポンシブ)

簡単なメモ張みたいなものが欲しいので作ってみました。 canvas

フルスクリーンを CSS だけで、vw, vh, vmin, vmax を試してみる(スクロールバーも消したい)
フルスクリーンを CSS だけで、vw, vh, vmin, vmax を試してみる(スクロールバーも消したい)

ビューポートの単位 vw, vh, vmin, vmax CSS で

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

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

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

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

→もっと見る

    • 201904
      Mon Tue Wed Thu Fri Sat Sun
      1234567
      891011121314
      15161718192021
      22232425262728
      2930
    にほんブログ村 IT技術ブログへ にほんブログ村 IT技術ブログ PHPへ にほんブログ村 IT技術ブログ WordPressへ
    にほんブログ村 FC2 Blog Ranking
    PAGE TOP ↑