时间戳

首页 > 解决方案 > 三个 js 渲染器大小问题。试图设定一个完美的尺寸

javascript - 三个 js 渲染器大小问题。试图设定一个完美的尺寸

问题描述

我一直在研究三个 js 模型，将模型嵌入到我的网站中。终于成功了，但只有一个问题。我无法让 renderer.setSize() 适合我的 div。换句话说，我可以看到我不想在那里看到的滚动条。如何设置大小以使其完全适合我的画布？

我看到一篇关于同样问题的帖子，他也想避免滚动。我试图按照帖子中所述的答案进行操作，但没有任何反应。然后我去了三个 js 文档，按照那里的说明进行操作。

.setSize ( width : Integer, height : Integer, updateStyle : Boolean ) : null

还是想不通。为什么文档中的代码也不起作用？但是，我不确定我是否找到了窍门，我只是在玩 setSize 值。

renderer.setSize( window.innerWidth * 0.99 ,window.innerHeight * 0.99);

如您所见，我添加了 * 0.99 ，并且不再有滚动条！不是故意这样做的，但是调整它的正确代码是什么？这是我的代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <title>THEE JS BOX APP</title>
        <style>
            body { margin: 0; width: 100%; height: 100% }

        </style>
    </head>
    <body>
        <script src="js/three.js"></script>
        <script src="js/OrbitControls.js"></script>
        <script src="js/OBJloader.js"></script>
        <script>

            // CREATING AN EMPTY SCENE
            var scene = new THREE.Scene();

            // CAMERA
            var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 9000 );
            camera.position.z = 200;

            // ORBIT CONTROL
            var controls = new THREE.OrbitControls( camera );

            // RENDERER
            var renderer = new THREE.WebGLRenderer();
            renderer.setClearColor("#ffffff");
            renderer.setSize( window.innerWidth * 0.99 ,window.innerHeight * 0.99);
            renderer.shadowMap.enabled = true;
            renderer.shadowMap.type = THREE.PCFShadowMap;


            // APPEND RENDERER TO DOM
            document.body.appendChild( renderer.domElement );

            // WINDOW RESIZE
            window.addEventListener( 'resize', onWindowResize, false );

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

            // instantiate a loader
            var loader = new THREE.OBJLoader();

            // load a resource
            loader.load(
                // resource URL
                'img/logovoivode1.obj',
                // called when resource is loaded
                function ( object ) {
                    scene.add( object );
                },
                // called when loading is in progresses
                function ( xhr ) {
                    console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
                },
                // called when loading has errors
                function ( error ) {
                    console.log( 'An error happened' );
                }
            );

            // ***************************** LIGHTING **********************************//

            // White directional light at half intensity shining from the top.
            //var directionalLight = new THREE.DirectionalLight( 0xffffff, 5 );
            //scene.add( directionalLight );

            var light = new THREE.AmbientLight( 0xffffff, 0.5); // soft white light
            scene.add( light );

            var pointlight = new THREE.PointLight( 0xffffff, 0.5, 1000);
            light.position.set(10, 0, 25);
            scene.add(pointlight);

            //var DLight = new THREE.DirectionalLight( 0xffffff, 50);
            //scene.add(DLight);

            // var spotlight = new THREE.SpotLight( 0xffffff, 0.5, 1000, 0.3);

            // ************************ END-OF-LIGHTING *****************************//

            // CREATING A BOX
            // var geometry = new THREE.BoxGeometry(1, 1, 1);
            // var material = new THREE.MeshBasicMaterial({ color: 0xffffff, wireframe:true});
            // var cube = new THREE.Mesh( geometry, material);


            // ADD CUBE TO THE SCENE
            // scene.add(cube);
            // ANIMATION LOOP

            function animate() {
                requestAnimationFrame( animate );
                //scene.rotation.x += 0.01;
                //scene.rotation.y += 0.01;
                renderer.render( scene, camera );
            }
            animate();
        </script>
    </body>
</html>

标签： javascripthtmlcss

解决方案

您的问题是由“内部元素空格”引起的。

当 html 解析器解析您的源代码时，它还会将标签之间的空格/entets/tabs 解析为文本，然后将其缩小到只有 1 个空格。这 1 个空格是您的问题的原因，但知道是什么原因是解决问题的第一步。

原问题，供参考：

body {
    margin: 0;
    width: 100%;
    height: 100%;
}
<script src="https://cdn.jsdelivr.net/npm/three@0.101.1/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.101.1/examples/js/controls/OrbitControls.js"></script>
<script>
    // CREATING AN EMPTY SCENE
    var scene = new THREE.Scene();

    // CAMERA
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 9000 );
    camera.position.z = 200;

    // ORBIT CONTROL
    var controls = new THREE.OrbitControls( camera );

    // RENDERER
    var renderer = new THREE.WebGLRenderer();
    renderer.setClearColor("#ffffff");
    renderer.setSize( window.innerWidth  ,window.innerHeight);
    renderer.shadowMap.enabled = true;
    renderer.shadowMap.type = THREE.PCFShadowMap;

    // APPEND RENDERER TO DOM
    document.body.appendChild( renderer.domElement );

    // WINDOW RESIZE
    window.addEventListener( 'resize', onWindowResize, false );

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

    scene.add( new THREE.Mesh( new THREE.CubeGeometry(100,130,70), new THREE.MeshBasicMaterial({ color: 0x444444 }) ) );

    function animate() {
        requestAnimationFrame( animate );
        renderer.render( scene, camera );
    }
    animate();
</script>

使用font-size: 0

