3D Game Programming for Kids, 2nd Edition

Keyboard Controls

We’re ready to add keyboard controls to the scene, but first we need to remove the orbit controls. If we leave the orbit controls in, arrow key presses would move the raft and the camera, which would be very confusing. So either delete or comment out the orbit controls above the START CODING line.

// new THREE.OrbitControls(camera, renderer.domElement);

Now, let’s add our game controls. Add them at the very bottom of your code, just above the final </script> tag.

document.addEventListener('keydown', sendKeyDown);
function sendKeyDown(event) {
  var code = event.code;
  if (code == 'ArrowLeft') rotateRaft(1);
  if (code == 'ArrowRight') rotateRaft(-1);
  if (code == 'ArrowDown') pushRaft();
  if (code ...