The initial scene is functioning well in VR mode, but the challenge lies in switching 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()
Check out my CodePen below:
https://codepen.io/megagumby/pen/RjWZPJ
Give the button a double click and observe the behavior. Appreciate your help in advance.