basic-cube.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="img/favicon.ico">
    <title>Basic Cube</title>

    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>

    <script src="js/three.js"></script>
    <script>

        // Initiating Scene
        var scene       = new THREE.Scene();
        var camera      = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        var renderer    = new THREE.WebGLRenderer();

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

        document.body.appendChild(renderer.domElement);


        // Create box
        // --------------------------------------
        var geometry    = new THREE.BoxGeometry();
        var material    = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
        var cube        = new THREE.Mesh(geometry, material);

        scene.add(cube);


        // Move camera back
        camera.position.z = 5;


        // Rendering the scene
        function animate() {
            requestAnimationFrame(animate);

            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;

            renderer.render(scene, camera);
        }

        animate();


        // Update renderer and camera when resizing
        window.addEventListener('resize', () => {
            renderer.setSize(window.innerWidth, window.innerHeight);
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
        });


    </script>

</body>
</html>