A-Frameの使い方｜Yuu's Memo

皆さんこんにちは！

最近、WebサイトやSNSで３６０度画像や動画を使用した「バーチャルコンテンツ」を目にする機会が増えたと思います。

身近なところでは、Googleストリートビューなどが有名ですね。

コロナウイルスの影響もあり、企業の展示会や会社説明会、ハウスメーカーや自動車販売メーカーなども、次々とバーチャルコンテンツを作成し、公開しています。

そういった時代の流れで、自社のホームページや採用サイトなどでも、バーチャルコンテンツを作ってみたいと考えている企業も多いのではないでしょうか？

ただ、バーチャルコンテンツを作成している業者さんや、サービスは非常に高額ですし、自社で作成するにしても、「何が必要で、何をすれば良いのかわからない。」といったことになってしまっているのではないでしょうか。

この記事を読めば、「バーチャルコンテンツ」を実装するのに必要な知識・技術などが最低限理解できます。

パノラマ画像の用意

360°の全方向を自由に見渡せるパノラマコンテンツを作成するには、まず「パノラマ画像」を用意する必要があります。
※下の画像の様なものです。

アプリでも最低限作れるのですが、品質が悪くなるので専用のカメラを購入した方が良いです。

私は下記のカメラ（RICOH THETA SC2）を使用して撮影しています。
スマートフォンとの連携が出来、スマートフォンから撮影や確認ができるのでお勧めです。

リンク

もう少しグレードが高く、良いものを購入したい方はこちらが一番お勧めです。

リンク

もし、今回画像をせずに自分で作ってみたい方は、サンプル画像がたくさん出ていますので、「パノラマ画像」で検索するか、下記リンクのファイルをご使用ください。（私が撮った下手な画像ですみません^^;）

vr-sample.jpg ダウンロード

HTMLファイルの準備

それでは実際に作っていきましょう！

XAMPPの方は、Apacheを起動してください。
それ以外の方は、Webサーバーを起動してください。

まずはルートディレクトリの中に、ディレクトリを作成(私は「vr-1」という名前でディレクトリを作成しました。)し、その中にHTMLファイルを「index.html」と名前を付けて作成し、下記のコードを記述してください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>バーチャルコンテンツのサンプル</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
    <!-- ライブラリの読み込み ※バージョンはダウンロードしたもの -->
    <script src="../vr-1/js/aframe-v1.0.4.min.js"></script>
</head>

<body>
    <a-scene>
        <a-assets>
            <img id="vr" src="../vr-1/img/vr-sample.jpg">
        </a-assets>
        <a-sky src="#vr" rotation="0 180 0"></a-sky>
    </a-scene>
</body>
</html>

index.htmlと同じ階層に、「images」と「js」というディレクトリを作成してください。

「images」の中に、パノラマ画像を移動してください。

ライブラリのダウンロード（A-Frame）

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

難しいことを書いてありますが、簡単にバーチャルコンテンツを利用できる様にし、良く利用されているツールが「A-Frame」だということです。
※詳しくは、公式サイトをご覧ください。

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

展開したフォルダーの、
distフォルダーにaframe-v1.0.4.min.js
というファイルがあるので、作業する任意の場所に格納します。そのJavaScriptファイルを、HTMLから読み込みます。

<!-- ライブラリの読み込み ※バージョンはダウンロードしたもの -->
    <script src="../vr-1/js/aframe-v1.0.4.min.js"></script>

aframe-v1.0.4.min.jsのバージョンは、ダウンロードする時期によって変わる可能性があります。

あとはパノラマ画像を下記の様にタグに囲んでやれば表示できます。

   <a-scene>
        <a-assets>
            <img id="vr" src="../vr-1/img/vr-sample.jpg">
        </a-assets>
        <a-sky src="#vr" rotation="0 180 0"></a-sky>
    </a-scene>

凄く簡単に、Web上でパノラマ画像を動かすことが出来たと思います。
ただ、これだけでは企業で使用しているような「VRツアー」や「VR展示会」の様なものは作成出来ません。

「<a-」から始まるタグの使い方は、公式サイトに詳しく説明があります。

また、「Showcase」には、素晴らしいバーチャルコンテンツが沢山あるので是非一度ご覧になってください！

次回は、複数のパノラマ画像を利用してバーチャルツアーのようなものを作ってみたいと思います。