door animate
by rayon256
HTML
<script src="//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>
JavaScript
init();
animate();
var scene, renderer, camera, frame, door;
var controls;
function init(){
var width = window.innerWidth;
var height = window.innerHeight;
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize (width, height);
renderer.setClearColor (0x222222);
document.body.appendChild (renderer.domElement);
scene = new THREE.Scene();
DoorSet();
camera = new THREE.PerspectiveCamera (45, width/height, 1, 10000);
camera.position.y = 160;
camera.position.z = 400;
camera.lookAt (new THREE.Vector3(0,0,0));
// add control here (after the camera is defined)
controls = new THREE.OrbitControls (camera, renderer.domElement);
var gridXZ = new THREE.GridHelper(100, 10);
gridXZ.setColors( new THREE.Color(0xff0000), new THREE.Color(0xffffff) );
scene.add(gridXZ);
var pointLight = new THREE.PointLight (0xffffff);
pointLight.position.set (0,300,200);
scene.add (pointLight);
var ambientLight = new THREE.AmbientLight (0x111111);
scene.add(ambientLight);
window.addEventListener ('resize', onWindowResize, false);
}
function DoorSet(){
frame = new THREE.Object3D(); // an empty "frame" for group the meshes, centered at origin
scene.add(frame);
columnGeom = new THREE.BoxGeometry(1, 60, 1.5);// frame material
platformGeom = new THREE.BoxGeometry(31, 0.5, 1.5);
material = new THREE.MeshLambertMaterial();
var mesh = new THREE.Mesh(columnGeom, material);
var mesh2 = mesh.clone();
mesh.position.set(0.5, 30, -1);
mesh2.position.set(0.5 + 30, 30, -1);
var mesh1 = new THREE.Mesh(platformGeom, material);
var mesh3 = mesh1.clone();
mesh1.position.set(15.5, 0.25, -1);
mesh3.position.set(15.5, 60, -1);
frame.add(mesh);
frame.add(mesh1);
frame.add(mesh2);
frame.add(mesh3);
door = new THREE.Object3D();//door
var doormesh = new THREE.Mesh(new THREE.BoxGeometry(29.5,60,1), new THREE.MeshLambertMaterial());
...