Reputation: 25

Three js renderer size issues. Trying to set a perfect size

I've been working on three js model , to embed the model to my website. Finally made it but there's only one problem.I couldn't get the renderer.setSize() to fit my div. In other words, I can see scroll bar which I don't want to see there. How do I setSize so that it perfectly fits my canvas ?

I saw one post regarding the same problem , he wanted to avoid scrolling as well. I tried to follow the answer as stated in the post but nothing's going on. Then I headed to three js documentation , followed what stated there.

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

Still couldn't figure it out. Why even the code in documentation is not working ? BUT , i'm not sure if I found a trick , I was just playing around with the setSize values.

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

as you can see there , I added * 0.99 , and there's no more scroll bar! Didn't mean to do it this way , but what's the correct code to adjust it ? Here's my code

<!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>

Upvotes: 2

Answers (1)

Ferrybig

Reputation: 18834

Your issue is caused by "inner element whitespaces".

When an html parser parses your source code, it also parses the spaces/entets/tabs between your tags as text, and then makes it smaller till its just 1 space. This 1 space is the cause of your issue, but knowing what causes it is the first step to solving the problem.

Original problem, for reference:

body {
    margin: 0;
    width: 100%;
    height: 100%;
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

Using `font-size: 0`

By setting the font-size to 0, you basically squash the space to PX width and height, making sure it doesn't contribute to your problem

body {
    margin: 0;
    width: 100%;
    height: 100%;
    font-size: 0;
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

Using `overflow: hidden`

Just take our problems, and hide them for the next person trying to fix it properly.

body {
    margin: 0;
    width: 100%;
    height: 100%;
}
html, body {
    overflow: hidden;
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

Using `display: flex`

When you use the flex display mode, the browser ignores all inner white spaces in the current element

body {
    margin: 0;
    width: 100%;
    height: 100%;
    display: flex;
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

Setting the display of the canvas to block

If you set the display property of the canvas to block, then you don't have to worry about the inner element white spaces, as they don't have anny effect between block elements.

body {
    margin: 0;
    width: 100%;
    height: 100%;
}
canvas {
    display: block;
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

Upvotes: 1

Three js renderer size issues. Trying to set a perfect size

Answers (1)

Using font-size: 0

Using overflow: hidden

Using display: flex

Setting the display of the canvas to block

Related Questions

Using `font-size: 0`

Using `overflow: hidden`

Using `display: flex`