ThreeJS Basic 2 Player Game Controls

/*-- ------------------------------------------------------------
######################################################################
#Copyright (C) 2020  Kris Occhipinti
#https://filmsbykris.com

#This program is free software: you can redistribute it and/or modify
#it under the terms of the GNU General Public License as published by
#the Free Software Foundation, either version 3 of the License, or
#(at your option) any later version.

#This program is distributed in the hope that it will be useful,
#but WITHOUT ANY WARRANTY; without even the implied warranty of
#MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
#GNU General Public License for more details.

#You should have received a copy of the GNU General Public License
#along with this program.  If not, see <http://www.gnu.org/licenses/>.
######################################################################

*/

var camera, scene, renderer, controls, raycaster;
var keyboard = new KeyboardState();
var clock = new THREE.Clock();
var clockD;
var player_configs = [];
var players = [];

init();
animate();

function init() {
  scene = new THREE.Scene();

  createRenderer();
  createCamera();

  player_configs.push({
    speed : 5,
    keyleft : "A",
    keyright : "D",
    keyback : "S",
    keyforward : "W"
  });

  player_configs.push({
    speed : 5,
    keyright : "J",
    keyleft : "G",
    keyback : "H",
    keyforward : "Y"
  });

  players.push(createCube(1));
  players.push(createCube(1));
  players[1].position.x = 4;
  for(var i in players){
    for ( var p in player_configs[i] ){
      players[i][p] = player_configs[i][p];
      players[i].update = player_update;
    };

  };

  floor = createPlane();
  floor.rotation.x = Math.PI /2;//rotate 90 degrees
  floor.position.y = -.5;
  light = createLights();
  window.addEventListener( 'resize', onWindowResize, false );
}

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();

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

function animate() {
  requestAnimationFrame( animate );
  renderer.render( scene, camera );

  clockD = clock.getDelta();
  //uncoment to have camera look at player
  //controls.target = player.position;
  controls.update();
  for(var i in players){
    players[i].update();
  }
  //TWEEN.update();
}

function player_update(){
  keyboard.update();

  var moveDistance = this.speed * clockD;
  if ( keyboard.pressed(this.keyleft) )
    this.rotateY( moveDistance );

  if ( keyboard.pressed(this.keyright) )
    this.rotateY( -moveDistance );

  if ( keyboard.pressed(this.keyforward) )
    this.translateZ( -moveDistance );

  if ( keyboard.pressed(this.keyback) )
    this.translateZ( moveDistance );
}

function createCamera(){
  camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 5000 );
  camera.position.z = 5;
  camera.position.y = 4;
  camera.lookAt(scene.position);

  //addcontrols
  controls = new THREE.OrbitControls( camera, renderer.domElement );
}

function createRenderer(){
  renderer = new THREE.WebGLRenderer( { antialias: true,alpha: true } );
  renderer.setPixelRatio( window.devicePixelRatio );
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );

}

function createCube(size){
  var geometry = new THREE.BoxGeometry( size, size, size );
  var material = new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } );
  var cube = new THREE.Mesh( geometry, material );
  cube.position.set( 0, 0, 0 );
  scene.add(cube);
  cube.update = player_update;
  return cube;
}


function createLights(){
  //set to true to view light positions
  var helpers = false;

  light1 = new THREE.DirectionalLight( 0xffffff, 1 );
  light1.position.set( 5, 5, 10 ).normalize();
  scene.add( light1 );

  //Add helper to view light position
  if(helpers){
    light1.helper = new THREE.DirectionalLightHelper( light1, 50 );
    scene.add( light1.helper);
  }

  light2 = new THREE.DirectionalLight( 0xffffff, 1 );
  light2.position.set(-1,-1,-5).normalize();
  scene.add( light2 );

  //Add helper to view light position
  if(helpers){
    light2.helper = new THREE.DirectionalLightHelper( light2, 50 );
    scene.add( light2.helper);
  }

  return true;
}

function createPlane(){
  //PlaneGeometry(width : Float, height : Float, widthSegments : Integer, heightSegments : Integer)
  var geometry = new THREE.PlaneGeometry( 20, 20, 32 );
  var material = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} );
  var plane = new THREE.Mesh( geometry, material );
  scene.add( plane );

  return plane;
}