game_3Js_hw1_car

by otorineko6790

HTML

<div id="info">d-drive
<br/>
<button id="toggle" style="width:20%">Toggle Turn</button>
<button id="sector" style="width:20%">sector</button>
<button id="quartz" style="width:20%">quartz</button>
<button id="analog" style="width:20%">analog</button>
</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
}

body {
  overflow: hidden;
}

JavaScript

var camera, scene, renderer, mesh, controls;
var keyboard = new KeyboardState();
var clock, texture;

var car;
var pos = new THREE.Vector3();
var vel = new THREE.Vector3();
var force = new THREE.Vector3();
var power, angle;
var loader = new THREE.TextureLoader();
loader.setCrossOrigin('');
/* //button 
//https://jsfiddle.net/otorineko6790/0gwd6ohg/
$("#toggle").click(function() {
  turn = !turn;
});

$("#quartz").hide(); 
$("#sector").hide(); 

sh.visible = ! sh.visible;
$("#analog").click(function() {
	$("#sector").toggle(true);
  $("#analog").hide(); 
  sec = !sec;
  sh.visible = ! sh.visible;
  //console.log('sec :' + sec + ' qur :' + quartz);
});
$("#sector").click(function() {
	$("#quartz").toggle(true);
  $("#sector").hide(); 
  sec = !sec;
  quartz = !quartz;
});

$("#quartz").click(function() {
	$("#analog").toggle(true);
  $("#quartz").hide(); 
  quartz = !quartz;
  sh.visible = !sh.visible;
});
*/
function setRoad(){
	let road = 	loader.load("https://raw.githubusercontent.com/otorineko6790/computerGraphicFst/master/roadTexture.jpg");
  
}

function setGeometry(width, height){
	let flat = [
  	new THREE.Vector2(0, 0, 0),
    new THREE.Vector2(width, 0, 0),
    new THREE.Vector2(width, 0, height),
    new THREE.Vector2(0, 0, height)    
  ];
  
let geometry = new THREE.Geometry();
  geometry.vertices.push(
    new THREE.Vector3(0, 0, 0),
    new THREE.Vector3(width, 0, 0),
    new THREE.Vector3(width, 0, height),
    new THREE.Vector3(0, 0, height)
  );
  let face;
  face = new THREE.Face3(0, 1, 2);
  geometry.faces.push(face);
  face = new THREE.Face3(0, 2, 3);
  geometry.faces.push(face);
  

  geometry.faceVertexUvs[0].push([new THREE.Vector2(0, 0), new THREE.Vector2(1, 0), new THREE.Vector2(1, 1)]);
  geometry.faceVertexUvs[0].push([new THREE.Vector2(0, 0), new THREE.Vector2(1, 1), new THREE.Vector2(0, 1)]);
  
  geometry.computeBoundingSphere();
  geometry.computeFaceNormals();
  geometry.computeVertexNormals();
  
  return geometry;
  /*
  let mesh...