CG_HW3

by ikatyang

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>
<script src="https://jyunming-chen.github.io/tutsplus/js/KeyboardState.js"></script>
<script src="https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/OrbitControls.js"></script>
<div class="top">
  <h1>CG_HW3</h1>
</div>
<div class="bottom">
  <span>W</span>
  <span>A</span>
  <span>S</span>
  <span>D</span>
  <span>space</span>
  <span>tab</span>
</div>
<span class="carPosition">(0, 0, 0)</span>
<div class="back-camera-border"></div>
<div class="bird-camera-border"></div>

CSS

.top, .bottom {
  position: absolute;
  left: 0;
  color: #ffff00;
  text-align: center;
}
.top {
  width: 100%;
  top: 0;
}
.bottom {
  bottom: 0;
  width: calc(100% - 250px);
}
.bottom span {
  display: inline-block;
  background: black;
  margin: 0.5em;
  padding: 0.5em;
  border-radius: 0.5em;
  overflow: hidden;
}
.bottom span.pressed {
  background: red;
}
.carPosition {
  position: absolute;
  top: 150px;
  right: 0;
  width: 150px;
  text-align: center;
  color: #ffffff;
}
body {
  margin: 0;
  overflow: hidden;
}
.bird-camera-border {
  position: absolute;
  top: 0;
  right: 0;
  width: 150px;
  height: 150px;
  border: 1px solid yellow;
  border-top-width: 0;
  border-right-width: 0;
}
.back-camera-border:not(.show) {
  display: none;
}
.back-camera-border.show {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 250px;
  height: 250px;
  border: 1px solid yellow;
  border-bottom-width: 0;
  border-right-width: 0;
}

JavaScript

var camera, scene, renderer;
var controls;
var birdCamera, backCamera;
var birdCameraSize = 150;
var backCameraSize = 250;
var car;
var gridXZ;
var cylinders;

init();
animate();

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

  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.set(0, 100, 200);
  scene.add(camera);
  
  birdCamera = new THREE.OrthographicCamera(100 + 5, -100 - 5, -100 - 5, 100 + 5, 1, 1000);
  birdCamera.position.y = 100;
  birdCamera.lookAt(scene.position);
  birdCamera.rotation.z += Math.PI / 2;
  scene.add(birdCamera);
  
  backCamera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
  scene.add(backCamera);
  
  var light = new THREE.HemisphereLight(0xffffff, 0x000000, 1);
  light.position.set(0, 100, 0);
	scene.add(light);

	var ground = new THREE.Mesh(
  	new THREE.PlaneGeometry(400, 400),
    new THREE.MeshLambertMaterial({
    	map: THREE.ImageUtils.loadTexture('//i.imgur.com/kSrOisq.jpg')
    })
  );
  ground.position.y = -1;
  ground.rotation.x = -Math.PI / 2;
  scene.add(ground);
	
  gridXZ = new THREE.GridHelper(200, 10);
  gridXZ.setColors(new THREE.Color(0xff0000), new THREE.Color(0xffffff));
  scene.add(gridXZ);
  
  car = createCar();
  car.speed = 0;
  scene.add(car);
  
  cylinders = [];
  for (var i = 0; i < 10; i++) {
  	var cylinder = new THREE.Mesh(
    	new THREE.CylinderGeometry(20, 20, 50, 32),
      new THREE.MeshLambertMaterial({ color: 'blue' })
    );
    cylinder.position.set(
    	(40 + Math.random() * 160) * (Math.random() > 0.5 ? 1 : -1),
      25,
    	(40 + Math.random() * 160) * (Math.random() > 0.5 ? 1 : -1)
    );
    cylinders.push(cylinder);
    scene.add(cylinder);
  }
  var parkingBlockGeometry = new THREE.Geometry();
  parkingBlockGeometry.vertices.push(
  	new THREE.Vector3(-20, 0, -30),
  	new THREE.Vector3(-20, 0, +30),
  	new THREE.Vector3(+20, 0, +30),
  	new...