<div class="info1">555</div>
body { 
  margin: 0;
  background: #1C1D21;
}
canvas { 
  width: 100%; height: 100%;
  margin-top:2px;
  border: 1px solid #ccc;
}
.info1 {
  position: absolute;
  right:0;
  top: 0;
  width: 50px;
  height:25px;
  border: 1px solid;
}
function getRandomInRange(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

var levels = [
  [1,1,1,1,1,1,1,1,1,1],
  [1,0,0,0,0,0,0,0,0,1],
  [1,0,0,0,0,0,0,0,0,1],
  [1,0,0,0,1,0,0,0,0,1],
  [1,0,0,0,0,0,0,0,0,1],
  [1,0,0,0,0,0,0,0,0,1],
  [1,0,0,0,0,0,0,0,0,1],
  [1,0,0,0,0,0,0,0,0,1],
  [1,1,1,1,1,1,1,1,1,1]
]

var drawLevel = function() {
  for (var i = 0; i < levels.length; i++) {
    for (var j = 0; j < levels[0].length; j++) {
      if (levels[i][j] == 1) {
        var geometry = new THREE.BoxGeometry(5,5,5);
        var material = new THREE.MeshPhongMaterial({ color: 0xff0000 })
        var block = new THREE.Mesh( geometry, material );
        block.position.z = 2.5;
        block.position.x = -10 + 5 * j;
        block.position.y = -10 + 5 * i;
        masBlocks.push( block );
        scene.add( block )
      }
    }
  }
}

var camera, scene, renderer, controls;

var player;
var moveRight = 1;
var moveLeft = 1;
var moveUp = 1;
var moveDown = 1;

var masBlocks = [];

var clock = new THREE.Clock();
var keyboard = new THREEx.KeyboardState();
var stats;

init();
animate();
function init() {
  camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
  camera.position.set(0,-20,70);
  camera.lookAt(0,0,0);
  scene = new THREE.Scene
  var ambient = new THREE.AmbientLight( 0x000000, 0.3 );
  scene.add( ambient )
  var light = new THREE.PointLight(0xffffff, 0.6, 200);
  light.position.set(10,10,100);
  light.castShadow = true;
  scene.add( light );
  
  controls = new THREE.OrbitControls( camera );
  controls.enableKeys = false;
  controls.update();
  
  var geometryPlane = new THREE.PlaneGeometry(300,300);
  var materialPlane = new THREE.MeshPhongMaterial({ color: 0xcccccc })
  var plane = new THREE.Mesh ( geometryPlane, materialPlane );
  //plane.rotation.x = -Math.PI/2;
  plane.receiveShadow = true;
  scene.add( plane )

  var geometry = new THREE.BoxGeometry(5,5,5);
  var material = new THREE.MeshPhongMaterial({ color: 0x00ff00 })
  var materialSide = new THREE.MeshPhongMaterial({ color: 0x00ffff })
  var mesh = new THREE.Mesh( geometry, material );
  
  var meshLeft = new THREE.Mesh( new THREE.BoxGeometry(0.2,4,1), materialSide );
  meshLeft.position.x = -2.5;
  meshLeft.name = 'left';
  var meshRight = new THREE.Mesh( new THREE.BoxGeometry(0.2,4,1), materialSide );
  meshRight.position.x = 2.5;
  meshRight.name = 'right';
  var meshUp = new THREE.Mesh( new THREE.BoxGeometry(4,0.2,1), materialSide );
  meshUp.position.y = 2.5;
  meshUp.name = 'up';
  var meshDown = new THREE.Mesh( new THREE.BoxGeometry(4,0.2,1), materialSide );
  meshDown.position.y = -2.5;
  meshDown.name = 'down';
  
  player = new THREE.Group();
  player.add( mesh )
  player.add( meshLeft )
  player.add( meshRight )
  player.add( meshUp )
  player.add( meshDown )
  
  player.position.z = 2.3;
  scene.add ( player );
  
  drawLevel();

  renderer = new THREE.WebGLRenderer( { antialias: true } );
  renderer.setSize( window.innerWidth, window.innerHeight );
  renderer.setClearColor(0xffffff)
  //renderer.shadowMap.enabled = true;
  renderer.shadowMap.type = THREE.PCFSoftShadowMap;
  renderer.gammaInput = true;
  renderer.gammaOutput = true;
  stats = new Stats();
  document.body.appendChild( stats.dom );
  document.body.appendChild( renderer.domElement );
  //////////////////////////////////////////////////////////
}



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

  for (var i = 0; i < masBlocks.length; i++) {
    if (detectCollisionCubes(player.children.find(el=>el.name==='left'), masBlocks[i])) {
      moveLeft = 0;
    }
    else if (detectCollisionCubes(player.children.find(el=>el.name==='right'), masBlocks[i])) {
      moveRight = 0;
    }
    if (detectCollisionCubes(player.children.find(el=>el.name==='up'), masBlocks[i])) {
      moveUp = 0;
    }
    else if (detectCollisionCubes(player.children.find(el=>el.name==='down'), masBlocks[i])) {
      moveDown = 0;
    }
  }
			
	if ( keyboard.pressed("A") && moveLeft == 1) player.position.x -= 0.5;
  else if (keyboard.pressed("A") && moveLeft == 0) {
    moveLeft = 1
  }
  if ( keyboard.pressed("D") && moveRight == 1) player.position.x += 0.5;
  else if (keyboard.pressed("D") && moveRight == 0) {
    moveRight = 1
  }
  if ( keyboard.pressed("W") && moveUp == 1) player.position.y += 0.5;
  else if (keyboard.pressed("W") && moveUp == 0) {
    moveUp = 1
  }
  if ( keyboard.pressed("S") && moveDown == 1) player.position.y -= 0.5;
  else if (keyboard.pressed("S") && moveDown == 0) {
    moveDown = 1
  }
  
  
 
}


function detectCollisionCubes(object1, object2){
  object1.geometry.computeBoundingBox();
  object2.geometry.computeBoundingBox();
  object1.updateMatrixWorld();
  object2.updateMatrixWorld();
  let box1 = object1.geometry.boundingBox.clone();
  box1.applyMatrix4(object1.matrixWorld);
  let box2 = object2.geometry.boundingBox.clone();
  box2.applyMatrix4(object2.matrixWorld);

  return box1.intersectsBox(box2);
}

function animate() {
  requestAnimationFrame( animate );
  
  move();
  stats.update();
  renderer.render( scene, camera );
}













Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/three.js/96/three.min.js
  2. https://threejs.org/examples/js/controls/OrbitControls.js
  3. https://threejs.org/examples/js/controls/FirstPersonControls.js
  4. https://threejs.org/examples/js/controls/PointerLockControls.js
  5. https://lcfc.ru/assets/three/THREEx.KeyboardState.js
  6. https://threejs.org/examples/js/libs/stats.min.js
  7. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js