javascript - 在 Three.js 中调整 View 大小会缩小图像

Question

我正在尝试创建一个在线 3D 操作工具。我已经设置了带有旋转立方体和网格的 THREE.js View 。当我运行代码时，它可以 100% 正常工作，但是如果我调整 View 大小，它不会随之调整 THREE.js 屏幕。 (它会根据浏览器 View 的变化缩小场景的长度或宽度。)导致 View 看起来扭曲。

$(function(){
	
	var scene = new THREE.Scene();
	var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, .1, 500);
	var renderer = new THREE.WebGLRenderer();
	
	renderer.setClearColor(0xdddddd);
	renderer.setSize(window.innerWidth, window.innerHeight);
	renderer.shadowMap.enabled = true;
	renderer.shadowMapSoft = true;
	
	var axis = new THREE.AxisHelper(10);
	scene.add(axis);
	
	var color = new THREE.Color("rgb(255,0,0)");
	var color2 = new THREE.Color(0xd3d3d3);
	var grid = new THREE.GridHelper(50, 15, color, color2);
	
	scene.add(grid);
	
	var cubeGeometry = new THREE.BoxGeometry(5, 5, 5);
	var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff3300});
	var cube = new THREE.Mesh(cubeGeometry, cubeMaterial)
	
	/*var planeGeometry = new THREE.PlaneGeometry(30, 30, 30);
	var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});
	var plane = new THREE.Mesh(planeGeometry, planeMaterial);
	
	plane.rotation.x = -.5*Math.PI;
	plane.position.y = -.1
	plane.recieveShadow = true;
	
	scene.add(plane);*/
	
	cube.position.x = 2.5;
	cube.position.y = 4;
	cube.position.z = 2.5;
	cube.castShadow = true;
	
	scene.add(cube);
	
	var spotLight = new THREE.SpotLight(0xffffff);
	spotLight.castShadow = true;
	spotLight.position.set(15, 30, 50);
	
	scene.add(spotLight);
	
	camera.position.x = 40;
	camera.position.y = 40;
	camera.position.z = 40;
	
	camera.lookAt(scene.position);
	
	var guiControls = new function(){
		this.rotationX = 0.01;
		this.rotationY = 0.01;
		this.rotationZ = 0.01;
	}
	
	var datGUI = new dat.GUI();
	datGUI.add(guiControls, 'rotationX', 0, 1);
	datGUI.add(guiControls, 'rotationY', 0, 1);
	datGUI.add(guiControls, 'rotationZ', 0, 1);
	
	render();
	function render() {
        //Me trying to reset the camera view every render
		camera.fov = 45
		camera.aspect = window.innerWidth / window.innerHeight
		camera.near = .1
		camera.far = 500
		scene.add(camera);
		cube.rotation.x += .1;
		renderer.setSize(window.innerWidth, window.innerHeight);
		requestAnimationFrame(render);
		renderer.render(scene, camera);
	}
	
	$("#world").append(renderer.domElement);
	renderer.render(scene, camera);
});

Answer 1

在代码中添加事件监听器来处理调整大小:

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

然后:

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

或者，由于您使用的是 jQuery，因此您可以添加以下内容:

$( window ).resize(function() {
    w = window.innerWidth;
    h = window.innerHeight;
    camera.aspect = w / h;
    camera.updateProjectionMatrix();
    renderer.setSize( w, h );
});

Click here查看工作代码Pen。