Three.jsで本格的に実装する方法

自由にカスタマイズしたり、凝ったインタラクションを加えたい場合は、JavaScript製の3Dライブラリとして有名なThree.jsで実装します。Three.jsを使えばA-Frameで実装するよりも設計の自由度が高いため、幅広い用途で利用できます。

Three.jsで作成したパノラマ静止画を表示する360°パノラマビューワーをお試しください。

Three.jsを使った静止画用パノラマビューワー

続いて動画バージョンのデモもお試しください。スマートフォン・タブレットは未対応なので、パソコンで再生ください。

Three.jsを使った動画用パノラマビューワー

ここでは、JavaScriptの経験がある方を対象に、360°パノラマビューワーの実装に便利なモジュールの使い方から、パノラマ静止画・動画を表示できる360°パノラマビューワーの実装方法までを順を追って紹介します。

1. ライブラリのダウンロード

Three.js公式サイトにある[download]ボタンをクリックし、ライブラリのデータが入ったZIPファイルをダウンロードします。ZIPファイルを展開したthree.js-masterフォルダーから次の3つのJavaScriptファイルを任意の場所に格納します。

  • build/three.min.js
    Three.jsの本体ライブラリ
  • examples/js/controls/DeviceOrientationControls.js
    スマートフォンのジャイロセンサーの傾きをコンテンツに反映させるモジュール
  • examples/js/controls/OrbitControls.js
    パソコンで確認時にマウスドラッグで視点を切り替えられるようにするモジュール

2. HTMLからライブラリを読み込む

先ほどダウンロードしたライブラリと、メインの処理を実装するJavaScriptファイルをHTMLから読み込みます。

<!-- three.jsの読み込み -->
<script src="../common/js/three.min.js"></script>
<!-- DeviceOrientationControls.jsの読み込み -->
<script src="../common/js/DeviceOrientationControls.js"></script>
<!-- OrbitControls.jsの読み込み -->
<script src="../common/js/OrbitControls.js"></script>
<!-- main.jsの読み込み -->
<script src="js/main.js" ></script>

3. シーンの作成

球体とカメラを配置するシーンを作成します。

// シーンの作成
scene = new THREE.Scene();

4. カメラの作成

カメラを作成し、先程のシーンへXYZ座標全てが0になるように配置します。

// カメラの作成
camera = new THREE.PerspectiveCamera(75, width / height, 1, 1000);
camera.position.set(0, 0, 0);
scene.add(camera);

5. 球体を作成してパノラマ静止画をテクスチャーとして設定

球体を作成してパノラマ静止画をテクスチャーとして設定します。設定できたらシーンへ配置します。

// 球体の形状を作成
var geometry = new THREE.SphereGeometry(5, 60, 40);
geometry.scale(-1, 1, 1);

// マテリアルの作成
var material = new THREE.MeshBasicMaterial({
  // 画像をテクスチャーとして読み込み
  map: THREE.ImageUtils.loadTexture("../common/images/image.jpg")
});

// 球体(形状)にマテリアル(質感)を貼り付けて物体を作成
sphere = new THREE.Mesh(geometry, material);

// シーンに追加
scene.add(sphere);

6. パソコンで閲覧時の視点操作する処理を実装

パソコンで閲覧時は、マウスドラッグで視点を操作します。実装にはダウンロードしたOrbitControls.jsを使います。パソコンでの操作を想定していない場合は、省いてしまっても問題ありません。

// パソコン閲覧時マウスドラッグで視点操作する
function setOrbitControls() {
  controls = new THREE.OrbitControls(camera, element);
  controls.target.set(
    camera.position.x + 0.15,
    camera.position.y,
    camera.position.z
  );
  // 視点操作のイージングをONにする
  controls.enableDamping = true;
  // 視点操作のイージングの値
  controls.dampingFactor = 0.2;
  // 視点変更の速さ
  controls.rotateSpeed = 0.1;
  // ズーム禁止
  controls.noZoom = true;
  // パン操作禁止
  controls.noPan = true;
}

7. スマートフォンで閲覧時の視点操作する処理を実装

スマートフォンで閲覧時は、端末に搭載されているジャイロセンサー(傾き)で視点を操作します。実装にはダウンロードしたDeviceOrientationControls.jsを使います。

// スマートフォンの場合はジャイロセンサーでの操作へ変更
window.addEventListener("deviceorientation", setOrientationControls, true);

// ジャイロセンサーで視点操作する
function setOrientationControls(e) {
  //スマートフォン以外で処理させない
  if (!e.alpha) {
    return;
  }
  controls = new THREE.DeviceOrientationControls(camera, true);
  controls.connect();
  controls.update();
  window.removeEventListener("deviceorientation", setOrientationControls, true);
}

8. 視点操作処理をレンダラーに登録

最後に3Dの描画をレンダリングするレンダラーに、視点操作処理を登録すると視点操作が可能になります。これでパノラマ静止画を表示する360°パノラマビューワーの完成です。

function render() {
    requestAnimationFrame(render);
    renderer.render(scene, camera);
    controls.update();
}

発展パノラマ動画をテクスチャーとして設定する場合

「5. 球体を作成してパノラマ静止画をテクスチャーとして設定」のコードを次のように変更すると、パノラマ動画をテクスチャーとして設定できます。

// 球体の形状を作成
var geometry = new THREE.SphereGeometry(5, 60, 40);
geometry.scale(-1, 1, 1);

// 動画の読み込み
var video = document.createElement("video");
video.src = "../common/videos/video.mp4";
video.load();
video.play();
video.loop = true;

// テクスチャーにvideoを設定
texture = new THREE.VideoTexture(video);
texture.minFilter = THREE.LinearFilter;
texture.magFilter = THREE.LinearFilter;
texture.format = THREE.RGBFormat;

// マテリアルの作成
var material = new THREE.MeshBasicMaterial({
  // 画像をテクスチャーとして読み込み
  map: texture
});

// 球体(形状)にマテリアル(質感)を貼り付けて物体を作成
sphere = new THREE.Mesh(geometry, material);

// シーンに追加
scene.add(sphere);

最後に

今回は、「A-Frame」と「Three.js」を使った360°パノラマビューワーの基本的な実装方法を紹介しました。こちらをベースに、3Dモデルを動かしたり、インタラクションによってパノラマを切り替えたりとカスタマイズを加えることで、オリジナルの360°パノラマコンテンツが作成できます。

また、パノラマはVR(Virtual Reality)と相性がよく、作成した360°パノラマビューワーに一手間加えるだけで、VRコンテンツも作成できます。ICS MEDIAでは、1,000円ほどで購入できるダンボール製VRヘッドセット「Google Cardboard」を使って、手軽にVRコンテンツを作成する記事を公開していますので、ぜひ挑戦してみてください!

Google Cardboard

▲Google Cardboard