THREE animate move/roll

by mauricederegt

CSS

body {
  overflow: hidden; /* Hide scrollbars */
}

JavaScript

// Create a Scene
      var scene = new THREE.Scene();

      // Create a Camera
      var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 10);

      // Create a Renderer
      var renderer = new THREE.WebGLRenderer();
      renderer.setSize( window.innerWidth, window.innerHeight );
      document.body.appendChild( renderer.domElement );
      renderer.setClearColor( 0x777777, 0.3);

      // For creating responsive game on resizing
      window.addEventListener( 'resize', function()
      {
        renderer.setSize( window.innerWidth, window.innerHeight );
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix( );
      } );

      // Lighning
      ambientLight = new THREE.AmbientLight( 0xFFFFFF, 0.2 );
      scene.add( ambientLight );

      hemisphereLight = new THREE.HemisphereLight(0xffffff, 0x000000, 0.2);
      scene.add( hemisphereLight );

      directionalLight = new THREE.DirectionalLight(0xffffff, 0.4);
      directionalLight.position.set( 10, 10, 10 );
      directionalLight.castShadow = true;
      scene.add( directionalLight );

      spotLight1 = new THREE.SpotLight( 0xffffff, 0.4 );
      spotLight1.position.set( 100, 10, 100 );
      spotLight1.castShadow = true;
      spotLight1.shadowDarkness = 0.2;
      scene.add( spotLight1 );

      spotLight2 = new THREE.SpotLight( 0xffffff, 0.4 );
      spotLight2.position.set( 100, 100, 100 );
      spotLight2.castShadow = true;
      spotLight2.shadowDarkness = 0.2;
      scene.add( spotLight2 );


      // Change the cube position
      document.addEventListener ( 'keydown', Keyboard, false );

      // Create Shape
      var geometry = new THREE.BoxGeometry( 1, 1, 1 );

        //TEMP NEW colors
     for ( var i = 0; i < geometry.faces.length; i += 2 ) {
          var faceColor = Math.random() * 0xffffff;
          geometry.faces[i].color.setHex(faceColor);
          geometry.faces[i+1].color.setHex(faceColor);
  ...