Three.js - How to toggle VR/StereoEffect mode

Question

The initial scene works fine. VR mode works. But I'm not sure how to go back to normal mode.

var scene = new THREE.Scene()
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 )
camera.position.set(70,0,70)
scene.add(camera)
var renderer = new THREE.WebGLRenderer( { alpha: true } )
renderer.setSize( window.innerWidth, window.innerHeight )
document.body.appendChild( renderer.domElement )
var controls = new THREE.OrbitControls( camera, renderer.domElement )
var effect = new THREE.StereoEffect(renderer)

var squares = []
var geometry = new THREE.BoxGeometry( .1, 3, 3 )
var radius = 50
var VR = false

for ( var lon = 1; lon < 20; lon ++ ) {
  for ( var lat = 1; lat < 20; lat ++ ) {

    var square = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { transparent: true, opacity: 0.9, color: 0xffffff } ) )
    squares.push ( square )
    scene.add( square )

    var x = radius * Math.sin( lon ) * Math.cos( lat )
    var y = radius * Math.cos( lon )
    var z = radius * Math.sin( lon ) * Math.sin( lat )

    square.position.x = x
    square.position.y = y
    square.position.z = z

  }
}

function animate() {
  requestAnimationFrame( animate )

  if ( VR ) {
    effect.render(scene, camera)
  } else {
    renderer.render(scene, camera)
  }

}

function toggleVR() {
  if ( VR ) {
    VR = false
  } else {
    VR = true
  }
}

animate()

Here's my codepen:

https://codepen.io/megagumby/pen/RjWZPJ

Click on the button twice and you'll see what I'm talking about. Thanks in advance.

Answer 1

The THREE.StereoEffect changes the size of the THREE.WebGLRenderer. You have to reset the size of the renderer by setSize, when you switch back.

function toggleVR() {
    if ( VR ) {
        VR = false
        renderer.setSize( window.innerWidth, window.innerHeight )
    } else {
        VR = true
    }
}