WebVRフレームワークA-Frameを用いて全天球画像ビューアを作る

最近、友人がRICOHの360度カメラTHETAを購入したとかで、全天球画像が送られてきたので、その画像を料理しようと思いました。

「天球画像　ビューア」とかで検索すると、WebVRフレームワークA-Frameという面白そうなものを発見したので、サクッと全天球画像ビューアを作ってみました。

A-Frameの公式サイトはこちら。
https://aframe.io/examples/showcase/sky/

できたもの

テキトーに作ったシンプルな360°全天球画像ビューアです。
https://sy-base.com/360viewer/

Chromeでしか動作確認していませんのでご了承を。（暇があったら修正するかもです。）
（gyroセンサ搭載の）スマホから閲覧した場合、視線とともにデバイスを左右に動かすと、表示画像の視線方向も変わります。VRモードも搭載しています。

画像のような感じに、左上に入力画像を選択するボタンがあるのみで、あとは、全画面に360°全天球画像が表示されるだけのシンプルなビューアです。

A-Frameの使い方

使い方とか書いてますが、説明するのも面倒なので、ソースコードを載せておきます。

iOS13搭載のappleデバイスでgyroセンサを使う場合、もう一工夫必要になります。以下の記事で詳しく説明しています。
iOS13にてjavascriptのdevicemotionを取得する | MY ROBOTICS

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>360viewer</title>
		<script src="https://aframe.io/releases/latest/aframe.min.js"></script>
    <script type="text/javascript">
      window.onload = function() {
        var file = document.querySelector( '#fileinput' );
        if ( file == null ) return;
				file.onchange = function () {
					var a_scene = document.getElementsByTagName( "a-scene" )[0]
					var a_sky = a_scene.getElementsByTagName( "a-sky" )[0];
					if ( a_sky != null ) a_scene.removeChild( a_scene.getElementsByTagName( "a-sky" )[0] );
					var reader = new FileReader();
					reader.readAsDataURL( file.files[0] );
					window.URL = window.URL || window.webkitURL ;
					var src = window.URL.createObjectURL( file.files[0] );
					console.log( "image loaded:", src );
					var data_url = reader.result;
					reader.onload = function () {
						a_scene.insertAdjacentHTML( 'afterbegin', '<a-sky src="' + src + '"></a-sky>' );
					};
				};
      }
    </script>
	</head>
	<body>
		<input type="file" id="fileinput" accept="image/*" style="position: fixed; z-index: 9999;">
		<a-scene id="a-scene">
			<!-- <a&#45;sky src="./test.jpg"></a&#45;sky> -->
		</a-scene>
	</body>
</html>

a-senseという箱を用意して、その中にa-sky要素を動的に配置しているだけのシンプルなソースコードになっています。
左上にfileinputのボタンを作成し、その内容が変更された時に、a-skyを生成する。といった手順になります。

以上、WebVRフレームワークA-Frameを用いた全天球画像ビューアの作成についてでした。

Hello, world!

WebVRフレームワークA-Frameを用いて全天球画像ビューアを作る

できたもの

A-Frameの使い方

関連記事

chromedriverとgoogle chromeのバージョン合わせ

javascriptにおけるsleep,wait関数

webページでドラッグ操作。jquery-uiを使う。