Gitorious

fe60a46 by Anon Ray at 2013-01-18	1	<!DOCTYPE html>
	2	<html lang="en">
	3	<head>
	4	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	5	<title>FlipBook3D with Three.js MOD3.js and Tween.js</title>
	6	<meta charset="utf-8">
	7	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	8	<style>
	9	/*body {
	10	background-color:#121212;
	11	}*/
	12	</style>
	13	<script type="text/javascript" src="js/lib/three.r46.js"></script>
adebc60 by Anon Ray at 2013-01-18	14	<script src="js/lib/Three.FirstPersonControls.js"></script>
fe60a46 by Anon Ray at 2013-01-18	15	<script type="text/javascript" src="js/lib/MOD3.js"></script>
	16	<script type="text/javascript" src="js/lib/Tween.js"></script>
	17	<script type="text/javascript" src="js/FlipBook3D.js"></script>
	18	</head>
	19	<body>
	20
	21	<div id="controls" style="position:absolute;z-index:1000">
	22	<input type="button" id="flipleft" value="flipLeft" />
	23	<br />
	24	<input type="button" id="flipright" value="flipRight" />
	25	</div>
adebc60 by Anon Ray at 2013-01-18	26	<!--div id="container" style="position:relative;margin:0 auto;padding:0;z-index:0;cursor:pointer;"></div-->
fe60a46 by Anon Ray at 2013-01-18	27
	28	<script>
	29	if (!window.requestAnimationFrame) {
	30
	31	window.requestAnimationFrame = (function() {
	32
	33	return window.webkitRequestAnimationFrame \|\|
	34	window.mozRequestAnimationFrame \|\|
	35	window.oRequestAnimationFrame \|\|
	36	window.msRequestAnimationFrame \|\|
	37	function(/* function FrameRequestCallback / callback, / DOMElement Element */ element) {
	38	window.setTimeout(callback, 1000 / 60);
	39	};
	40	})();
	41	}
	42
	43
	44	var container;
adebc60 by Anon Ray at 2013-01-18	45	var camera, scene, renderer, projector, light;
	46	var clock, thetaD, deltaX, old_mouseX;
	47	var controls;
	48	var MOVESPEED = 200, ACTUAL_LOOK_SPEED = 0.1;
fe60a46 by Anon Ray at 2013-01-18	49
	50	var targetRotationY = 0;
	51	var targetRotationOnMouseDownY = 0;
	52	var targetRotationX = 0;
	53	var targetRotationOnMouseDownX = 0;
	54	var rad = 700;
	55	var mouse = {x:0,y:0};
	56	var mouseX = 0;
	57	var mouseXOnMouseDown = 0;
	58	var mouseY = 0;
	59	var mouseYOnMouseDown = 0;
	60	var mstack,bend;
	61	var windowHalfX = window.innerWidth / 2;
	62	var windowHalfY = window.innerHeight / 2;
	63	var w,h,w2,h2;
	64	var images = [
	65	{f:"images/fcover.png",b:"images/pg0.jpg", hard:1},
	66	{f:"images/pg1.jpg",b:"images/pg2.jpg",hard:0},
	67	{f:"images/pg3.jpg", b:"images/pg4.jpg" ,hard:0},
	68	//{f:"img/catalog_11.jpg" ,b:"img/catalog_12.jpg", hard:0},
	69	//{f:"img/catalog_09.jpg", b:"img/catalog_07.jpg", hard:0},
	70	//{f:"img/catalog_06.jpg", b:"img/catalog_01.jpg", hard:0},
	71	{f:"images/pg5.jpg", b:"images/bcover.png",hard:1}
	72	];
	73	var book;
adebc60 by Anon Ray at 2013-01-18	74	var pagew = 200, pageh = pagew * 10 / 7;
fe60a46 by Anon Ray at 2013-01-18	75	var fl, fr;
	76	var loaded_models = [];
	77
