he4_2test

by omgazero

HTML

<div id="info">
  hw4_2
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/96/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://rawgit.com/mrdoob/three.js/dev/examples/js/Gyroscope.js"></script>

CSS

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

body {
  overflow: hidden;
}

JavaScript

var frame, scene, light, camera, renderer, controls;
var treadtexture = 'images/tread.jpg';
var tiretexture = 'images/tire.png';
var keyboard = new KeyboardState();
var pos = new THREE.Vector3();
var vel = new THREE.Vector3();
var force = new THREE.Vector3();
var power, angle, speed, clock;
var cylinders = [], center;

class Point2{
	constructor(x, y){
		this.x = x;
		this.y = y;
  }
}

class Box2{
	constructor(max, min){
		this.max = max;
		this.min = min;
  
  }
}


(function() {
  Math.clamp = function(val,min,max){
    return Math.min(Math.max(val,min),max);
    
  }})();
  
init();
animate();


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

	scene = new THREE.Scene();

	camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 10000);
	camera.position.y = 200;
	//  camera.position.z = 200;

	controls = new THREE.OrbitControls(camera, renderer.domElement);


	light = new THREE.SpotLight(0xffffff, 1, 400);
	light.position.set(0, 300, 0);
	scene.add(light);

	var ambientLight = new THREE.AmbientLight(0x444444);
	scene.add(ambientLight);

  
/*  var gridXZ = new THREE.GridHelper(200, 20, 'red', 'white');
  scene.add(gridXZ);*/

	var plane = new THREE.Mesh( new THREE.PlaneGeometry(200, 200), new THREE.MeshPhongMaterial() );
	plane.position.y -= 16;
	plane.rotation.x = -Math.PI/2;
	scene.add(plane);
  
	frame = createCar();
	scene.add(frame);
  
  var gyro = new THREE.Gyroscope(); 
	gyro.add( camera );
	frame.add(gyro);
  
  
	pos.set(0, 0, 0);
	power = 5.0;
	angle = 0.0;
	
	createCylinder();
	
	center = new THREE.Mesh(new THREE.SphereGeometry(5, 20, 20), new THREE.MeshNormalMaterial());
	
	scene.add(center);
	
}

function animate() {

	var dt = clock.getDelta();
	update(dt);
	frame.position.copy(pos);
	frame.rotation.y = angle; 
	
	frame.children[1].rotation.y...