Question

我一直在研究三个js模型，以将模型嵌入到我的网站中。终于做到了，但是只有一个问题。我无法使renderer.setSize（）适应我的div。换句话说，我可以看到不想在此处看到的滚动条。如何设置setSize使其完全适合我的画布？

我看到一篇关于同一问题的文章，他也希望避免滚动。我试图按照帖子中的说明进行操作，但是没有任何反应。然后我前往三个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>

Answer 1

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

当html解析器解析您的源代码时，它还会将标记之间的空格/实体/制表符解析为文本，然后将其缩小到仅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`

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

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>

将画布的显示设置为阻止

如果将画布的显示属性设置为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>

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

1 个答案:

使用`font-size: 0`

使用`overflow: hidden`

使用`display: flex`

将画布的显示设置为阻止

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

1 个答案:

使用font-size: 0

使用overflow: hidden

使用display: flex

将画布的显示设置为阻止

使用`font-size: 0`

使用`overflow: hidden`

使用`display: flex`