A-FrameでHTMLをマークアップするように手軽に実装する方法

360°パノラマビューワーのような3Dコンテンツを実装する聞くと難しく感じる方もいると思いますが、MozillaのVRチームが開発した3Dライブラリ「A-Frame」を使うと、HTMLのマークアップのように手軽に実装できます。

A-Frameの公式ページ

▲A-Frameの公式ページ

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

A-Frameを使った静止画用パノラマビューワー

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

A-Frameを使った動画用パノラマビューワー

ここでは、JavaScriptにあまり触れたことのない方を対象に、A-Frameのダウンロード方法からパノラマ静止画・動画を表示できる360°パノラマビューワーの実装方法までを順を追って紹介します。手順通りに進めれば十数行のコードで実装できます。

※ A-Frameの詳しい使い方は記事「HTMLタグで本格VRコンテンツが作れる! Mozillaが開発した3Dライブラリ「A-Frame」がすごい」を参照ください。

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

A-FrameのGitHubページからライブラリをダウンロードします。GitHubページの右上にある[Clone or download]ボタンをクリックし、その中から[Download ZIP]をクリックします。すると、ライブラリのデータが入ったZIPファイルがダウンロードされるので、任意の場所に展開します。

A-FrameのGitHubページのキャプチャー

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

展開したaframe-masterフォルダー内のdistフォルダーにaframe-v0.4.0.min.jsというJavaScriptファイルがあるので、作業する任意の場所に格納します。そのJavaScriptファイルを、次のようにHTMLから読み込むだけで準備完了です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <!-- A-FrameのJavaScriptファイルを読み込みます -->
  <script src="../common/js/aframe-v0.4.0.min.js"></script>
</head>
<body>
<!-- A-Frameのタグを記述します -->
</body>
</html>

3. シーンの作成

球体とカメラを配置する3D空間(シーン)を作成します。A-Frameでは、シーンにオブジェクトを追加してコンテンツを作っていきます。a-scene要素をbody要素内に記述すると簡単にシーンが作成できます。

<body>
  <!-- シーン -->
  <a-scene></a-scene>
</body>

4. パノラマ静止画の読み込み

A-Frameでパノラマ静止画などの外部ファイルを使用するときは、a-assets要素内にimg要素で指定します。読み込んだパノラマ静止画をテクスチャーとして参照するためにid属性を記述します。

<body>
  <!-- シーン -->
  <a-scene>
    <!-- アセット -->
    <a-assets>
      <img id="sky" src="../common/images/image.jpg">
    </a-assets>
  </a-scene>
</body>

5. 読み込んだパノラマ静止画を背景に指定する

読み込んだパノラマ静止画を背景として設定するには、a-sky要素を指定します。a-sky要素のsrc属性に、img要素のid属性を記述すると背景として表示されます。これでパノラマ静止画を表示する360°パノラマビューワーの完成です。

<body>
  <!-- シーン -->
  <a-scene>
    <!-- アセット -->
    <a-assets>
      <img id="sky" src="../common/images/image.jpg">
    </a-assets>
    <!-- 全天球背景 -->
    <a-sky src="#sky" rotation="0 -130 0"></a-sky>
  </a-scene>
</body>

360°パノラマビューワーの仕組みで「中心にカメラを配置する」と解説しましたが、A-Frameでは初期状態でカメラがシーンの中央に配置されているため、特にカメラの設定は行いません。

発展:パノラマ動画を読み込む場合

パノラマ静止画の代わりにパノラマ動画を背景として表示するには、a-assets要素内にvideo要素を指定し、a-videosphere要素で参照するだけで簡単に実装できます。

<body>
  <!-- シーン -->
  <a-scene>
    <!-- アセット -->
    <a-assets>
      <!-- 動画をループ再生する -->
      <video id="video" src="../common/videos/video.mp4" loop="true"></video>
    </a-assets>
    <!-- 全天球背景 -->
    <a-videosphere src="#video" rotation="0 -130 0"></a-videosphere>
  </a-scene>
</body>

次のページでは、Three.jsで本格的に360°パノラマビューワーを実装する方法を紹介します。