3JS_Door

by ikatyang

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.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>
<div id="info">demo page (Press: B)</div>

CSS

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

body {
  overflow: hidden;
}

JavaScript

var camera, scene, renderer, parentBox, light, controls;
var isOpen    = true;
var isAnimate = false;
var angle     = 0;

var door;
var raycaster;
var mouse = new THREE.Vector2();

var clock;
var quats, keys;
var actionStart = 0;
var period = .7; // 1 beat = 0.7 seconds

var keyboard = new KeyboardState();

init();
animate();

function trigger() {
	clock = new THREE.Clock();
	isAnimate = true;
}

function init() {
  raycaster = new THREE.Raycaster();
  scene = new THREE.Scene();

	setKeyOpen();
	
  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.z = 500;
  scene.add(camera);

  parentBox = new THREE.Object3D();

  var material = new THREE.MeshLambertMaterial();

  var doorWidth  = 50;
  var doorHeight = 100;
  var width      = 10;

  var box1 = new THREE.Mesh(new THREE.BoxGeometry(width, (doorHeight + width), width), material);
  var box2 = new THREE.Mesh(new THREE.BoxGeometry((doorWidth + width * 2), width, width), material);
  var box3 = new THREE.Mesh(new THREE.BoxGeometry(width, (doorHeight + width), width), material);

  box1.name = 'box';
  box2.name = 'box';
  box3.name = 'box';

  box1.position.set(-width / 2, (doorHeight + width) / 2, width / 2);
  box2.position.set((doorWidth + width * 2) / 2 - width, doorHeight + width / 2, width / 2);
  box3.position.set((doorWidth + width) - width / 2, (doorHeight + width) / 2, width / 2);

  THREE.ImageUtils.crossOrigin = '';
  var doorMap = THREE.ImageUtils.loadTexture('http://i.imgur.com/NMvoWUC.png');
  var doorTextures = [];
  doorTextures.push(new THREE.MeshBasicMaterial({ 'color': 'red' }));
  doorTextures.push(new THREE.MeshBasicMaterial({ 'color': 'red' }));
  doorTextures.push(new THREE.MeshBasicMaterial({ 'color': 'red' }));
  doorTextures.push(new THREE.MeshBasicMaterial({ 'color': 'red' }));
  doorTextures.push(new THREE.MeshBasicMaterial({ 'map': doorMap }));
  doorTextures.push(new THREE.MeshBasicMaterial({ 'map': doorMap }));
  var...