FlipBook3D.html - rangas-book-engine in Book Engine

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>FlipBook3D with Three.js MOD3.js and Tween.js</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	  <style>
	    /*body {
	      background-color:#121212;
	    }*/
	  </style>
    <script type="text/javascript" src="js/lib/three.r46.js"></script>
    <script src="js/lib/Three.FirstPersonControls.js"></script>
    <script type="text/javascript" src="js/lib/MOD3.js"></script>
    <script type="text/javascript" src="js/lib/Tween.js"></script>
    <script type="text/javascript" src="js/FlipBook3D.js"></script>
	</head>
	<body>

		<div id="controls" style="position:absolute;z-index:1000">
		  <input type="button" id="flipleft" value="flipLeft" />
		  <br />
		  <input type="button" id="flipright" value="flipRight" />
		</div>
		<!--div id="container" style="position:relative;margin:0 auto;padding:0;z-index:0;cursor:pointer;"></div-->

		<script>
      if (!window.requestAnimationFrame) {

        window.requestAnimationFrame = (function() {

          return window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame ||
          window.oRequestAnimationFrame ||
          window.msRequestAnimationFrame ||
          function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {
            window.setTimeout(callback, 1000 / 60);
          };
        })();
      }


			var container;
			var camera, scene, renderer, projector, light;
      var clock, thetaD, deltaX, old_mouseX;
      var controls;
      var MOVESPEED = 200, ACTUAL_LOOK_SPEED = 0.1;

			var targetRotationY = 0;
			var targetRotationOnMouseDownY = 0;
			var targetRotationX = 0;
			var targetRotationOnMouseDownX = 0;
			var rad = 700;
			var mouse = {x:0,y:0};
			var mouseX = 0;
			var mouseXOnMouseDown = 0;
			var mouseY = 0;
			var mouseYOnMouseDown = 0;
			var mstack,bend;
			var windowHalfX = window.innerWidth / 2;
			var windowHalfY = window.innerHeight / 2;
			var w,h,w2,h2;
      var images = [
        {f:"images/fcover.png",b:"images/pg0.jpg", hard:1},
			  {f:"images/pg1.jpg",b:"images/pg2.jpg",hard:0},
			  {f:"images/pg3.jpg", b:"images/pg4.jpg" ,hard:0},
			  //{f:"img/catalog_11.jpg" ,b:"img/catalog_12.jpg", hard:0},
			  //{f:"img/catalog_09.jpg", b:"img/catalog_07.jpg", hard:0},
			  //{f:"img/catalog_06.jpg", b:"img/catalog_01.jpg", hard:0},
			  {f:"images/pg5.jpg", b:"images/bcover.png",hard:1}
      ];
			var book;
			var pagew = 200, pageh = pagew * 10 / 7;
			var fl, fr;
      var loaded_models = [];

      new THREE.JSONLoader().load('models/table.js', function(geometry) {
        var mesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial());
        mesh.scale.set(100, 100, 100);
        loaded_models.push(mesh);
			  init();
			  animate();
      });

      //init();
      //animate();

      function makeGrid() {
        var size = 500, step = 25;
        var geometry = new THREE.Geometry();
        var  material = new THREE.LineBasicMaterial( { vertexColors: THREE.VertexColors } );
        var color1 = new THREE.Color( 0x444444 ), color2 = new THREE.Color( 0x888888 );

        for ( var i = - size; i <= size; i += step ) {
          geometry.vertices.push( new THREE.Vector3( -size, 0, i ) );
          geometry.vertices.push( new THREE.Vector3( size, 0, i ) );

          geometry.vertices.push( new THREE.Vector3( i, 0, -size ) );
          geometry.vertices.push( new THREE.Vector3( i, 0, size ) );

          var color = i === 0 ? color1 : color2;

          geometry.colors.push( color, color, color, color );

        }
        var grid = new THREE.Line( geometry, material, THREE.LinePieces );
        scene.add( grid );
      }

      function makeWalls() {
        //for(var i = 0; i < 4; i++) { //four walls
          var wall = new THREE.Mesh(
            new THREE.CubeGeometry(2000, 600, 10),
            new THREE.MeshBasicMaterial({color: '0x00ff00'})
          );
          scene.add(wall);
          wall.position.set(0, 345, -500);
        //}
      }

			function init() {

				//container = document.getElementById('container');
				w = window.innerWidth;
				h = window.innerHeight;
				w2 = w / 2;
				h2 = h / 2;
				/*container.style.width = w + "px";
				container.style.height = h + "px";
				container.style.marginTop = 0.5 * (window.innerHeight-h) + 'px';*/

        clock = new THREE.Clock();
        deltaX = 0;
        thetaD = 0;
        old_mouseX = 0;

				scene = new THREE.Scene();

				camera = new THREE.PerspectiveCamera(50, w/h, 0.1, 1500);
        camera.position.set(30, 365, 1000);
				//camera.position.z = 100;
				scene.add(camera);
				projector = new THREE.Projector();

        controls = new THREE.FirstPersonControls(camera);
        controls.movementSpeed = MOVESPEED;

        light = new THREE.AmbientLight(0x404040);
        scene.add(light);

        renderer = new THREE.WebGLRenderer({antialias: true});
				renderer.setSize(w, h);

				//container.appendChild(renderer.domElement);
        document.body.appendChild(renderer.domElement);

				//container.addEventListener('mousedown', onDocumentMouseDown, false);

        renderer.domElement.addEventListener('mousemove', onMouseMove, false);

				book = new FlipBook3D.Book();
				book.pageWidth = pagew;
				book.pageHeight = pageh;
        book.position.y = 250;
        book.rotation.set(-1.57, 0, 0);
				scene.add(book);
				for(var i=0; i<images.length; i++) {
          var texturefront = THREE.ImageUtils.loadTexture(images[i].f);
          var textureback = THREE.ImageUtils.loadTexture(images[i].b);
          book.addPage(texturefront, textureback, images[i].hard);
				}

        // add the loaded models to scene
        for(var i in loaded_models) {
          scene.add(loaded_models[i]);
        }

        // event listeners for flipping page
				fl = document.getElementById('flipleft');
				fr = document.getElementById('flipright');
        fl.addEventListener('click', function() {
          book.pages[book.pages.length-book.flippedright].flipLeft();
        });
        fr.addEventListener('click', function() {
          book.pages[book.flippedleft-1].flipRight();
        });
			}

			function onDocumentMouseDown(event) {
				event.preventDefault();
				mouseX = ((event.clientX / w) * 2 - 1);
				targetRotationY = mouseX;
				mouseY = ((event.clientY / h) * 2 - 1);
				targetRotationX = mouseY;
				container.addEventListener('mousemove', onDocumentMouseMove, false);
				container.addEventListener('mouseup', onDocumentMouseUp, false);
				container.addEventListener('mouseout', onDocumentMouseOut, false);
			}

			function onDocumentMouseMove(event) {
				/*mouseX = event.clientX - w2;
				mouseY = event.clientY - h2;

				targetRotationY = targetRotationOnMouseDownY + (mouseX - mouseXOnMouseDown) * 0.02;
				targetRotationX = targetRotationOnMouseDownX + (mouseY - mouseYOnMouseDown) * 0.02;*/
				//var target=
				//mouse_path.push(e.seenas.ray);
				mouseX = ((event.clientX / w) * 2 - 1);
				targetRotationY = mouseX;
				mouseY = ((event.clientY / h) * 2 - 1);
				targetRotationX = mouseY;
			}

			function onDocumentMouseUp(event) {
				container.removeEventListener('mousemove', onDocumentMouseMove, false);
				container.removeEventListener('mouseup', onDocumentMouseUp, false);
				container.removeEventListener('mouseout', onDocumentMouseOut, false);
			}

			function onDocumentMouseOut(event) {
				container.removeEventListener('mousemove', onDocumentMouseMove, false);
				container.removeEventListener('mouseup', onDocumentMouseUp, false);
				container.removeEventListener('mouseout', onDocumentMouseOut, false);
			}

      function onMouseMove(event) {
        deltaX = event.clientX - old_mouseX;
        old_mouseX = event.clientX;
      }

      function fixMouseMove() {
        thetaD -= deltaX * ACTUAL_LOOK_SPEED;
        var theta = thetaD * Math.PI / 180;
        var lookpoint = new THREE.Vector3(0, 0, 0);
        lookpoint.set(Math.sin(theta), 0, Math.cos(theta));
        lookpoint.addSelf(camera.position);
        //lookpoint.add(_this.cam.position); //https://github.com/mrdoob/three.js/wiki/Migration :r54->r55
        camera.lookAt(lookpoint);
        deltaX = 0;
      }

			function animate() {
				requestAnimationFrame(animate);
				render();
			}

			function render() {
				var multx = 0.5 * Math.PI;
				var multy = -Math.PI;
				/*camera.position.x = rad * Math.sin(targetRotationY * multy) * Math.cos(targetRotationX * multx);
				camera.position.y = rad * Math.sin(targetRotationX * multx);
				camera.position.z = rad * Math.cos(targetRotationY * multy) * Math.cos(targetRotationX * multx);
				camera.lookAt(scene.position);*/
        fixMouseMove();
        TWEEN.update();
				renderer.render(scene, camera);
        controls.update(clock.getDelta());
			}
		</script>
  </body>
