let camera, scene, renderer;
let geometry, material, mesh;

init();
animate();

function init() {

    // Computes the aspect ratio of the window.
    let aspectRatio = window.innerWidth / window.innerHeight;

    // Creates a camera and sets its parameters and position.
    camera = new THREE.PerspectiveCamera(70, aspectRatio, 0.01, 10);
    camera.position.z = 1;

    // Creates the scene that contains our objects.
    scene = new THREE.Scene();

    // Creates a geometry (vertices and faces) corresponding to a cube.
    geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);

    // Creates a material that paints the faces depending on their normal.
    material = new THREE.MeshNormalMaterial();

    // Creates a mesh that associates the geometry with the material.
    mesh = new THREE.Mesh(geometry, material);

    // Adds the mesh to the scene.
    scene.add(mesh);

    // Creates the renderer and append its canvas to the DOM.
    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

}

// This function will be called at each frame.
function animate() {

    // Makes the mesh rotate to have a nice animation
    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.02;

    // Renders the scene with the camera.
    renderer.render(scene, camera);

    // Re-triggers animate() when the moment has come.
    requestAnimationFrame(animate);

}