Three.jsでスマホのジャイロセンサーを利用する

スマートフォンのジャイロセンサーで傾きを検知できるが、それを利用して、スマートフォンを傾けることでThree.jsの3D空間での視点を変えることができる。360度画像（Equirectangular）を、スマートフォンを傾けて見られるようにする。Three.jsのバージョンはr79。

１．DeviceOrientationControls.jsの読み込み

ダウンロードしたThree.jsライブラリの圧縮ファイルを解凍し、\three.js-master\examples\js\controls\DeviceOrientationControls.jsを適当なフォルダにコピーする。ここではjs_r79というフォルダを作成してコピー。それをhtmlから読み込む。

２．DeviceOrientationControlsインスタンスの作成

// DeviceOrientationControlsインスタンス作成
var controls = new THREE.DeviceOrientationControls( camera );

３．オブジェクトの作成

360度画像を読み込み、球体の裏側にマップする。

// 球体の作成
var geometry = new THREE.SphereGeometry( 5, 32, 16 );
// テクスチャを球体の裏側にマップする
geometry.scale( - 1, 1, 1 );
// テクスチャ画像の読み込み
var texture = new THREE.TextureLoader().load( 'sunflower_er.jpg' );
// マテリアルの作成
var material = new THREE.MeshPhongMaterial( { map: texture, color: 0xffffff } );
// オブジェクトの作成
var mesh = new THREE.Mesh( geometry, material );
// オブジェクトをy軸に沿って回転
mesh.rotation.y = Math.PI/2;

４．DeviceOrientationControlsのアップデート

レンダリングループでDeviceOrientationControlsをアップデートする。

controls.update();

５．結果

スマートフォンのブラウザで開くと以下のような画像が表示され、傾きに応じて視点を変えて画像を見ることができる。

• サンプルの表示