- 追加された行はこの色です。
- 削除された行はこの色です。
- WebVR へ行く。
#author("2021-05-20T15:15:08+09:00;2019-07-05T20:51:24+09:00","default:inoue.ko","inoue.ko")
*WebVR API
https://developer.mozilla.org/ja/docs/Web/API/WebVR_API
~
&color(red){この仕様は非推奨となりました。};
~
WebVR APIは、MozillaとW3Cが共同で仕様の策定を進めているもので、FirefoxやChromeなどの主要なWebブラウザーに実装されています。Webブラウザー上でVR(バーチャル・リアリティ)の体験ができます。
ここでは、Googleの開発しているVRコンテンツ埋め込みツール、[[VR View>https://developers.google.com/vr/develop/web/vrview-web]]を事例にサンプルを紹介します。VR View には以下2つの実装方法があります。
- iframe で実装
-JavaScript で実装
なお、素材の静止画・動画は、以下のようなサイトで入手可能です。
http://www.motionelements.com/ja/vr
データの形式は、静止画であれば jpeg、動画であれば mp4 です。
~
~
**VR Sample
***iframe による実装
以下のような記述で簡単に実装できます。
<iframe src="https://storage.googleapis.com/vrview/2.0/embed?video=/url/to/video.mp4&is_stereo=true">
</iframe>
~
***JavaScript による実装
-Googleが提供する vrview.min.js をインクルードします。
<script src="https://storage.googleapis.com/vrview/2.0/build/vrview.min.js"></script>
-VR-View を表示するための要素を確保します。
<div id='vrview'></div>
-イベントリスナーを設置します。
<script>
window.addEventListener('load', onVrViewLoad);
function onVrViewLoad() {
var vrView = new VRView.Player('#vrview', {
video: '/url/to/video.mp4', ← ここにVR動画のアドレス
is_stereo: true
});
}
</script>
~
~