t's space.

360度画像をA-Frameで表示する

久々にWeb関係の記事を書いたような気がします。
今回は、この前GoProMAXで撮影した360度画像でA-Frameを使用して表示させたいと思います。

前回撮影した360度画像

▼ 前回の記事はこちらから

A-Frameとは

A-Frame(エーフレーム)とは、バーチャルリアリティ(VR)体験を構築するためのオープンソースのWebフレームワークの一つである[1]。SupermediumおよびGoogleの開発者によって保守されている。A-Frameは、開発者がHTMLを使用して3DおよびWebVRシーンを作成できるThree.js用のエンティティ・コンポーネント・システムフレームワークであり、Unityなどのエンジンで使用されている一般的なゲーム開発パターンを取り入れながら、Web開発者やデザイナーによく知られているオーサリングツールを提供する。

Wikipediaより

簡単に言うと、HTML上で手軽にVR環境を実装することができます。

まずは、そのA-Fremeを導入しましょう。

A-Frameの導入

※ローカル環境の場合、正常に動作しません。サーバーにアップロードするか、MAMPなどの仮想サーバーにてhtmlファイルをアップロードして閲覧してください。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <.script src="https://aframe.io/releases/0.8.0/aframe.min.js"><./script>
    <title>360Image</title>
  </head>
  <body>
  </body>
</html>

※scrpitタグのコンマ(.)は削除してください。

画像を設置する

  <body>
    <a-scene>
      <a-sky src="img.jpg" rotation="0 -130 0"></a-sky>
    </a-scene>
  </body>

実装したものはこちら

全画面での閲覧方法

右下にVRゴーグルのアイコンがある。

右下にあるアイコンをクリックすると全画面になります。
なお、スマホから閲覧すると、VRゴーグル用になります。

Comment