NA_HW5

by ikatyang

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/2.5.0/math.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/numeric/1.2.6/numeric.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/OrbitControls.js"></script>
<script src="https://jyunming-chen.github.io/tutsplus/js/KeyboardState.js"></script>
<h1>HW5<br/>Press A/S/D</h1>

CSS

h1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  color: yellow;
  text-align: center;
}

body {
  overflow: hidden;
}

JavaScript

var camera, scene, renderer, light, controls, keyboard;
var arm1, arm2, arm3, bound;
var angle = 0, isAnimate = false, delta = 0.05;
var obstacle, obsBound;

init();
animate();

function init() {

	initScene();
  
  arm1 = new THREE.Object3D();
  scene.add(arm1);

  var mesh = new THREE.Mesh(
    new THREE.BoxGeometry(20, 5, 5),
    new THREE.MeshLambertMaterial());
  mesh.position.set(10, 2.5, 0);
  arm1.add(mesh);

  arm2 = arm1.clone();
  arm2.position.set(20, 0, 0);
  arm1.add(arm2);

  arm3 = arm2.clone();
  arm2.add(arm3);

  obstacle = new THREE.Object3D();
  scene.add(obstacle);

  var obsMesh = new THREE.Mesh(
    new THREE.BoxGeometry(20, 20, 20),
    new THREE.MeshLambertMaterial({
      'color': 'red'
    }));
  obsMesh.position.set(-20, 10, -20);
  obsMesh.material.transparent = true;
  obstacle.add(obsMesh);
}

function initScene() {

  keyboard = new KeyboardState();
  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.y = 100;
  scene.add(camera);

  light = new THREE.PointLight(0xffffff);
  light.position.set(100, 300, 200);
  scene.add(light);

  var gridXZ = new THREE.GridHelper(100, 10);
  gridXZ.setColors(new THREE.Color(0xff0000), new THREE.Color(0xffffff));
  scene.add(gridXZ);

  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0x888888);

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

  document.body.appendChild(renderer.domElement);
  window.addEventListener('resize', onWindowResize, false);
}

function animate() {

  if (isAnimate) angle += delta;
  arm1.rotation.y = angle;
  arm2.rotation.y = angle;
  arm3.rotation.y = angle;

  if (bound) scene.remove(bound);
  var vertices = [];
  getVertices(arm1.children[0], vertices)
  getVertices(arm2.children[0], vertices);
  getVertices(arm3.children[0], vertices);
  var OBB = findOBB(vertices);
  bound =...