Hatena::ブログ(Diary)

aikeの日記 RSSフィード

2014-01-02 RICOH THETA画像を表示するJavaScriptライブラリ作った

絶賛通常営業中。

普段からいろいろプログラムは作っているもののこのところ仕事が立て込んでいてブログが全然書けなかったので休み中に棚卸し的に書いていきます。

 

RICOH THETAの画像を公開するとなると公式サイトに上げるのが普通なんですがやっぱりそれなりに不満点もあって、全公開になってしまうとか、ファーストビューが指定できないとか、顔や見せたくないところを加工してから公開したいとかそういうことがやりにくくてアップに躊躇したりということもあったり。

 

そんなわけで、とりあえず自サイトに上げて表示できるようなライブラリをThree.jsを使って作ってみました。まだまだ機能は少ないですが徐々に改善する予定です。

 

本当はJavaScriptで書けばPCでもスマホでも同じように見せられるかと思って作ったんですがiOSブラウザWebGLをフルサポートしてないみたいでだめでした。あと、PCでも現行のSafariはなぜかデフォルトWebGLが無効になっているようでなんだかいろいろがっかりです。このライブラリは人類にはまだ早すぎたのかもしれません。

 

■デモサイト

http://aikelab.net/thview/

 

■機能と制限

自サイトにアップした全天球画像を表示します。

転送速度やプライバシーなどの理由で元画像を縮小しても表示できます。

元画像サイズに関わらず表示エリアの縦横サイズを指定できます。

ファーストビュー、ズーム、自動回転の有無、回転速度などを細かく指定できます。

ドラッグして向きを変えることはできません(今のところ)。

カメラを上下に動かして空や地面を見ることはできません(今のところ)。逆に自分が見えなくて良いかも。

自動で水平を補正することはできません。手動で補正することは可能です。

画像は同じサーバ(Same Origin)にある必要があります。そんなわけではてなダイアリーには埋め込めないです。

PCのChromeFirefoxだと良い感じに見えます。それ以外の環境だといろいろアレな感じ。

 

まあ見ての通り実質50行くらいのライブラリなので気になるところがあれば好きに改造してください。

 

■埋め込み方

シンプルな例

<div id="ph1"></div>
<script type="text/javascript" >
    var img1 = new ThView({id:'ph1', file:'photo.jpg'});
</script>

オプション指定付きの埋め込み例

<div id="ph2"></div>
<script type="text/javascript" >
    var img2 = new ThView({
        id:'ph2',
        file:'photo2.jpg',
        firstview:180,
        zoom:100,
        width:300,
        height:200,
        rotation:true,
        speed:-30});
</script>

 

オプション一覧

キーワード意味
id親エレメント(DIV)のID (必須)
file画像ファイル名 (必須)
width幅のピクセル
height縦のピクセル
rotation自動回転の有無
speed回転速度(負の値で反対方向へ回転)
zoomズーム
firstview初期表示位置
degree軸の角度調整 [x, y, z]

 

ソースコード

https://github.com/aike/thview.js

 

2014.07.26 追記

ドラッグして上下左右好きな方向を向けるようにしました

はまさんはまさん 2014/08/19 18:29 自分もTHETAを購入しまして、aikeさんのソースを組む込んで見ました。素晴らしいですね。感動しました。そこで一つ質問です。zoomの件です。デモでもズームは確認できないのですが、thview.jsのどこかをいじればzoomできるのでしょうか?ご指導いただけると幸いです。

aikeaike 2014/08/21 01:20 あー、気づいてなかったけどSafariだとバグってズームできないですね。原因調べてみます。

aikeaike 2014/08/21 01:25 firefoxもだめか。

aikeaike 2014/08/24 18:00 バグ直したのでFirefoxやSafariでもホイールでズームできるようになったと思います。

かもきかもき 2014/11/17 02:46 初めまして、検索してたどり着きました!
すごく便利ですね!ぜひ使わせてください!

恐縮ですが、1つだけぜひお願いが・・・。
公式と同じように、マウスで画像を触ったら回転を解除する仕様にできないでしょうか・・・。
手前勝手で申し訳ありませんが、何卒オプションに追加いただけるようお願いしますm(_ _;)m

かもきかもき 2014/11/17 02:46 初めまして、検索してたどり着きました!
すごく便利ですね!ぜひ使わせてください!

恐縮ですが、1つだけぜひお願いが・・・。
公式と同じように、マウスで画像を触ったら回転を解除する仕様にできないでしょうか・・・。
手前勝手で申し訳ありませんが、何卒オプションに追加いただけるようお願いしますm(_ _;)m

かもきかもき 2014/11/17 02:59 連投すみません・・・。
スマホで見た際に指での操作が出来ず、スマホを動かすと写真も動くカタチになっていました。
お時間ある時に対応いただけるとうれしいです(´;ω;`)

minoruminoru 2015/02/12 14:15 すごいですね。これって、パノラマ写真のみですか?
全天球は無理ですか?

326326 2015/09/30 14:23 はじめまして。THETA画像の自サイト埋め込みでWEB検索したらたどり着きました。まさに探していたものそのものです。最近では、モバイルブラウザもwebGLに対応しているバージョンもでてきてるのでスマホ用サイトでも見れる様にはなってきました。
そこで、レスポンシブにも対応させたいと思ったのですが・・・。
私の力ではできませんでした。親要素の<div>などのwidthに依存するようにしたいのですが・・・
だれか教えてください。

326326 2015/09/30 18:59 ウィンドウ幅をjavascriptで取得して、widthに渡してあげることでレスポンシブらしくなりました。他にいい方法がありましたらご教授ください。

TakaTaka 2016/02/19 10:54 管理人様
素晴らしいですね!Webに使わせて頂きました。ありがとうございます!スマホやタブレットで見ると加速度センサーと連動しVRみたいで、いい感じです!アップする画像はシータのアプリで天頂補正書き出しする必要がありそうですね。

hidemaruhidemaru 2016/02/27 08:15 aike様
ステキなライブラリを公開していただいてありがとうございます!
貴ライブラリを利用させていただいて、ブックマークレットを作ってみました。需要あるかどうかわかりませんが(汗)。