adebc60 by Anon Ray at 2013-01-18	78	new THREE.JSONLoader().load('models/table.js', function(geometry) {
fe60a46 by Anon Ray at 2013-01-18	79	var mesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial());
adebc60 by Anon Ray at 2013-01-18	80	mesh.scale.set(100, 100, 100);
fe60a46 by Anon Ray at 2013-01-18	81	loaded_models.push(mesh);
	82	init();
	83	animate();
adebc60 by Anon Ray at 2013-01-18	84	});
	85
	86	//init();
	87	//animate();
	88
	89	function makeGrid() {
	90	var size = 500, step = 25;
	91	var geometry = new THREE.Geometry();
	92	var material = new THREE.LineBasicMaterial( { vertexColors: THREE.VertexColors } );
	93	var color1 = new THREE.Color( 0x444444 ), color2 = new THREE.Color( 0x888888 );
	94
	95	for ( var i = - size; i <= size; i += step ) {
	96	geometry.vertices.push( new THREE.Vector3( -size, 0, i ) );
	97	geometry.vertices.push( new THREE.Vector3( size, 0, i ) );
	98
	99	geometry.vertices.push( new THREE.Vector3( i, 0, -size ) );
	100	geometry.vertices.push( new THREE.Vector3( i, 0, size ) );
	101
	102	var color = i === 0 ? color1 : color2;
	103
	104	geometry.colors.push( color, color, color, color );
	105
	106	}
	107	var grid = new THREE.Line( geometry, material, THREE.LinePieces );
	108	scene.add( grid );
	109	}
	110
	111	function makeWalls() {
	112	//for(var i = 0; i < 4; i++) { //four walls
	113	var wall = new THREE.Mesh(
	114	new THREE.CubeGeometry(2000, 600, 10),
	115	new THREE.MeshBasicMaterial({color: '0x00ff00'})
	116	);
	117	scene.add(wall);
	118	wall.position.set(0, 345, -500);
	119	//}
	120	}
fe60a46 by Anon Ray at 2013-01-18	121
	122	function init() {
	123
adebc60 by Anon Ray at 2013-01-18	124	//container = document.getElementById('container');
fe60a46 by Anon Ray at 2013-01-18	125	w = window.innerWidth;
	126	h = window.innerHeight;
	127	w2 = w / 2;
	128	h2 = h / 2;
adebc60 by Anon Ray at 2013-01-18	129	/*container.style.width = w + "px";
fe60a46 by Anon Ray at 2013-01-18	130	container.style.height = h + "px";
adebc60 by Anon Ray at 2013-01-18	131	container.style.marginTop = 0.5 * (window.innerHeight-h) + 'px';*/
	132
	133	clock = new THREE.Clock();
	134	deltaX = 0;
	135	thetaD = 0;
	136	old_mouseX = 0;
fe60a46 by Anon Ray at 2013-01-18	137
	138	scene = new THREE.Scene();
	139
adebc60 by Anon Ray at 2013-01-18	140	camera = new THREE.PerspectiveCamera(50, w/h, 0.1, 1500);
	141	camera.position.set(30, 365, 1000);
	142	//camera.position.z = 100;
fe60a46 by Anon Ray at 2013-01-18	143	scene.add(camera);
	144	projector = new THREE.Projector();
	145
adebc60 by Anon Ray at 2013-01-18	146	controls = new THREE.FirstPersonControls(camera);
	147	controls.movementSpeed = MOVESPEED;
	148
	149	light = new THREE.AmbientLight(0x404040);
	150	scene.add(light);
	151
fe60a46 by Anon Ray at 2013-01-18	152	renderer = new THREE.WebGLRenderer({antialias: true});
	153	renderer.setSize(w, h);
	154
adebc60 by Anon Ray at 2013-01-18	155	//container.appendChild(renderer.domElement);
	156	document.body.appendChild(renderer.domElement);
	157
	158	//container.addEventListener('mousedown', onDocumentMouseDown, false);
fe60a46 by Anon Ray at 2013-01-18	159
adebc60 by Anon Ray at 2013-01-18	160	renderer.domElement.addEventListener('mousemove', onMouseMove, false);
fe60a46 by Anon Ray at 2013-01-18	161
adebc60 by Anon Ray at 2013-01-18	162	book = new FlipBook3D.Book();
	163	book.pageWidth = pagew;
	164	book.pageHeight = pageh;
	165	book.position.y = 250;
	166	book.rotation.set(-1.57, 0, 0);
fe60a46 by Anon Ray at 2013-01-18	167	scene.add(book);
	168	for(var i=0; i<images.length; i++) {
adebc60 by Anon Ray at 2013-01-18	169	var texturefront = THREE.ImageUtils.loadTexture(images[i].f);
	170	var textureback = THREE.ImageUtils.loadTexture(images[i].b);
	171	book.addPage(texturefront, textureback, images[i].hard);
fe60a46 by Anon Ray at 2013-01-18	172	}
	173
	174	// add the loaded models to scene
	175	for(var i in loaded_models) {
	176	scene.add(loaded_models[i]);
	177	}
	178
	179	// event listeners for flipping page
	180	fl = document.getElementById('flipleft');
	181	fr = document.getElementById('flipright');
	182	fl.addEventListener('click', function() {
	183	book.pages[book.pages.length-book.flippedright].flipLeft();
	184	});
	185	fr.addEventListener('click', function() {
	186	book.pages[book.flippedleft-1].flipRight();
	187	});
	188	}
	189
	190	function onDocumentMouseDown(event) {
	191	event.preventDefault();
	192	mouseX = ((event.clientX / w) * 2 - 1);
	193	targetRotationY = mouseX;
	194	mouseY = ((event.clientY / h) * 2 - 1);
	195	targetRotationX = mouseY;
	196	container.addEventListener('mousemove', onDocumentMouseMove, false);
	197	container.addEventListener('mouseup', onDocumentMouseUp, false);
	198	container.addEventListener('mouseout', onDocumentMouseOut, false);
	199	}
	200
	201	function onDocumentMouseMove(event) {
	202	/*mouseX = event.clientX - w2;
	203	mouseY = event.clientY - h2;
	204
	205	targetRotationY = targetRotationOnMouseDownY + (mouseX - mouseXOnMouseDown) * 0.02;
	206	targetRotationX = targetRotationOnMouseDownX + (mouseY - mouseYOnMouseDown) * 0.02;*/
	207	//var target=
	208	//mouse_path.push(e.seenas.ray);
	209	mouseX = ((event.clientX / w) * 2 - 1);
	210	targetRotationY = mouseX;
	211	mouseY = ((event.clientY / h) * 2 - 1);
	212	targetRotationX = mouseY;
	213	}
	214
	215	function onDocumentMouseUp(event) {
	216	container.removeEventListener('mousemove', onDocumentMouseMove, false);
	217	container.removeEventListener('mouseup', onDocumentMouseUp, false);
	218	container.removeEventListener('mouseout', onDocumentMouseOut, false);
	219	}
	220
	221	function onDocumentMouseOut(event) {
	222	container.removeEventListener('mousemove', onDocumentMouseMove, false);
	223	container.removeEventListener('mouseup', onDocumentMouseUp, false);
	224	container.removeEventListener('mouseout', onDocumentMouseOut, false);
	225	}
	226
