A-frame.ioを使ってホームページ上に360°画像を表示する

360度カメラで撮影した画像を張り付けたホームページを見たことがある人もいると思います。https://www.thetalab.ricoh/ といったサイトを見るとイメージがわくと思います。
aframe.ioというフレームワークを使うと簡単に実装できるので、今回のホームページのリニューアルにあわせて組み込むことにしました。

準備

  • 360°カメラ =今回はRICHOのthetaを購入しました。360度画像を撮影できる優れものです。教室の様子を何枚か撮影しました。
  • Aframe.iohttps://aframe.io/) =Homepageで3Dを扱うためのフレームワークです。スマホでみるとVRのように立体視することもできます。

360°画像の表示

360度画像を表示するのはとても簡単です。以下のページを用意するだけです。thetaで撮影した画像をtheta.jpgとして同じ

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene">
      <a-sky src="theta.jpg" rotation="0 -130 0"></a-sky>
    </a-scene>
  </body>
</html>

ここで注意することは、「HTMLファイルをHTTPサーバ経由で取得する必要がある」ということです。A-frameで画像を扱う場合、ページをWebサーバから取得する必要があるという制約があるためです。HTMLファイルを作成して、エクスプローラー(Windows)やファインダー(macOS)でファイルをダブルクリックすると、ページが起動します。この違いは、ブラウザのアドレス部分をみるとよくわかります。
http-file

自分で試す場合には、

  • パソコンでWebサーバを起動して、そこからHTMLファイルや画像を取得する
  • ネット上にファイルをアップロードする
    といったことが必要になります。

ホームページ上への埋め込み

上記のページでは360度画像がブラウザ全画面に表示されます。ページの一部分だけに表示したいこともあるでしょう。その場合はa-scene要素にembedded属性を追加して、サイズを明示的に指定します。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script>
  <style>
    #scene, a-scene {
      width: 100%;
      height: 400px;
    }
  </style>
</head>
<body>
  <div id="scene">
    <a-scene embedded>
      <a-sky src="theta.jpg" rotation="0 -130 0"></a-sky>
    </a-scene>
  </div>
</body>
</html>

これでページ上の一部に360°画像が表示されるようになります。