hw4_1

by omgazero

HTML

<div id="info">
  GCHW4_1
  <br>WASD to move, left&right to rotate
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/107/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: #000000;
}

body {
  overflow: hidden;
}

JavaScript

var frame, scene, light, camera, renderer, controls;
var ball, box, width = 50, height = 100, cx = 0, cy = 0, max = [width/2, height/2], min = [-width/2, -height/2], normals = [];
var keyboard = new KeyboardState();
var raycaster;
var mouse = new THREE.Vector2();
var pickables = [];

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

}

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

}


init();
animate();

function init() {
  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;

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

	controls.enableKeys = false;
  
  light = new THREE.DirectionalLight( 0xFFFFFF , 1);
  scene.add(light);
  
  
  /*var gridXZ = new THREE.GridHelper(500, 20, 'red', 'white');
  scene.add(gridXZ);*/
  
  ball = new THREE.Mesh( new THREE.CylinderGeometry(10,10, 2, 20, 20), new THREE.MeshBasicMaterial({color: 0xff0000 }) );
  scene.add(ball);
  
  plane = new THREE.Mesh( new THREE.PlaneGeometry(1000,1000), new THREE.MeshBasicMaterial( ));
  plane.rotation.x = -Math.PI/2;
  plane.position.y -= 3;
  scene.add(plane);
  pickables = [plane];
  
  box = new THREE.Mesh(	new THREE.BoxGeometry(width, height, 3), new THREE.MeshBasicMaterial( {
  color: 0x00ff00,
  transparent: true,
  opacity: 0.3
  })	);
  box.rotation.x = -Math.PI/2;
  scene.add(box);
  createNormalHelper(max, min, box);
  raycaster = new THREE.Raycaster();
  document.addEventListener('mousedown', mouseDown, false);
  window.addEventListener( 'resize', onWindowResize, false );
}

function animate() {
  
  keyboard.update();
  if(keyboard.pressed('left')){
  	box.rotation.z += 0.03;
    normals.forEach(...