CODEWITHSUNDEEP
three.jsvirtual-realitywebvrgoogle-vrvrvideoview
Siva Sunkara
Siva Sunkara

Reputation: 21

Google Cardboard view using three.js?

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,
    });
}

Upvotes: 1

Views: 1460

Answers (1)

Martin Schuhfuß
Martin Schuhfuß

Reputation: 6986

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.

Upvotes: 2

Related Questions