Three.js调整窗口不能正确缩放

Question

调整我的窗口大小时，我的形状不能正确缩放。

我正在使用下面的代码，并根据文档，它应该是很好。

var camera, controls, scene, renderer, viewSize; 
     scene = new THREE.Scene(); 
scene.background = new THREE.Color(0xffffff); 
viewSize = 20; 
var aspectRatio = window.innerWidth/window.innerHeight 
camera = new THREE.OrthographicCamera(-aspectRatio * viewSize/2, aspectRatio * viewSize/2, viewSize/2, -viewSize/2, 0.1, 1000); 
camera.position.x = 10; 
camera.position.y = 10; 
camera.position.z = -10 
camera.lookAt(scene.position); 

renderer = window.WebGLRenderingContext ? new THREE.WebGLRenderer() : new THREE.CanvasRenderer(); 
renderer.setSize(window.innerWidth, window.innerHeight); 
document.body.appendChild(renderer.domElement); 

controls = new THREE.OrbitControls(camera , renderer.domElement); 

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

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

makeShapes(); 

var render = function() { 
    requestAnimationFrame(render); 
    renderer.render(scene, camera); 
}; 

render(); 

如上图所示，当窗口变大时，她的形状会被拖出，反之亦然。

Answer 1

问题是由重新缩放左，右，上和比例窗口大小相机的底部参数解决。现在，该对象获取它的'viewSize'并根据对窗口大小所做的更改重新调整大小。

var camera, scene, renderer; 
var originalAspect; 

scene = new THREE.Scene(); 
scene.background = new THREE.Color(0xffffff); 

var viewSize = 20; 
var aspectRatio = window.innerWidth/window.innerHeight; 
originalAspect = window.innerWidth/window.innerHeight; 
camera = new THREE.OrthographicCamera(-aspectRatio * viewSize/2, aspectRatio * viewSize/2, viewSize/2, -viewSize/2, 0.1, 1000); 
camera.position.set(10, 10, -10); 
camera.lookAt(scene.position); 

renderer = window.WebGLRenderingContext ? new THREE.WebGLRenderer() : new THREE.CanvasRenderer(); 
renderer.setSize(window.innerWidth, window.innerHeight); 
document.body.appendChild(renderer.domElement); 

var controls = new THREE.OrbitControls(camera, renderer.domElement); 

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

function onWindowResize() { 
    var aspect = window.innerWidth/window.innerHeight; 
    var change = originalAspect/aspect; 
    var newSize = viewSize * change; 
    camera.left = -aspect * newSize/2; 
    camera.right = aspect * newSize/2; 
    camera.top = newSize/2; 
    camera.bottom = -newSize/2; 
    camera.updateProjectionMatrix(); 
    renderer.setSize(window.innerWidth, window.innerHeight); 
} 

Answer 2

试试这个：

var w = window.innerWidth; 
var h = window.innerHeight; 
var viewSize = 20; 

var camera, scene, renderer; 

camera = new THREE.OrthographicCamera(w/- 2 * viewSize, w/2 * viewSize, h/2 * viewSize, h/- 2 * viewSize, 0.1, 1000); 
camera.position.set(10, 10, -10); 
camera.lookAt(scene.position); 

renderer = window.WebGLRenderingContext ? new THREE.WebGLRenderer() : new THREE.CanvasRenderer(); 
renderer.setSize(window.innerWidth, window.innerHeight); 
document.body.appendChild(renderer.domElement); 

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

function onWindowResize() { 
    w = window.innerWidth; 
    h = window.innerHeight; 
    camera.left = w/- 2 * viewSize; 
    camera.right = w/2 * viewSize; 
    camera.top = h/2 * viewSize; 
    camera.bottom = h/- 2 * viewSize; 
    camera.updateProjectionMatrix(); 
    renderer.setSize(w, h); 
}