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

试试这个：

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 );
}

Answer 2

通过与窗口大小成比例地重新调整摄像机的左，右，上和下参数来解决问题。现在，对象获取它的'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);
}