/**
  * Creating a scene object with a customized background color
  **/

  function getScene() {
    var scene = new THREE.Scene();
    scene.background = new THREE.Color(0x111111);
    return scene;
  }

  /**
  * Setting up the camera for the scene. Camera parameters:
  *   [0] field of view: denotes the visible portion of the scene in degrees
  *   [1] aspect ratio: defines the width-to-height aspect ratio of the scene
  *   [2] near clipping plane: objects closer than this are excluded from rendering
  *   [3] far clipping plane: objects farther than this are omitted from rendering
  **/

  function getCamera() {
    var aspectRatio = window.innerWidth / window.innerHeight;
    var camera = new THREE.PerspectiveCamera(75, aspectRatio, 0.1, 10000);
    camera.position.set(0,150,400);
    camera.lookAt(scene.position);  
    return camera;
  }

  /**
  * Configuring the lighting setup for the scene. Light parameters:
  *   [0]: Hexadecimal color value of the light source
  *   [1]: Intensity or strength of the light
  *   [2]: Distance from the light where intensity becomes zero
  * @param {obj} scene: current scene object
  **/

  function getLight(scene) {
    var lights = [];
    lights[0] = new THREE.PointLight( 0xffffff, 0.6, 0 );
    lights[0].position.set( 100, 200, 100 );
    scene.add( lights[0] );

    var ambientLight = new THREE.AmbientLight(0x111111);
    scene.add(ambientLight);
    return light;
  }

  /**
  * Initializing the renderer for the scene
  **/

  function getRenderer() {
    // Create a WebGL renderer along with the canvas element
    var renderer = new THREE.WebGLRenderer({antialias: true});
    // Enable support for retina displays
    renderer.setPixelRatio(window.devicePixelRatio);
    // Define canvas size
    renderer.setSize(window.innerWidth, window.innerHeight);
    // Append canvas to the DOM
    document.body.appendChild(renderer.domElement);
    return renderer;
  }

  /**
  * Establishing controls for the scene
  * @param {obj} camera: three.js camera instance
  * @param {obj} renderer: three.js renderer instance
  **/

  function getControls(camera, renderer) {
    var controls = new THREE.TrackballControls(camera, renderer.domElement);
    controls.zoomSpeed = 0.4;
    controls.panSpeed = 0.4;
    return controls;
  }

  /**
  * Loading grass texture
  **/

  function getPlane(scene, loader) {
    var texture = loader.load('grass.jpg');
    texture.wrapS = texture.wrapT = THREE.RepeatWrapping; 
    texture.repeat.set( 10, 10 );
    var material = new THREE.MeshBasicMaterial({
      map: texture, side: THREE.DoubleSide
    });
    var geometry = new THREE.PlaneGeometry(1000, 1000, 10, 10);
    var plane = new THREE.Mesh(geometry, material);
    plane.position.y = -0.5;
    plane.rotation.x = Math.PI / 2;
    scene.add(plane);
    return plane;
  }

  /**
  * Adding a sky background
  **/

  function getBackground(scene, loader) {
    var imagePrefix = 'sky-parts/';
    var directions  = ['right', 'left', 'top', 'bottom', 'front', 'back'];
    var imageSuffix = '.bmp';
    var geometry = new THREE.BoxGeometry( 1000, 1000, 1000 ); 
    
    var materialArray = [];
    for (var i = 0; i < 6; i++)
      materialArray.push( new THREE.MeshBasicMaterial({
        map: loader.load(imagePrefix + directions[i] + imageSuffix),
        side: THREE.BackSide
      }));
    var sky = new THREE.Mesh( geometry, materialArray );
    scene.add(sky);
  }

  /**
  * Incorporating a spherical character
  **/

  function getSphere(scene) {
    var geometry = new THREE.SphereGeometry( 30, 12, 9 );
    var material = new THREE.MeshPhongMaterial({
      color: 0xd0901d,
      emissive: 0xaf752a,
      side: THREE.DoubleSide,
      flatShading: true
    });
    var sphere = new THREE.Mesh( geometry, material );

    // Creating a group for translations and rotations
    var sphereGroup = new THREE.Group();
    sphereGroup.add(sphere)

    sphereGroup.position.set(0, 24, 100);
    scene.add(sphereGroup);
    return [sphere, sphereGroup];
  }

  /**
  * Recording currently pressed keys
  **/

  function addListeners() {
    window.addEventListener('keydown', function(e) {
      pressed[e.key.toUpperCase()] = true;
    })
    window.addEventListener('keyup', function(e) {
      pressed[e.key.toUpperCase()] = false;
    })
  }

  /**
  * Updating sphere movements
  **/

  function moveSphere() {
    var delta = clock.getDelta(); // seconds
    var moveDistance = 200 * delta; // 200 pixels per second
    var rotateAngle = Math.PI / 2 * delta; // pi/2 radians (90 deg) per sec

    // Move forwards/backwards/left/right
    if ( pressed['W'] ) {
      sphere.rotateOnAxis(new THREE.Vector3(1,0,0), -rotateAngle)
      sphereGroup.translateZ( -moveDistance );
    }
    if ( pressed['S'] ) 
      sphereGroup.translateZ(  moveDistance );
    if ( pressed['Q'] )
      sphereGroup.translateX( -moveDistance );
    if ( pressed['E'] )
      sphereGroup.translateX(  moveDistance ); 

    // Rotate left/right/up/down
    var rotation_matrix = new THREE.Matrix4().identity();
    if ( pressed['A'] )
      sphereGroup.rotateOnAxis(new THREE.Vector3(0,1,0), rotateAngle);
    if ( pressed['D'] )
      sphereGroup.rotateOnAxis(new THREE.Vector3(0,1,0), -rotateAngle);
    if ( pressed['R'] )
      sphereGroup.rotateOnAxis(new THREE.Vector3(1,0,0), rotateAngle);
    if ( pressed['F'] )
      sphereGroup.rotateOnAxis(new THREE.Vector3(1,0,0), -rotateAngle);
  }

  /**
  * Track the sphere's movement
  **/

  function moveCamera() {
    var relativeCameraOffset = new THREE.Vector3(0,50,200);
    var cameraOffset = relativeCameraOffset.applyMatrix4(sphereGroup.matrixWorld);
    camera.position.x = cameraOffset.x;
    camera.position.y = cameraOffset.y;
    camera.position.z = cameraOffset.z;
    camera.lookAt(sphereGroup.position);
  }

  // Rendering loop
  function render() {
    requestAnimationFrame(render);
    renderer.render(scene, camera);
    moveSphere();
    moveCamera();
  };

  // State variables
  var pressed = {};
  var clock = new THREE.Clock();

  // Global instances
  var scene = getScene();
  var camera = getCamera();
  var light = getLight(scene);
  var renderer = getRenderer();

  // Include mesh elements
  var loader = new THREE.TextureLoader();
  var floor = getPlane(scene, loader);
  var background = getBackground(scene, loader);
  var sphereData = getSphere(scene);
  var sphere = sphereData[0];
  var sphereGroup = sphereData[1];

  addListeners();
  render();

body { margin: 0; overflow: hidden; }
canvas { width: 100%; height: 100%; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/88/three.min.js"></script>