3d game

by Eduard Kulikov

HTML

<script src="https://threejs.org/build/three.min.js"></script>

CSS

* {
  padding: 0;
  margin: 0;
  overflow: hidden;
}

JavaScript

var player, renderer, scene, camera;

init();
animate();

function init() {
  // renderer
  renderer = new THREE.WebGLRenderer({ antialias: false });
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0xccccff);
  var container = document.createElement('div');
  document.body.appendChild(container);
  container.appendChild(renderer.domElement);

  // scene
  scene = new THREE.Scene();

  // camera
  camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.set(5, 3, 15);

  // light    
  var light = new THREE.PointLight(0xffffff);
  light.position.set(100, 250, 250);
  scene.add(light);
  
  var playerCube = createCube({ z: 2 });
  scene.add(playerCube);
  
  var input = addKeyListeners();
  player = new Player(playerCube, input, 0.05);
  
  var cube = createCube({ 
    x: 100,
    y: 1,
    z: 100,
    image: 'https://threejs.org/examples/textures/terrain/grasslight-thin.jpg',
    repeatY: 5
  });
  
  cube.position.y = -1;
  scene.add(cube);
  
  window.addEventListener('resize', onWindowResize, false);
}

function onWindowResize(event) {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}

function animate() {
  player.update();
  updateCameraPosition(); 
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}

function Player (object, input, speed) {
	gameObject = GameObject.call(this, object);
  this.speed = speed || 0.1;
  this.acceleration = new THREE.Vector3();
  
  var update = this.update.bind(this);
  
  this.update = function() {
  	update();
    
    this.acceleration.multiplyScalar(0.95);
		this.acceleration.add(
  		this.getMovingDirection().multiplyScalar(this.speed)
    );
    
    var accelerationScalar = 
    	Math.abs(this.acceleration.x) 
      + Math.abs(this.acceleration.y) 
      + Math.abs(this.acceleration.z);
    
    this.rotation.y -=...