带旋转的百叶窗（Shutter）

示例

HTML

<div></div>

CSS

body { margin: 0; padding: 0; background-color: #000000; }

JS

/*global TweenLite,TweenMax,TimelineMax,Power0,Power2,Power4,Back,Bounce,Elastic*/
var windowWidth=window.innerWidth,windowHeight=window.innerHeight,margin=10,sceneWidth=windowWidth-margin*2,sceneHeight=windowHeight-margin*2;
var viewAngle=45,aspect=sceneWidth/sceneHeight,near=.1,far=10000;
var scene,renderer,camera;
function init(){
	initScene();
	initShapes();
	initLight();
}
function initScene(){
	var container=document.querySelector('div');
	renderer=new THREE.WebGLRenderer();
	camera=new THREE.PerspectiveCamera(viewAngle,aspect,near,far);
	scene=new THREE.Scene();
	scene.add(camera);
  camera.position.set(0,0,300);
	//camera.position.set(200,0,400);
	//camera.rotateOnAxis(new THREE.Vector3(0,1,0),20*Math.PI/180);
	renderer.setSize(sceneWidth,sceneHeight);
	container.appendChild(renderer.domElement);
	TweenMax.set(container,{position:'absolute',top:margin,left:margin});
	TweenLite.ticker.addEventListener('tick',updateCanvas);
}
function initShapes(){
	var width=10,height=20,depth=2;
	var geometry=new THREE.BoxGeometry(width,height,depth),material;
	var meshes=[],mesh;
	var length=20,i,j=0,posX=0,posY=0,duration=4,factor=.04;
	var group=new THREE.Group();
	var colors=[0xcc0000,0xcc2200,0xcc4400,0xcc6600,0xcc4400,0xcc2200,0xcc0000],iterator=0;
	for(i=0; i<length; i++){
		posX=0;
		posY+=height;
		material=new THREE.MeshPhongMaterial({shininess:30});
		material.color=new THREE.Color(colors[iterator]);
		iterator++;
		if(iterator>colors.length-1) iterator=0;
		for(j=0; j<length; j++){
			posX+=width;
			mesh=new THREE.Mesh(geometry,material);
			TweenMax.set(mesh.position,{x:posX,y:posY});
			group.add(mesh);
			meshes[meshes.length]=mesh;
		}
	}
	scene.add(group);
	group.position.x=-posX*.5;
	group.position.y=-posY*.5;
	i=0;
	length=meshes.length;
	for(i; i<length; i++){
		TweenMax.to(meshes[i].rotation,duration,{delay:i*factor,x:Math.PI,ease:Power2.easeInOut,repeat:-1});
	}
}
function initLight(){
	var pointLight=new THREE.DirectionalLight(0xffffff);
	TweenMax.set(pointLight.position,{x:10,y:50,z:130});
	scene.add(pointLight);
}
function updateCanvas(){renderer.render(scene,camera);}
function round(value,place){ return Math.round(value*Math.pow(10,place))/Math.pow(10,place); }
function rand(min,max){ return min+(Math.random()*(max-min)); }
function randInt(min,max){ return Math.floor(Math.random()*(1+max-min)+min); }
init();