JavaScript

Google VR View

DEMO

動作確認 2018-0918

  • Chrome ◎
  • IE ◎
  • Firefox ×
  • Android標準ブラウザ ◎

 

注意

  • httpsでの動作環境が必要

 

 

 

CORS設定 NginxServerディレクティブ内

 

storage.googleapis.comからのアクセスを受け入れる

# Google VR View
add_header Access-Control-Allow-Origin https://storage.googleapis.com always;
add_header Access-Control-Allow-Methods "POST, GET, OPTIONS";
add_header Access-Control-Allow-Headers "Origin, Authorization, Accept";
add_header Access-Control-Allow-Credentials true;

 

全部おっけー版

 

# Google VR View
add_header Access-Control-Allow-Origin * always;
add_header Access-Control-Allow-Methods "POST, GET, OPTIONS";
add_header Access-Control-Allow-Headers "Origin, Authorization, Accept";
add_header Access-Control-Allow-Credentials true;

 

 

スクリプト読み込み

<!--Google VR View-->
<script src="//storage.googleapis.com/vrview/2.0/build/vrview.min.js"></script>
<script>
  window.addEventListener('load', onVrViewLoad)
  function onVrViewLoad() {
    var vrView = new VRView.Player('#vrview', {
      image: 'https://www.yuulinux.tokyo/demo/4837-GoogleVR-v1/vr-image1.jpg', //画像を埋め込みたい場合。値にパスを指定。
      width: '100%',
      height: '100%',
      is_autopan_off: true,
    });
  }
</script>
<!--Google VR View END-->

 

 

index.php

<div id="vrview" align=center></div>

 

 

 

 

@image

  • https://thinkmobiles.com/blog/how-to-make-react-vr-app/

 

Amazonおすすめ

iPad 9世代 2021年最新作

iPad 9世代出たから買い替え。安いぞ!🐱 初めてならiPad。Kindleを外で見るならiPad mini。ほとんどの人には通常のiPadをおすすめします><

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)