HomeWork3

by Alan Lin

HTML

<div id="info">
  <br/> HOMEWORK 3
  <br id='thetaPrint'>
  <button id="btn" style="color:red">BirdEye</button>
</div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>
  <script src="https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/OrbitControls.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>
  <script src="https://jyunming-chen.github.io/tutsplus/js/KeyboardState.js"></script>
  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

CSS

#info {
  position: absolute;
  top: 1%;
  width: 100%;
  padding: 10px;
  text-align: center;
  color: #0000ff
}
#btn {
  clear:both;
  float: left;
  margin-left: 5px;
  overflow: hidden;
}
body {
  overflow: hidden;
}

JavaScript

var scene, camera, renderer, cameraBEV;
var controls, controls2;
var car, carbody, tire, tire2, tire3;
var keyboard = new KeyboardState(), clock = new THREE.Clock();
var theta = 0.3;
var thetaP;
var car_theta = 0.15;
var C, RC;
var car_theta = 0.03, car_speed = -10;
var turn = true;

init();
animate();

$("#btn").click(function(){
   turn = !turn;
   console.log(turn);
});

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

  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0x888888);
  document.body.appendChild(renderer.domElement);

  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.set(0, 150, 200);
  controls = new THREE.OrbitControls(camera, renderer.domElement);

  cameraBEV = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
  cameraBEV.position.y = 50;
  scene.add(cameraBEV);
  cameraBEV.position.y = 200;
  controls2 = new THREE.OrbitControls(cameraBEV, renderer.domElement);
	
  cameraBACK = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 10000);
  scene.add(cameraBACK);
  
  var gridXZ = new THREE.GridHelper(300, 10);
  gridXZ.setColors(new THREE.Color(0xff0000), new THREE.Color(0xffffff));
  //scene.add(gridXZ);
  
  THREE.ImageUtils.crossOrigin = '';
  var road = new THREE.Mesh(new THREE.BoxGeometry(400, 3, 400),
                       new THREE.MeshLambertMaterial({
                        	map: THREE.ImageUtils.loadTexture('http://i.imgur.com/ONqmQ42.jpg'),
                         // transparent: true,
                          opacity: 0.3
                        }));
 
road.position.y = -1.5; 
scene.add(road);
  

  var light = new THREE.PointLight(0xffffff, 1);
  light.position.set(150, 150, 150);
  scene.add(light);
  var amblight = new THREE.AmbientLight(0x404040); // soft white light
  scene.add(amblight);

  thetaP =...