Hw3

by yi hom

HTML

<div id="info">HW3
  <br>
  <button id="toggle" style="width:20%">camera</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://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://jyunming-chen.github.io/tutsplus/js/KeyboardState.js"></script>

CSS

#info {
  position: absolute;
  top: 2%;
  width: 100%;
  padding: 10px;
  text-align: center;
  color: #ffff00
}

body {
  overflow: hidden;
}

JavaScript

var scene, renderer, camera, camera3rd;;
var controls;
var car;
var keyboard = new KeyboardState();
var theta = 0.2;
var ver, rp;
var meshtire2, meshtire1, meshtire;
var ftire, obstacle, obstacle1;
var change = 1;
var v = 0;
var r, s, ainv;
init();
animate();

$("#toggle").click(function() {
  if (change === 0) {
    change = 1;
  } else if (change === 1) {
    change = 0;
  }
});

function init() {
  scene = new THREE.Scene();
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0x888888);
  document.body.appendChild(renderer.domElement);
  
  var light = new THREE.PointLight( 0xffffff, 1, 10000 );
  light.position.set( 50, 100, 50 );
  scene.add( light );

  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.z = -300;
  camera.position.y = 150;

  camera3rd = new THREE.PerspectiveCamera(80, window.innerWidth / window.innerHeight, 1, 1000);
  scene.add(camera3rd);
  controls = new THREE.OrbitControls(camera, renderer.domElement);

  var geometry = new THREE.BoxGeometry(35, 10, 20);
  var material = new THREE.MeshBasicMaterial({
    wireframe: true
  });
  var mesh = new THREE.Mesh(geometry, material);
  mesh.position.y = 10;

  var cylin = new THREE.CylinderGeometry(15, 15, 50, 32);
  var cylinmaterial = new THREE.MeshLambertMaterial({
    //wireframe: true,
    color: 0xffff00
  });

  var cylin1 = new THREE.CylinderGeometry(30, 30, 50, 32);
  var cylin1material = new THREE.MeshLambertMaterial({
    //wireframe: true,
    color: 0xff0000
  });


  obstacle = new THREE.Mesh(cylin, cylinmaterial);
  obstacle.position.set(100, 22.5, 50);

  obstacle1 = new THREE.Mesh(cylin1, cylin1material);
  obstacle1.position.set(-50, 22.5, 50);

  scene.add(obstacle);
  scene.add(obstacle1);


  var tire = new THREE.CylinderGeometry(5, 5, 2 ,16);
  meshtire = new THREE.Mesh(tire, material);
  meshtire.rotation.x = Math.PI / 2;
  meshtire1 =...