Hw3

by joe chan

HTML

<div id="info">Hw3
  <br>
  <button id='target'>
    Switch
  </button>
</div>
<div id='name'>


</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js">


</script>
<script src="https://jyunming-chen.github.io/tutsplus/js/KeyboardState.js"></script>

CSS

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

#name {
  position: absolute;
  bottom: 50px;
  width: 100%;
  padding: 10px;
  text-align: center;
  font-size: 24px;
  color: #ffffff
}

body {
  overflow: hidden;
}

JavaScript

var camera, scene, renderer, ground, gtexture, light, controls;
var raycaster;
var mouse = new THREE.Vector2();
var pickables = [];
var slight = [];
var slight_b=[];
var wall = [];
var draw_b = [];
var car = [];
var carTexl = [
  'https://i.imgur.com/CW4klaK.png',
  'https://i.imgur.com/TQ29DGO.png',
  'https://i.imgur.com/Aq9Tlml.png',
  'https://i.imgur.com/mNYO8J4.png'
];
var carTex = [];

init();
animate();

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

  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.set(200, 300, 300);
  scene.add(camera);

  light = new THREE.AmbientLight(0x999999);
  scene.add(light);

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

  document.body.appendChild(renderer.domElement);
  raycaster = new THREE.Raycaster();
  document.addEventListener('mousedown', onDocumentMouseDown, false);
  document.addEventListener('mousemove', onDocumentMouseMove, false);
  window.addEventListener('resize', onWindowResize, false);

  //////////////////////////////////////////////////////////////////////
  var wallMaterial = new THREE.MeshLambertMaterial({
    color: 0xFFCC99
  });
  var wall_Geometry = new THREE.BoxGeometry(1, 100, 400);
  var carGeometry = new THREE.PlaneGeometry(115, 65, 30, 30);
  var draw = new THREE.BoxGeometry(.1, 69, 120);
  var draw_material = new THREE.MeshLambertMaterial({
    color: 0xaa4433
  });
  for (var i = 0; i < 4; i++) {
    wall[i] = new THREE.Mesh(wall_Geometry, wallMaterial);
    wall[i].position.y = 35;
    wall[i].position.z = 0;
    scene.add(wall[i]);
    ///////////////////////////////////////////
    loadCarTex(carTexl[i]);
    car[i] = new THREE.Mesh(carGeometry, new THREE.MeshLambertMaterial({
      side: THREE.DoubleSide
    }));
   ...