HUD Car

buttons

by jason870509

HTML

<div id="info"> Dynamic Drive
  <br>
  <br>
  <button id="camera" style="width:30%">Change camera</button>
</div>
<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/controls/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>
<script src="https://rawgit.com/jyunming-chen/tutsplus/master/js/text2D.js">
</script>

CSS

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

body {
  overflow: hidden;
}

JavaScript

var scene, renderer, camera1, camera2;
var controls;
var sceneHUD, cameraHUD, sceneHUD1, cameraHUD1, cameraHUD2;
var mesh, angle = 0,
  car, car2, wheel = [],
  wheels = [],
  change = true;
var keyboard = new KeyboardState();
var clock, text;
var pos = new THREE.Vector3();
var speed, angle, vel;
(function() {
  Math.clamp = function(val, min, max) {
    return Math.min(Math.max(val, min), max);
  }
})();
init();
animate();

function initHUD() {
  // sceneHUD: a simple line boundary
  sceneHUD1 = new THREE.Scene();
  cameraHUD1 = new THREE.OrthographicCamera(-10.5, 10.5, 10.5, -10.5, -50, 50);
  cameraHUD1.position.z = 30; // for border

  cameraHUD2 = new THREE.OrthographicCamera(-300, 300, 300, -300, 1, 500);
  cameraHUD2.position.set(0, 450, 0)
  cameraHUD2.up.set(0, 0, -1) // for top view
  cameraHUD2.lookAt(new THREE.Vector3())

  var lineGeometry = new THREE.Geometry();
  lineGeometry.vertices.push(new THREE.Vector3(-10, -10, 0),
    new THREE.Vector3(10, -10, 0),
    new THREE.Vector3(10, 10, 0),
    new THREE.Vector3(-10, 10, 0),
    new THREE.Vector3(-10, -10, 0));
  var line = new THREE.Line(lineGeometry,
    new THREE.LineBasicMaterial({
      color: 0xffffff
    }));
  sceneHUD.add(line);

}



$("#camera").click(function() {
  change = !change;
});

function init() {
  clock = new THREE.Clock();
  scene = new THREE.Scene();
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0x888888);
  document.body.appendChild(renderer.domElement);
  camera1 = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1500);
  camera1.position.set(0, 600, 500)
  camera2 = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);

  cameraHUD = new THREE.OrthographicCamera(-10, 10, 10, -10, -10, 1000);
  cameraHUD.position.z = 200;
  controls = new THREE.OrbitControls(camera1, renderer.domElement);
  controls.enableKeys = false;
  let light1 = new...