adebc60 by Anon Ray at 2013-01-18	227	function onMouseMove(event) {
	228	deltaX = event.clientX - old_mouseX;
	229	old_mouseX = event.clientX;
	230	}
	231
	232	function fixMouseMove() {
	233	thetaD -= deltaX * ACTUAL_LOOK_SPEED;
	234	var theta = thetaD * Math.PI / 180;
	235	var lookpoint = new THREE.Vector3(0, 0, 0);
	236	lookpoint.set(Math.sin(theta), 0, Math.cos(theta));
	237	lookpoint.addSelf(camera.position);
	238	//lookpoint.add(_this.cam.position); //https://github.com/mrdoob/three.js/wiki/Migration :r54->r55
	239	camera.lookAt(lookpoint);
	240	deltaX = 0;
	241	}
	242
fe60a46 by Anon Ray at 2013-01-18	243	function animate() {
	244	requestAnimationFrame(animate);
	245	render();
	246	}
	247
	248	function render() {
	249	var multx = 0.5 * Math.PI;
	250	var multy = -Math.PI;
adebc60 by Anon Ray at 2013-01-18	251	/camera.position.x = rad Math.sin(targetRotationY * multy) * Math.cos(targetRotationX * multx);
fe60a46 by Anon Ray at 2013-01-18	252	camera.position.y = rad * Math.sin(targetRotationX * multx);
	253	camera.position.z = rad * Math.cos(targetRotationY * multy) * Math.cos(targetRotationX * multx);
adebc60 by Anon Ray at 2013-01-18	254	camera.lookAt(scene.position);*/
	255	fixMouseMove();
fe60a46 by Anon Ray at 2013-01-18	256	TWEEN.update();
	257	renderer.render(scene, camera);
adebc60 by Anon Ray at 2013-01-18	258	controls.update(clock.getDelta());
fe60a46 by Anon Ray at 2013-01-18	259	}
	260	</script>
	261	</body>
	262	</html>