WebXR monoscopic video in VR


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,

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.

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 () {

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

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

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

  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.xr.enabled = true;

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

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

function animate() {

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

export {init, animate}
1 Like