Question

我有简单的three.js场景（画布），我想对窗口调整大小事件做出响应（特别是改变屏幕宽度，保持高度不变）。在正常情况下，我使用window.innerWidth，window.innerHeight属性来设置画布的大小以匹配窗口大小。

但是我想在html中嵌入三个场景。所以我在<div id="three-container">中放了三个画布。

在我调整窗口大小（仅限宽度）时，在下面的代码中，画布的高度不断增长。这个bug在哪里？我错过了什么？

为了获得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>

Answer 1

line-height:0; css-property可以解决问题并保持容器的高度。

#three-container {
  line-height:0;
}

使用此属性的想法来自this SO question

jsfiddle示例

Answer 2

它正在发生，因为容器DIV最初实际上是104px高，即使CANVAS高100px。我看着F12，但看不出明显的原因，比如填充。然后你将画布设置为104px，使div为108px，依此类推。

快速解决方法是考虑4，这表明上述问题。

renderer.setSize( w, h - 4 );

我担心你需要找到一种更健壮的方法来找到身高的差异。

HTML div高度在窗口大小调整事件上不断增长

2 个答案: