RICOH THETA で撮影した画像をweb埋め込みしてみたい

2018年11月5日

RICOH THETA

360度画像、とか、全天球画像、とか言われる画像がワンタッチで取れる優れもののカメラ。

VRもどきをやってみたくて購入したものの、撮った画像を自分で見てうふふと楽しむばかりで、公式のアップローダにアップするのもときめかないし……

ということで、自力埋め込みに挑戦。

A-frame

説明

とりあえずこれだけで動く。

DEMO

……ページ全体が全天球モードになるので、iframe埋め込みとかで工夫しないとページ内のコンテンツにはできないかも?

<a-scene>のタグにembededを付けるとページ埋め込みモードになります。

 

デフォルトでカードボードボタン(VRゴーグルモード用ボタン)がついているのでスマホでのリッチなVR体験が出来そうです。

画像アップだけに使うにはもったいないくらいいろいろできるみたいなので、研究の価値あり。

 

thview.js

説明

three.js系

demo

以下のオプションが渡せます。

  • id(required) … ビューアーの id
  • file(required) … 画像ファイルのパス
  • width … ビューアーの横幅のサイズ
  • height … ビューアーの縦幅のサイズ
  • rotation … 自動回転するかどうかのフラグ
  • speed … 回転速度(負の値を渡すと反対方向に回転)
  • firstview … 初期位置
  • degree 軸の角度 [x, y, z]

Google VR View

説明

DEMO

こっちの方が簡単に見えるけれども

サーバーがクロスドメインを許可している場合に限ります。

というところがキモかと。

htaccessが触れるサーバーじゃない、もしくは知識もないし下手にファイルを触りたくないという場合は自分のサーバーに必要なファイルをアップすることでも出力可能です。

ということなので、
横着せずにちゃんと埋めて使った方がよさそうです。