Three JS canvas not resizing

I am learning how to make 3D animations using Three JS and I am trying to make one with multiples spinning cubes. The issue is that the whole canvas does not resize when zooming in or when the page is viewed on mobile devices, it seems that the camera only zooms, because the objects keep the same size and only part of the animation shows up. Could someone tell me why isn’t my canvas resizing? Thanks in advance.

<html>
    <head>

        <style>
            body { margin: 0; }
            canvas { width: 100%; height: 100% }
        </style>
    </head>
    <body>
        <script src="js/three.min.js"></script>
        <script>

            var scene = new THREE.Scene();
            var camera = new THREE.PerspectiveCamera( 20, window.innerWidth/window.innerHeight, 1, 1000 );
            camera.position.z=4;

            var renderer = new THREE.WebGLRenderer();

            document.body.appendChild( renderer.domElement );
            var cubes =[];
            for (var i = 0; i <= 3; i++) {
                var geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 ); 
                var material = new THREE.MeshBasicMaterial( { color: 0x00ff00, wireframe:true } );
                var cube = new THREE.Mesh( geometry, material );
                cube.position.set(-1.5+(i/2),0,0.1);
                cubes[i] = cube;
                scene.add(cubes[i]);
            }

            function render(cubes) {

                for ( var i = 0 ; i < scene.children.length; i ++ ) {

                    var object = scene.children[ i ];

                    object.rotation.x += 0.1;
                    object.rotation.y += 0.1;

                }
                requestAnimationFrame( render );
                renderer.setSize( window.innerWidth, window.innerHeight);

                renderer.render(scene, camera);

            };

            window.addEventListener( 'resize', onWindowResize, false );

            function onWindowResize() { 
                camera.aspect = window.innerWidth / window.innerHeight;

                camera.updateProjectionMatrix();
                renderer.setSize( window.innerWidth, window.innerHeight );

            }
            render(cubes);
        </script>
    </body>
</html>


Source: html5

Leave a Reply