</html>

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>
14	<script src="js/lib/Three.FirstPersonControls.js"></script>
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>
26	<!--div id="container" style="position:relative;margin:0 auto;padding:0;z-index:0;cursor:pointer;"></div-->
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;
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;
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;
74	var pagew = 200, pageh = pagew * 10 / 7;
75	var fl, fr;
76	var loaded_models = [];
77
78	new THREE.JSONLoader().load('models/table.js', function(geometry) {
79	var mesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial());
80	mesh.scale.set(100, 100, 100);
81	loaded_models.push(mesh);
82	init();
83	animate();
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	}
121
122	function init() {
123
124	//container = document.getElementById('container');
125	w = window.innerWidth;
126	h = window.innerHeight;
127	w2 = w / 2;
128	h2 = h / 2;
129	/*container.style.width = w + "px";
130	container.style.height = h + "px";
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;
137
138	scene = new THREE.Scene();
139
140	camera = new THREE.PerspectiveCamera(50, w/h, 0.1, 1500);
141	camera.position.set(30, 365, 1000);
142	//camera.position.z = 100;
143	scene.add(camera);
144	projector = new THREE.Projector();
145
146	controls = new THREE.FirstPersonControls(camera);
147	controls.movementSpeed = MOVESPEED;
148
149	light = new THREE.AmbientLight(0x404040);
150	scene.add(light);
151
152	renderer = new THREE.WebGLRenderer({antialias: true});
153	renderer.setSize(w, h);
154
155	//container.appendChild(renderer.domElement);
156	document.body.appendChild(renderer.domElement);
157
158	//container.addEventListener('mousedown', onDocumentMouseDown, false);
159
160	renderer.domElement.addEventListener('mousemove', onMouseMove, false);
161
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);
167	scene.add(book);
168	for(var i=0; i<images.length; i++) {
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);
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
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
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;
251	/camera.position.x = rad Math.sin(targetRotationY * multy) * Math.cos(targetRotationX * multx);
252	camera.position.y = rad * Math.sin(targetRotationX * multx);
253	camera.position.z = rad * Math.cos(targetRotationY * multy) * Math.cos(targetRotationX * multx);
254	camera.lookAt(scene.position);*/
255	fixMouseMove();
256	TWEEN.update();
257	renderer.render(scene, camera);
258	controls.update(clock.getDelta());
259	}
260	</script>
261	</body>
262	</html>

Gitorious