學長Carry

GLSL

by j91157j91157

HTML

<div id="info">
  Computer Graphics
  <br/> Homework 3
  <br/> Tricycle Steering, Collision Detection, Multiple Viewports
  <br/>
  <p id='thetaPrint'></p>
</div>
<div id="birdImg">
  <img id="bird" src="https://mdes4214.github.io/2016CGhw/images/hw3/bird_eye.png" style="cursor:pointer">
  <img id="carChange" src="https://mdes4214.github.io/2016CGhw/images/hw3/car_transparent.png" height="50" width="100" style="cursor:pointer">
</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>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

CSS

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

#birdImg {
  position: absolute;
  bottom: 10px;
  width: 100%;
  padding: 10px;
  text-align: left;
  color: #ffff00
}

body {
  overflow: hidden;
}

JavaScript

var scene, renderer, camera;
var sceneHUD, cameraHUD, cameraBird, scenePark, cameraPark;
var controls;
var carWidth = 40, carHeight = 16, carDepth = 20, wheelRadius = carWidth/8;
var car, frontWheel, leftWheel, rightWheel, bar = [], barRadius = [];
var keyboard = new KeyboardState();
var theta = 0.3;
var thetaP;
var C, RC;
var gridP;
var mesh;
var birdFlag = false, parkFlag = false, carFlag = false;
init();
animate();
$("#bird").click(function() {
  birdFlag = !birdFlag;
});
$("#carChange").click(function(){
	if(!carFlag)
		mesh.material.opacity = 0.5;
  else
  	mesh.material.opacity = 1;
  carFlag = !carFlag;
});
function init() {
	thetaP = window.document.getElementById('thetaPrint');
  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, 1, 10000);
  camera.position.z = 500;
  camera.position.y = 200;
  controls = new THREE.OrbitControls(camera, renderer.domElement);
  
  // Bird's Eye
  cameraBird = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
  cameraBird.position.y = 300;
  scene.add(camera);
  scene.add(cameraBird);
  
  // Parking
  cameraPark = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
	// HUD
  cameraHUD = new THREE.OrthographicCamera(-10.5, 10.5, 10.5, -10.5, -10, 10);
  cameraHUD.position.z = 5;
  sceneHUD = new THREE.Scene();
  var fframe = new THREE.Mesh(new THREE.PlaneGeometry(21, 1.5), new THREE.MeshBasicMaterial({
    color: 0xDDDD33,
    opacity: 0.7,
    transparent: true,
    depthTest: false
  }));
  var fup = fframe.clone();
  fup.position.set (0,9.75,0);
  var fdown = fframe.clone();
  fdown.position.set (0,-9.75,0);
  var fleft = fframe.clone();
  fleft.position.set (-9.75,0,0);
 ...