在窗口调整大小事件中，HTMLdiv高度保持增长

2022-07-11 00:00:00 canvas element html three.js window-resize

我有一个简单的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示例

相关文章