webvr-polyfill을 사용하면 iOS 브라우저에서도 확인할 수 있는 모양.
htps : // 기주 b. 코 m / go g vr / u bvr ly ly fu l

프로젝트 루트에서 webvr-polyfill을 install

npm install -save webvr-polyfill

webvr-polyfill import

client.js

// Auto-generated content.
// This file contains the boilerplate to set up your React app.
// If you want to modify your application, start in "index.vr.js"

// Auto-generated content.
import {VRInstance} from 'react-vr-web';
import 'webvr-polyfill';

init에 WebVRPolyfill.InstallWebVRSpecShim(); 의 한 줄 추가

client.js

function init(bundle, parent, options) {
  WebVRPolyfill.InstallWebVRSpecShim();
  const vr = new VRInstance(bundle, 'rvr_sample', parent, {
    // Add custom options here
    ...options,
  });
  vr.render = function() {
    // Any custom behavior you want to perform on each frame goes here
  };
  // Begin the animation loop
  vr.start();
  return vr;
}

배포 및 실제 기계 확인



Cardboard의 명령이 표시되면 성공.
화면 세로 방향이 잠겨있는 경우는 분리하고 가로 방향으로하면


배럴 디스토션이 걸린 이안 모드로 이행할 수 있습니다.

iOS Safari, Chrome에서 확인.
Chrome이라고 URL 바가 표시되므로 디폴트 풀 스크린이 되는 Safari가 좋을지도.

하지만

ref