Moving animation not working

Questions
1

I am still struggling to get this working. I have the following working code:

// Keyboard functions
      function Keyboard() {
        var speed = 1;

        if( event.keyCode == 65 || event.keyCode == 37) { cube.position.x -= speed }// Left 
        else if( event.keyCode == 68 || event.keyCode == 39) { cube.position.x += speed }// Left } // Right d
        else if( event.keyCode == 87 || event.keyCode == 38) { cube.position.y += speed } // Up w
        else if( event.keyCode == 83 || event.keyCode == 40) { cube.position.y -= speed } // Down s
      }


      // Run Game Loop ( Update, render, Repeat )
      function animate()
      {
        requestAnimationFrame( animate );

        renderer.render( scene, camera );
      };

      animate();

When pressing the arrow keys or WASD the 3d cube I have created will move to the right direction. The problem is that is is not animated. So the cube “teleports” now to its new position instead of smoothly slide to it.

I want to fix this by adding Keyboard(); to the animation function:

// Keyboard functions
      function Keyboard() {
        var speed = 1;

        if( event.keyCode == 65 || event.keyCode == 37) { cube.position.x -= speed }// Left 
        else if( event.keyCode == 68 || event.keyCode == 39) { cube.position.x += speed }// Left } // Right d
        else if( event.keyCode == 87 || event.keyCode == 38) { cube.position.y += speed } // Up w
        else if( event.keyCode == 83 || event.keyCode == 40) { cube.position.y -= speed } // Down s
      }


      // Run Game Loop ( Update, render, Repeat )
      function animate()
      {
        requestAnimationFrame( animate );
        Keyboard(); // <-- Added they Keyboard function here to get it animated
        renderer.render( scene, camera );
      };

      animate();

I think this is the correct place, but doing this results in a black screen loading nothing. So what am I missing here?

Working fiddle: https://jsfiddle.net/mauricederegt/swh2yrct/29/