RICOH THETA
360度画像、とか、全天球画像、とか言われる画像がワンタッチで取れる優れもののカメラ。
VRもどきをやってみたくて購入したものの、撮った画像を自分で見てうふふと楽しむばかりで、公式のアップローダにアップするのもときめかないし……
ということで、自力埋め込みに挑戦。
目次
A-frame
とりあえずこれだけで動く。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>VRサンプル</title>
<!-- A-FrameのライブラリをCDNで読み込む -->
<script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script>
</head>
<body>
<!-- シーンの定義 -->
<div class="vr-wrap">
<a-scene>
<!-- 全天球の背景画像として全天球写真を読み込む -->
<a-sky src="photo.JPG"></a-sky>
</a-scene>
</div>
</body>
</html>
……ページ全体が全天球モードになるので、iframe埋め込みとかで工夫しないとページ内のコンテンツにはできないかも？
<a-scene>のタグにembededを付けるとページ埋め込みモードになります。
<a-scene embedded>
デフォルトでカードボードボタン（VRゴーグルモード用ボタン）がついているのでスマホでのリッチなVR体験が出来そうです。
画像アップだけに使うにはもったいないくらいいろいろできるみたいなので、研究の価値あり。
thview.js
three.js系
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r76/three.js'></script>
<script src='https://cdn.rawgit.com/aike/thview.js/master/thview.js'></script>
<script>
window.onload = function () {
var path = 'photo.JPG';
THREE.ImageUtils.crossOrigin = "*";
var img1 = new ThView({id: 'viewer', file: path});
};
</script>
</head>
<body>
<div id="viewer"></div>
</body>
</html>
以下のオプションが渡せます。
- id(required) … ビューアーの id
- file(required) … 画像ファイルのパス
- width … ビューアーの横幅のサイズ
- height … ビューアーの縦幅のサイズ
- rotation … 自動回転するかどうかのフラグ
- speed … 回転速度(負の値を渡すと反対方向に回転)
- firstview … 初期位置
- degree 軸の角度 [x, y, z]
Google VR View
<iframe width="600" height="400" src="//storage.googleapis.com/vrview/index.html?image=//deep-space.blue/testing/vr/photo.JPG"></iframe>
こっちの方が簡単に見えるけれども
サーバーがクロスドメインを許可している場合に限ります。
というところがキモかと。
htaccessが触れるサーバーじゃない、もしくは知識もないし下手にファイルを触りたくないという場合は自分のサーバーに必要なファイルをアップすることでも出力可能です。
ということなので、
横着せずにちゃんと埋めて使った方がよさそうです。
コメント