WebXR monoscopic video in VR

Questions
, ,
1

Hello,

I’m trying to get monoscopic VR video to work with WebXR. I know there is a stereoscopic video example in the three js examples list but I can’t seem to figure out how to do monoscopic. Any help would be appreciated.

Kind regards,
Stefan

2

Can you please describe what you have tried so far? Ideally you share your work of progress as a live example or as a GitHub repository.

3

I tried messing with the camera layers and assigning different meshes but it turns out it was very easily fixed using this as a source of inspiration. Maybe somebody in the future will find this helpful:

import * as THREE from "three";
import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';

let camera, scene, renderer;

function init() {

  const container = document.getElementById('container');
  container.addEventListener('click', function () {
    video.play();
  });

  camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 2000);

  const video = document.getElementById('video');
  video.play();

  const texture = new THREE.Texture(video);

  setInterval(function () {
    if (video.readyState >= video.HAVE_CURRENT_DATA) {
      texture.needsUpdate = true;
    }
  }, 1000 / 24);

  scene = new THREE.Scene();
  scene.background = new THREE.Color(0x101010);

  const geometry = new THREE.SphereBufferGeometry(500, 60, 40);
  // invert the geometry on the x-axis so that all of the faces point inward
  geometry.scale(-1, 1, 1);
  
  const material = new THREE.MeshBasicMaterial({map: texture});
  const mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);
  
  //

  renderer = new THREE.WebGLRenderer();
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.xr.enabled = true;
  renderer.xr.setReferenceSpaceType('local');
  container.appendChild(renderer.domElement);
  
  document.body.appendChild(VRButton.createButton(renderer));

  //
  
  window.addEventListener('resize', onWindowResize, false);
}

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}

function animate() {
  renderer.setAnimationLoop(render);
}

function render() {
  renderer.render(scene, camera);
}

export {init, animate}
1 Like