hw1 prototype

Part 2'

by YouTingKuo

HTML

<div id="info">hw1</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://jyunming-chen.github.io/tutsplus/js/KeyboardState.js"></script>
<div id="engineShow"></div>
<div id="brakeShow"></div>

CSS

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

body {
  overflow: hidden;
}

#engineShow {
    position: absolute;
    top: 30px;
    width: 100%;
    padding:5px;
    text-align: center;
    color: #00ffff;
}
#brakeShow {
    position: absolute;
    top: 50px;
    width: 100%;
    padding:5px;
    text-align: center;
    color: #00ffff;
}

JavaScript

var camera, scene, renderer, controls;
var keyboard = new KeyboardState();
var cylinder;
var brakeOn = false;
var engine = false;
var speed = 0;
var turn = 0;
var boat = new THREE.Object3D();
var pointer = new THREE.Object3D();
var speedProportion, pointerProportion;
var engineShow, brakeShow;
var On = true;


var pos, vel, force;
var angle = 0;

//var power;
var mass=1;
var clock = new THREE.Clock();

init();
animate();

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, 1000);
  camera.position.set(0, 185, 185); //儀錶板(800, 0, 0)
  scene.add(camera);
  controls = new THREE.OrbitControls(camera, renderer.domElement);
  
  speedCamera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
  speedCamera.position.set(30, 0, 0);
  speedControls = new THREE.OrbitControls(speedCamera, renderer.domElement);
  cameraHUD = new THREE.OrthographicCamera(-10, 10, 10, -10, -1, 1000);
  cameraHUD.position.z = 0;
  
  renderer.autoClear = false;
  sceneHUD = new THREE.Scene();
  
  //不同view的HUD
var fframe = new THREE.Mesh(new THREE.PlaneGeometry(7.2, 0.08), new THREE.MeshBasicMaterial({
    color: 0xff0000,
    depthTest: false
  }));
var fframe2 = new THREE.Mesh(new THREE.PlaneGeometry(7.8, 0.08), new THREE.MeshBasicMaterial({
    color: 0xff0000,
    opacity: 0.6,
    transparent: true,
    depthTest: false
  }));
  var fup = fframe.clone();
  fup.position.set (6.1,-2.05,0);
  var fdown = fframe.clone();
  fdown.position.set (6.1,-9.9,0);
  var fleft = fframe2.clone();
  fleft.rotation.z = Math.PI/2;
  fleft.position.set (2.5,-6,0);
  var fright = fframe2.clone();
  fright.rotation.z = Math.PI/2;
  fright.position.set (9.7,-6,0);
  sceneHUD.add(fup);
  sceneHUD.add(fdown);
 ...