hw3

car

by chaiche

HTML

<div id="info">
  <p id='statusPrint'>123
  </p>
<button id="btn" style="color:red">birdeye</button>
  <p id='Print'>上下：前進與後退,左右：右轉左轉,空白鍵：停止
  </p>
  
</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: 2%;
  width: 100%;
  padding: 10px;
 // text-align: center;
  color: #ffff00
}
#statusPrint{
  color: blue
}
#Print{
  float: left;
  margin-top: 50%;
  overflow: hidden;
  color: purple
}
#btn {
  clear:both;
  float: left;
  margin-top: 50%;
  margin-left: 5%;
  overflow: hidden;
}

JavaScript

var scene, renderer, camera ,cameraHUD;
var controls;
var keyboard = new KeyboardState();
var car_speed = 15;
var car_theta = 0.35;
var clock = new THREE.Clock();
var splineObject;
var dd = [];
var isbirdeye = false;

init();
animate();

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

function init() {
	scene = new THREE.Scene();
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0x888888);
  renderer.autoClear = false;
  document.body.appendChild(renderer.domElement);

  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 100000);
  camera.position.set(-100,150,200);
  controls = new THREE.OrbitControls(camera, renderer.domElement);
  
  cameraHUD = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 100000);
  camera.position.set(-100,150,200);
  scene.add(cameraHUD);
  
  camera_back = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 100000);
  scene.add(camera_back);
  
  statusP = window.document.getElementById('statusPrint');
  
  var gridXZ = new THREE.GridHelper(1000, 10);
  gridXZ.setColors(new THREE.Color(0xff0000), new THREE.Color(0xffffff));
  //scene.add(gridXZ);
  
  THREE.ImageUtils.crossOrigin = '';
  //////////////////////////
  //road
var road = new THREE.Mesh(new THREE.BoxGeometry(800, 0, 800),
                       new THREE.MeshLambertMaterial({
                        	map: THREE.ImageUtils.loadTexture('http://i.imgur.com/zbPzCZU.jpg'),
                          transparent: true,
                          opacity: 0.3,
                        }));
 
road.position.y = 1.5; 
road.doubleSided = true; 
road.receivedShadow = true;
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
 ...