Three.js - 如何切换 VR/立体效果模式

Question

最初的场景效果很好。 VR 模式有效。但我不知道如何回到正常模式。

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

这是我的代码笔：

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

单击按钮两次，您就会明白我在说什么。预先感谢。

Answer 1

THREE.StereoEffect

更改

THREE.WebGLRenderer

的大小。当您切换回来时，您必须通过

setSize

重置渲染器的大小。

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