WebVR
をテンプレートにして作成
LECTURE
担当科目一覧
ソーシャルデザイン概論/2024
ソーシャルデザイン演習/2024
情報デザイン論/2024
情報デザイン演習IIA/2024
3DCG演習/2024
情報デザイン研究/2024
卒業研究/2024
KEYWORDS
WEB DESIGN
SOCIAL DESIGN
SQUARES
LINKS
九州産業大学
芸術学部
芸術研究科
九産大美術館
九産大図書館
年間スケジュール
動画ニュース他
交通情報
気象・環境情報
危機に備えて
K'sLife
Office365Mail
Tools
SEARCH
開始行:
*WebVR API
https://developer.mozilla.org/ja/docs/Web/API/WebVR_API
~
&color(red){この仕様は非推奨となりました。};
~
WebVR APIは、MozillaとW3Cが共同で仕様の策定を進めているも...
ここでは、Googleの開発しているVRコンテンツ埋め込みツール...
- iframe で実装
-JavaScript で実装
なお、素材の静止画・動画は、以下のようなサイトで入手可能...
http://www.motionelements.com/ja/vr
データの形式は、静止画であれば jpeg、動画であれば mp4 で...
~
~
**VR Sample
***iframe による実装
以下のような記述で簡単に実装できます。
<iframe src="https://storage.googleapis.com/vrview/2.0/e...
</iframe>
~
***JavaScript による実装
-Googleが提供する vrview.min.js をインクルードします。
<script src="https://storage.googleapis.com/vrview/2.0/b...
-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>
~
~
終了行:
*WebVR API
https://developer.mozilla.org/ja/docs/Web/API/WebVR_API
~
&color(red){この仕様は非推奨となりました。};
~
WebVR APIは、MozillaとW3Cが共同で仕様の策定を進めているも...
ここでは、Googleの開発しているVRコンテンツ埋め込みツール...
- iframe で実装
-JavaScript で実装
なお、素材の静止画・動画は、以下のようなサイトで入手可能...
http://www.motionelements.com/ja/vr
データの形式は、静止画であれば jpeg、動画であれば mp4 で...
~
~
**VR Sample
***iframe による実装
以下のような記述で簡単に実装できます。
<iframe src="https://storage.googleapis.com/vrview/2.0/e...
</iframe>
~
***JavaScript による実装
-Googleが提供する vrview.min.js をインクルードします。
<script src="https://storage.googleapis.com/vrview/2.0/b...
-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>
~
~
ページ名: