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-sky src="./test.jpg"></a-sky> -->
</a-scene>
</body>
</html>
a-senseという箱を用意して、その中にa-sky要素を動的に配置しているだけのシンプルなソースコードになっています。
左上にfileinputのボタンを作成し、その内容が変更された時に、a-skyを生成する。といった手順になります。
以上、WebVRフレームワークA-Frameを用いた全天球画像ビューアの作成についてでした。
関連記事
javascriptにおけるsleep,wait関数
javascriptで一定時間sleepする関数を使いたくなったので、その方法をメモしておきます。 やりたいこと c言語で言う所のこういう処理をjavascriptでもやりたくなりました。 while (1) { if ( is_ready() ) break; usleep( 1000 […]
MySQL カラムの組み合わせでUNIQUE属性を付与する
MySQLテーブルに複数カラムの組み合わせでユニーク属性を付与する方法について。設定したいと思う度に構文を忘れてググる事が多いので、備忘録として書き留めたいと思います。 UNIQUE属性の設定 カラムに対してユニーク属性を設定すると、そのカラムに対して値の重複が禁止されます。 ただし、N […]
jsを用いて動的にscriptを読み込む際の注意点
javascriptを用いて動的にscriptを読み込む際、ハマってしまったのでメモしておきます。 やりたいこと <head> <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery. […]