Просмотр Google Cardboard с использованием three.js?

Question

Можно ли добавить камеру Google Cardboard view, как показано на рисунке ниже, в Google VR View, используя Three.js? Если так, как я могу это сделать?

В частности, как я могу добавить Three.js в код Google VR View ниже?

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

Answer 1

Это невозможно при использовании библиотеки VRView, так как она работает внутри iframe и не предоставляет никакого интерфейса для добавления контента в 3d-представления. Тем не менее, он полностью с открытым исходным кодом и реализован с использованием three.js, см. Здесь для получения исходного кода: https://github.com/googlevr/vrview

Таким образом, вы можете использовать этот код и добавить свои вещи в него или реализовать его самостоятельно.

Самый простой способ сделать это - использовать WebVR-polyfill, который выполняет большую часть работы автоматически. Это позволит вам использовать WebVR-API, даже если он еще не поддерживается браузером.

Three.js имеет встроенную поддержку WebVR-API, так что ничего не остается сделать, кроме как включить его с помощью renderer.vr.enabled = true и настройка дисплея VR для использования через navigator.getVRDisplays().then(displays => renderer.vr.setDevice(displays[0]));,

См. Webvr-examples и WebVR-спецификацию для дальнейшей ссылки.