Three.js - VR/스테레오 이펙트 모드를 토글하는 방법

Question

초기 장면이 정상적으로 작동합니다. VR 모드가 작동합니다. 하지만 정상 모드로 돌아갈 방법을 모르겠습니다. 두 번 버튼을

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

을 클릭하고 당신은 내가 무슨 말을하는지 볼 수 있습니다 :

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

여기 내 codepen입니다. 미리 감사드립니다.

Answer 1

THREE.StereoEffect은 THREE.WebGLRenderer의 크기를 변경합니다. 전환 할 때 렌더러의 크기를 setSize까지 재설정해야합니다.

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