JSFiddle - React, Tailwind, and code Playground

by Alvin Chen

HTML

<div id="info">開關的門
    <br/>
    <a href="javascript: press();">open/close or press "A" to open</a>.
</div>
<script src="http://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="http://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, light, controls;
var frame ,openframe;
var angle = 0;
var bottom = false;
var open = true;
var raycaster;
var mouse = new THREE.Vector2();
var pickables = [];
var keyboard = new KeyboardState();

init();
animate();
function press(){
	 clock = new THREE.Clock();
   bottom = true;
}

function init() {

    scene = new THREE.Scene();

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

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

    columnGeom = new THREE.BoxGeometry(5, 50, 5);
    platformGeom = new THREE.BoxGeometry(30, 5, 5);
    material = new THREE.MeshLambertMaterial();
//門框
    var mesh = new THREE.Mesh(columnGeom, material);
    var mesh2 = mesh.clone();
    mesh.position.set(-5, 25 , 0);
    mesh2.position.set(25, 25, 0);
    var mesh1 = new THREE.Mesh(platformGeom, material);
    mesh1.position.set(10, 47.5, 0);
    frame.add(mesh);
    frame.add(mesh1);
    frame.add(mesh2);
//門
  	 var door = new THREE.Mesh(new THREE.BoxGeometry(24.5, 45, 3),new THREE.MeshLambertMaterial({color:0xff0000}));
   	 door.position.set(10, 22.5, 0);
   	 scene.add(door);
//門邊轉動
     var doorline = new THREE.Mesh(new THREE.BoxGeometry( 2, 45, 2),new THREE.MeshLambertMaterial({color:0x00ff00}));
		 doorline.position.set(-2, 22.5, 0);
     scene.add(doorline);
//門握把
  	var handle =  new THREE.Mesh(new THREE.SphereGeometry( 1.5, 30, 30), new THREE.MeshLambertMaterial({color:0x66CC99}));
    handle.position.set(18, 22 , 3);
    
    var handle2 =  new THREE.Mesh(new THREE.SphereGeometry( 1.5, 30, 30), new THREE.MeshLambertMaterial({color:0x66CC99}));
    handle2.position.set(18, 22 , -3);
    

//使用門邊
  	openframe = new THREE.Object3D();
    openframe.add(doorline);
    openframe.add(door);
		openframe.add(handle);
    openframe.add(handle2);
    scene.add(openframe);
    
    pickables = [frame,door, doorline,openframe];
    // note that frame...