1

Is it possible to add a Google Cardboard view camera, as shown in the image below, to Google VR View, using Three.js? If so, how can I do it?

example image

More specifically, how can I add Three.js to the Google VR View code below?

function onLoad() {
    // Load VR View.
    vrView = new VRView.Player('#vrview', {
        width: window.innerWidth,
        height: window.innerHeight,
        video: 'crusher-final.mp4',
        is_stereo: true,
        loop: false,
    });
}
waldyrious
  • 3,683
  • 4
  • 33
  • 41
Siva Sunkara
  • 21
  • 3

1 Answers1

2

This is not possible using the VRView-library as it runs within an iframe and doesn't provide any interface for you to add content to the 3d-views. However, it is fully open-source and implemented using three.js, see here for the source-code: https://github.com/googlevr/vrview

So you could use that code and add your stuff to it or implement it yourself.

The easiest way to do it is to use the WebVR-polyfill that does most of the work automatically. This will allow you to use the WebVR-API even if it is not yet supported by the browser.

Three.js has support for the WebVR-API built in, so there is not much more to do than to enable it using renderer.vr.enabled = true and setting the VR display to use via navigator.getVRDisplays().then(displays => renderer.vr.setDevice(displays[0]));.

See the webvr-examples and the WebVR-specification for further reference.

Martin Schuhfuß
  • 6,814
  • 1
  • 36
  • 44