问题描述
我有一个简单的Three.js场景(画布)，我想在窗口调整大小事件(特别是改变屏幕宽度，保持高度不变)时响应它。
在正常情况下，我使用window.innerWidth，window.innerHeight属性来设置画布的大小以匹配窗口大小。
然而，我想在html中嵌入三个场景。
所以我在<div id="three-container">中放了三个画布。
在下面的代码中，当我调整窗口大小时(仅限宽度)，画布的高度不断增加。窃听器在哪里？我错过了什么？
为了获得div容器的大小，我尝试了container.clientWidth、container.offsetWidth和$('#three-container').width()(和高度)，但对于所有情况，div的初始高度都是0，并且随着大小的调整不断增长。
完整代码清单：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>default</title>
<link rel="icon" href="">
</head>
<body>
<div id='three-container' class= "row"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.js"></script>
<script>
var renderer, scene, camera, cube;
var time = 0.0;
var container = window.document.getElementById( 'three-container' );
var w = 100; //container.clientWidth; // container.offsetWidth
var h = 100; //container.clientHeight; // container.offsetHeight
init();
loop();
function init() {
camera = new THREE.PerspectiveCamera( 45, w / h, 1, 1000 );
scene = new THREE.Scene();
scene.add( camera );
camera.position.z = 16;
renderer = new THREE.WebGLRenderer();
renderer.setClearColor( 0xa696969 );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( w, h );
container.appendChild( renderer.domElement );
var geo = new THREE.BoxGeometry( 5, 5, 5);
var mat = new THREE.MeshBasicMaterial({ color: 0xffffff, wireframe: true } );
cube = new THREE.BoxHelper( new THREE.Mesh( geo, mat ), mat.color );
scene.add( cube );
window.addEventListener( 'resize', function onWindowResize() {
w = container.clientWidth; // container.offsetWidth
h = container.clientHeight; // container.offsetHeight
console.log( " w : " + w + " h : " + h);
renderer.setSize( w, h );
camera.aspect = w / h;
camera.updateProjectionMatrix();
}, false );
}
function loop() {
time += 0.01;
requestAnimationFrame( loop );
cube.rotation.x = time ;
cube.rotation.y = time ;
renderer.render( scene, camera );
}
</script>
</body>
</html>
推荐答案
line-height:0;css-Property可以实现此目的并保持容器的高度。
#three-container {
line-height:0;
}
使用此属性的想法来自this SO question
jsfiddle示例