通过将 设置font-size为 0，您基本上将空间压缩为 PX 宽度和高度，确保它不会导致您的问题

body {
    margin: 0;
    width: 100%;
    height: 100%;
    font-size: 0;
}
<script src="https://cdn.jsdelivr.net/npm/three@0.101.1/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.101.1/examples/js/controls/OrbitControls.js"></script>
<script>
    // CREATING AN EMPTY SCENE
    var scene = new THREE.Scene();

    // CAMERA
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 9000 );
    camera.position.z = 200;

    // ORBIT CONTROL
    var controls = new THREE.OrbitControls( camera );

    // RENDERER
    var renderer = new THREE.WebGLRenderer();
    renderer.setClearColor("#ffffff");
    renderer.setSize( window.innerWidth  ,window.innerHeight);
    renderer.shadowMap.enabled = true;
    renderer.shadowMap.type = THREE.PCFShadowMap;

    // APPEND RENDERER TO DOM
    document.body.appendChild( renderer.domElement );

    // WINDOW RESIZE
    window.addEventListener( 'resize', onWindowResize, false );

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

    scene.add( new THREE.Mesh( new THREE.CubeGeometry(100,130,70), new THREE.MeshBasicMaterial({ color: 0x444444 }) ) );

    function animate() {
        requestAnimationFrame( animate );
        renderer.render( scene, camera );
    }
    animate();
</script>

使用overflow: hidden

只需要把我们的问题隐藏起来，以便下一个尝试正确解决它的人。

body {
    margin: 0;
    width: 100%;
    height: 100%;
}
html, body {
    overflow: hidden;
}
<script src="https://cdn.jsdelivr.net/npm/three@0.101.1/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.101.1/examples/js/controls/OrbitControls.js"></script>
<script>
    // CREATING AN EMPTY SCENE
    var scene = new THREE.Scene();

    // CAMERA
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 9000 );
    camera.position.z = 200;

    // ORBIT CONTROL
    var controls = new THREE.OrbitControls( camera );

    // RENDERER
    var renderer = new THREE.WebGLRenderer();
    renderer.setClearColor("#ffffff");
    renderer.setSize( window.innerWidth  ,window.innerHeight);
    renderer.shadowMap.enabled = true;
    renderer.shadowMap.type = THREE.PCFShadowMap;

    // APPEND RENDERER TO DOM
    document.body.appendChild( renderer.domElement );

    // WINDOW RESIZE
    window.addEventListener( 'resize', onWindowResize, false );

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

    scene.add( new THREE.Mesh( new THREE.CubeGeometry(100,130,70), new THREE.MeshBasicMaterial({ color: 0x444444 }) ) );

    function animate() {
        requestAnimationFrame( animate );
        renderer.render( scene, camera );
    }
    animate();
</script>

使用display: flex

使用 flex 显示模式时，浏览器会忽略当前元素中的所有内部空白

body {
    margin: 0;
    width: 100%;
    height: 100%;
    display: flex;
}
<script src="https://cdn.jsdelivr.net/npm/three@0.101.1/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.101.1/examples/js/controls/OrbitControls.js"></script>
<script>
    // CREATING AN EMPTY SCENE
    var scene = new THREE.Scene();

    // CAMERA
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 9000 );
    camera.position.z = 200;

    // ORBIT CONTROL
    var controls = new THREE.OrbitControls( camera );

    // RENDERER
    var renderer = new THREE.WebGLRenderer();
    renderer.setClearColor("#ffffff");
    renderer.setSize( window.innerWidth  ,window.innerHeight);
    renderer.shadowMap.enabled = true;
    renderer.shadowMap.type = THREE.PCFShadowMap;

    // APPEND RENDERER TO DOM
    document.body.appendChild( renderer.domElement );

    // WINDOW RESIZE
    window.addEventListener( 'resize', onWindowResize, false );

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

    scene.add( new THREE.Mesh( new THREE.CubeGeometry(100,130,70), new THREE.MeshBasicMaterial({ color: 0x444444 }) ) );

    function animate() {
        requestAnimationFrame( animate );
        renderer.render( scene, camera );
    }
    animate();
</script>

将画布的显示设置为阻止

如果您将画布的 display 属性设置为block，那么您不必担心内部元素的空白，因为它们在块元素之间没有任何效果。

body {
    margin: 0;
    width: 100%;
    height: 100%;
}
canvas {
    display: block;
}
<script src="https://cdn.jsdelivr.net/npm/three@0.101.1/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.101.1/examples/js/controls/OrbitControls.js"></script>
<script>
    // CREATING AN EMPTY SCENE
    var scene = new THREE.Scene();

    // CAMERA
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 9000 );
    camera.position.z = 200;

    // ORBIT CONTROL
    var controls = new THREE.OrbitControls( camera );

    // RENDERER
    var renderer = new THREE.WebGLRenderer();
    renderer.setClearColor("#ffffff");
    renderer.setSize( window.innerWidth  ,window.innerHeight);
    renderer.shadowMap.enabled = true;
    renderer.shadowMap.type = THREE.PCFShadowMap;

    // APPEND RENDERER TO DOM
    document.body.appendChild( renderer.domElement );

    // WINDOW RESIZE
    window.addEventListener( 'resize', onWindowResize, false );

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

    scene.add( new THREE.Mesh( new THREE.CubeGeometry(100,130,70), new THREE.MeshBasicMaterial({ color: 0x444444 }) ) );

    function animate() {
        requestAnimationFrame( animate );
        renderer.render( scene, camera );
    }
    animate();
</script>

推荐阅读