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

関連記事

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

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

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

記事を読む

Blender ボーンの追加

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

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

記事を読む

画像加工 cropbox.js

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

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

記事を読む

blender 環境テクスチャ

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

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

記事を読む

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

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

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

記事を読む

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

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

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

記事を読む

blender 球 テクスチャ

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

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

記事を読む

Wordpress VR Test

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

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

記事を読む

Javascript ノード の取得や挿入

Javascript ノードの取得や挿入

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

記事を読む

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

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

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

記事を読む

brender javascript Three.js WebGL

Message

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

CodeIgniter インストール
Codeigniter インストールとバージョンアップ2→3 PHP 5→7 メモ

Codeigniter インストール Codeigniter をサイ

wordpress カスタム投稿を一覧(ループ)で表示する
wordpress カスタム投稿を一覧(ループ)で表示する

カスタム投稿を一覧で表示する方法がいろいろあります。 query_p

wordpress カスタム投稿で 2ページ目以降が404
wordpress カスタム投稿で 2ページ目以降が404になってしまう

wordpress のカスタム投稿で、ニュースのページを作っていました

ロリポップでWordPressのPHPバージョンを5から7にする
ロリポップでWordPressのPHPバージョン7.1に変更後「サイトに技術的な問題が発生しています。」

WordPress.org の推奨環境 PHP7以上 MyS

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

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

→もっと見る

    • 201912
      Mon Tue Wed Thu Fri Sat Sun
      1
      2345678
      9101112131415
      16171819202122
      23242526272829
      3031
    にほんブログ村 IT技術ブログへ にほんブログ村 IT技術ブログ PHPへ にほんブログ村 IT技術ブログ WordPressへ
    にほんブログ村 FC2 Blog Ranking
    PAGE TOP ↑