index.html - book-engine in Book Engine

<!DOCTYPE html>
<html lang="en">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> Book Engine Demo </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 src="../jquery-1.9.0.js"></script-->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
	<script type="text/javascript" src="js/lib/three.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/lib/reqanim.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" />
		<br />
		<input type="button" id="magnify" value="Magnify is Off"/>
		</div>
		<div id="container" style="position:relative;margin:0 auto;padding:0;z-index:0;cursor:pointer;"></div>
		<script>
			var container;
			var camera, scene, renderer, projector, clock, mag_cam;
      var clientX, clientY, magnify = false;

			var targetRotationY = 0;
			var targetRotationOnMouseDownY = 0;
			var targetRotationX = 0;
			var targetRotationOnMouseDownX = 0;
			var rad = 200;
			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 book, test_book;
			var pagew = 80;
			var pageh = pagew * 10/7;
			var fl,fr;

      var max_allowed_pages = 20;
      var max_pages;
      var fetched = 0;

      var controls;

      $.getJSON('books.json', function(books) {
        test_book = books[0];
        max_pages = (test_book.pages > max_allowed_pages) ? max_allowed_pages : test_book.pages;
			  init();
			  animate();
      });


			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();
				scene = new THREE.Scene();

				camera = new THREE.PerspectiveCamera( 45, w / h, 0.1, 10000 );
        camera.position.z = rad;
				scene.add( camera );

        //book_cam = new THREE.PerspectiveCamera(45, w/h, 0.1, 1000);
        //scene.add(book_cam);

        /*mag_cam = new THREE.OrthographicCamera(
          window.innerWidth / -4,// Left
          window.innerWidth / 4,// Right
          window.innerHeight / 4,// Top
          window.innerHeight / -4,// Bottom
          1,            // Near 
          100);           // Far -- enough to see the skybox
        //topCamera.up = new THREE.Vector3(0,0,-1)  ;*/
        mag_cam  = new THREE.PerspectiveCamera(45, w/h, 0.1, 10000);
        mag_cam.position.set(0, 0, 60);
        mag_cam.lookAt(scene.position);
        scene.add(mag_cam)    
				
				projector = new THREE.Projector();

				// webgl renderer gives better rendering without problems
				renderer = new THREE.WebGLRenderer();
				renderer.setSize( w, h );
        renderer.setClearColorHex( 0x000000, 1 );
        renderer.autoClear = false;

				container.appendChild( renderer.domElement );

				container.addEventListener( 'mousedown', onDocumentMouseDown, false );
        container.addEventListener( 'mousemove', onMousemoveForMag, false );

				book=new FlipBook3D.Book();
				book.pageWidth=pagew;
				book.pageHeight=pageh;
				scene.add(book);


        for(var i=0; i<max_pages; i+=2) {
          //var texturefront = t.ImageUtils.loadTexture(images[i].f);
          var texturefront = THREE.ImageUtils.loadTexture(test_book.url + i + '.jpg');
          var textureback = THREE.ImageUtils.loadTexture(test_book.url + (i+1) + '.jpg');
          book.addPage(texturefront, textureback, 0);
          fetched = i;
        }
        console.log('fetched', fetched);

				fl=document.getElementById('flipleft');
				fr=document.getElementById('flipright');
        fl.addEventListener('click',function(){
          book.pages[book.pages.length-book.flippedright].flipLeft()
          prefetch();
        });
        fr.addEventListener('click',function(){
          book.pages[book.flippedleft-1].flipRight()
          prefetch();
        });
        var mag = document.getElementById('magnify');
        mag.addEventListener('click', function(event) {
          if(magnify == true) {
            mag.value = "Magnify is Off";
            magnify = false;
          }
          else {
            mag.value = "Magnify is On";
            magnify = true;
          }
        });
			}

      function prefetch() {
        var pageno = book.flippedleft * 2;
        if(test_book.pages < max_allowed_pages) {
          return;
        }
        if(pageno <= fetched - 5) {
          return;
        }
        console.log('fetching books..');
        var load_pages = fetched + 20;
        if(load_pages > test_book.pages) {
          return;
        }
        for(var i = fetched + 1; i < load_pages; i += 2) {
          var texturefront = THREE.ImageUtils.loadTexture(test_book.url + i + '.jpg');
          var textureback = THREE.ImageUtils.loadTexture(test_book.url + (i+1) + '.jpg');
          book.addPage(texturefront, textureback, 0);
          fetched = i;
        }
      }

			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 );
				//window.addEventListener( 'keydown', onKeyDown, false );
				//window.addEventListener( 'keyup', onKeyUp, false );
			}

			function onKeyDown(event) {
        var key = event.keyCode;
        var scale = book.centerContainer.scale;
        if(key == 87 || key == 38) {
          book.centerContainer.scale.set(scale.x+=0.1, scale.y +=0.1, scale.z += 0.1);
          //book.centerContainer.translateZ(10);
        }
        else if(key == 83 || key == 40) {
          book.centerContainer.scale.set(scale.x-=0.1, scale.y -=0.1, scale.z -= 0.1);
          //book.centerContainer.translateZ(-10);
        }
        /*else if(key == 65) {
          //book.centerContainer.position.x += 1;
          book.centerContainer.translateX(-10);
        }
        else if(key == 68) {
          book.centerContainer.translateX(10);
        }*/
        //book.centerContainer.position.z += 1;
      }

      function onKeyUp(event) {
      }

      function onMousemoveForMag(event) {
        clientX = event.clientX;
        clientY = event.clientY;
        var mousex = ((event.clientX / w) * 2 - 1);
				var mousey = - ((event.clientY / h) * 2 - 1);
        var vec = new THREE.Vector3(mousex, mousey, 0);
        projector.unprojectVector(vec, camera);
        var raycaster = new THREE.Raycaster(camera.position, vec.sub(camera.position).normalize());
        //var intersects = raycaster.intersectObjects(book.pages, true);
        var intersects = raycaster.intersectObject(book, true);
        if(intersects.length) {
          var pos = intersects[0].point;
          //console.log(camera.position);
          //var dir_vec = vec.sub(camera.position).normalize();
          //console.log(dir_vec);
          //var ray = new THREE.Raycaster(camera.position, dir_vec);
          //var distance = -camera.position.z / dir_vec.z;
          //var pos = camera.position.clone().add(dir_vec.multiplyScalar(distance));
          //console.log(pos);
          mag_cam.position.set(pos.x+25, pos.y, 10);
        }
      }

			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 animate() {

				requestAnimationFrame( animate );

				render();
			}
			
			function render2()
			{
        var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
				TWEEN.update();
        // setViewport parameters:
        //  lower_left_x, lower_left_y, viewport_width, viewport_height
        renderer.setViewport(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
        renderer.clear(); 

        // left side
        renderer.setViewport( 1, 1, SCREEN_WIDTH - 200, SCREEN_HEIGHT);
        renderer.render( scene, camera);

        // right side
        if(magnify) {
          renderer.setViewport(SCREEN_WIDTH - 450, 50, 400, 400);
          renderer.render( scene, mag_cam);
        }

			}
			
			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);
				render2();
			}
		</script>
</body></html>

1	<!DOCTYPE html>
2	<html lang="en">
3	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
4	<title> Book Engine Demo </title>
5	<meta charset="utf-8">
6	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
7	<style>
8	body
9	{
10	/background-color:#121212;/
11	}
12	</style>
13	<!--script src="../jquery-1.9.0.js"></script-->
14	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
15	<script type="text/javascript" src="js/lib/three.js"></script>
16	<script type="text/javascript" src="js/lib/MOD3.js"></script>
17	<script type="text/javascript" src="js/lib/Tween.js"></script>
18	<script type="text/javascript" src="js/lib/reqanim.js"></script>
19	<script type="text/javascript" src="js/FlipBook3D.js"></script>
20	</head>
21	<body>
22	<div id="controls" style="position:absolute;z-index:1000">
23	<input type="button" id="flipleft" value="flipLeft" />
24	<br />
25	<input type="button" id="flipright" value="flipRight" />
26	<br />
27	<input type="button" id="magnify" value="Magnify is Off"/>
28	</div>
29	<div id="container" style="position:relative;margin:0 auto;padding:0;z-index:0;cursor:pointer;"></div>
30	<script>
31	var container;
32	var camera, scene, renderer, projector, clock, mag_cam;
33	var clientX, clientY, magnify = false;
34
35	var targetRotationY = 0;
36	var targetRotationOnMouseDownY = 0;
37	var targetRotationX = 0;
38	var targetRotationOnMouseDownX = 0;
39	var rad = 200;
40	var mouse={x:0,y:0};
41	var mouseX = 0;
42	var mouseXOnMouseDown = 0;
43	var mouseY = 0;
44	var mouseYOnMouseDown = 0;
45	var mstack,bend;
46	var windowHalfX = window.innerWidth / 2;
47	var windowHalfY = window.innerHeight / 2;
48	var w,h,w2,h2;
49	var book, test_book;
50	var pagew = 80;
51	var pageh = pagew * 10/7;
52	var fl,fr;
53
54	var max_allowed_pages = 20;
55	var max_pages;
56	var fetched = 0;
57
58	var controls;
59
60	$.getJSON('books.json', function(books) {
61	test_book = books[0];
62	max_pages = (test_book.pages > max_allowed_pages) ? max_allowed_pages : test_book.pages;
63	init();
64	animate();
65	});
66
67
68	function init() {
69
70	container=document.getElementById('container');
71	w=window.innerWidth;
72	h=window.innerHeight;
73	w2=w/2;
74	h2=h/2;
75	container.style.width=w+"px";
76	container.style.height=h+"px";
77	container.style.marginTop=0.5*(window.innerHeight-h)+'px';
78
79	clock = new THREE.Clock();
80	scene = new THREE.Scene();
81
82	camera = new THREE.PerspectiveCamera( 45, w / h, 0.1, 10000 );
83	camera.position.z = rad;
84	scene.add( camera );
85
86	//book_cam = new THREE.PerspectiveCamera(45, w/h, 0.1, 1000);
87	//scene.add(book_cam);
88
89	/*mag_cam = new THREE.OrthographicCamera(
90	window.innerWidth / -4,// Left
91	window.innerWidth / 4,// Right
92	window.innerHeight / 4,// Top
93	window.innerHeight / -4,// Bottom
94	1, // Near
95	100); // Far -- enough to see the skybox
96	//topCamera.up = new THREE.Vector3(0,0,-1) ;*/
97	mag_cam = new THREE.PerspectiveCamera(45, w/h, 0.1, 10000);
98	mag_cam.position.set(0, 0, 60);
99	mag_cam.lookAt(scene.position);
100	scene.add(mag_cam)
101
102	projector = new THREE.Projector();
103
104	// webgl renderer gives better rendering without problems
105	renderer = new THREE.WebGLRenderer();
106	renderer.setSize( w, h );
107	renderer.setClearColorHex( 0x000000, 1 );
108	renderer.autoClear = false;
109
110	container.appendChild( renderer.domElement );
111
112	container.addEventListener( 'mousedown', onDocumentMouseDown, false );
113	container.addEventListener( 'mousemove', onMousemoveForMag, false );
114
115	book=new FlipBook3D.Book();
116	book.pageWidth=pagew;
117	book.pageHeight=pageh;
118	scene.add(book);
119
120
121	for(var i=0; i<max_pages; i+=2) {
122	//var texturefront = t.ImageUtils.loadTexture(images[i].f);
123	var texturefront = THREE.ImageUtils.loadTexture(test_book.url + i + '.jpg');
124	var textureback = THREE.ImageUtils.loadTexture(test_book.url + (i+1) + '.jpg');
125	book.addPage(texturefront, textureback, 0);
126	fetched = i;
127	}
128	console.log('fetched', fetched);
129
130	fl=document.getElementById('flipleft');
131	fr=document.getElementById('flipright');
132	fl.addEventListener('click',function(){
133	book.pages[book.pages.length-book.flippedright].flipLeft()
134	prefetch();
135	});
136	fr.addEventListener('click',function(){
137	book.pages[book.flippedleft-1].flipRight()
138	prefetch();
139	});
140	var mag = document.getElementById('magnify');
141	mag.addEventListener('click', function(event) {
142	if(magnify == true) {
143	mag.value = "Magnify is Off";
144	magnify = false;
145	}
146	else {
147	mag.value = "Magnify is On";
148	magnify = true;
149	}
150	});
151	}
152
153	function prefetch() {
154	var pageno = book.flippedleft * 2;
155	if(test_book.pages < max_allowed_pages) {
156	return;
157	}
158	if(pageno <= fetched - 5) {
159	return;
160	}
161	console.log('fetching books..');
162	var load_pages = fetched + 20;
163	if(load_pages > test_book.pages) {
164	return;
165	}
166	for(var i = fetched + 1; i < load_pages; i += 2) {
167	var texturefront = THREE.ImageUtils.loadTexture(test_book.url + i + '.jpg');
168	var textureback = THREE.ImageUtils.loadTexture(test_book.url + (i+1) + '.jpg');
169	book.addPage(texturefront, textureback, 0);
170	fetched = i;
171	}
172	}
173
174	function onDocumentMouseDown( event ) {
175	event.preventDefault();
176	mouseX=(( event.clientX / w ) * 2 - 1);
177	targetRotationY=mouseX;
178	mouseY=(( event.clientY / h ) * 2 - 1);
179	targetRotationX=mouseY;
180	container.addEventListener( 'mousemove', onDocumentMouseMove, false );
181	container.addEventListener( 'mouseup', onDocumentMouseUp, false );
182	container.addEventListener( 'mouseout', onDocumentMouseOut, false );
183	//window.addEventListener( 'keydown', onKeyDown, false );
184	//window.addEventListener( 'keyup', onKeyUp, false );
185	}
186
187	function onKeyDown(event) {
188	var key = event.keyCode;
189	var scale = book.centerContainer.scale;
190	if(key == 87 \|\| key == 38) {
191	book.centerContainer.scale.set(scale.x+=0.1, scale.y +=0.1, scale.z += 0.1);
192	//book.centerContainer.translateZ(10);
193	}
194	else if(key == 83 \|\| key == 40) {
195	book.centerContainer.scale.set(scale.x-=0.1, scale.y -=0.1, scale.z -= 0.1);
196	//book.centerContainer.translateZ(-10);
197	}
198	/*else if(key == 65) {
199	//book.centerContainer.position.x += 1;
200	book.centerContainer.translateX(-10);
201	}
202	else if(key == 68) {
203	book.centerContainer.translateX(10);
204	}*/
205	//book.centerContainer.position.z += 1;
206	}
207
208	function onKeyUp(event) {
209	}
210
211	function onMousemoveForMag(event) {
212	clientX = event.clientX;
213	clientY = event.clientY;
214	var mousex = ((event.clientX / w) * 2 - 1);
215	var mousey = - ((event.clientY / h) * 2 - 1);
216	var vec = new THREE.Vector3(mousex, mousey, 0);
217	projector.unprojectVector(vec, camera);
218	var raycaster = new THREE.Raycaster(camera.position, vec.sub(camera.position).normalize());
219	//var intersects = raycaster.intersectObjects(book.pages, true);
220	var intersects = raycaster.intersectObject(book, true);
221	if(intersects.length) {
222	var pos = intersects[0].point;
223	//console.log(camera.position);
224	//var dir_vec = vec.sub(camera.position).normalize();
225	//console.log(dir_vec);
226	//var ray = new THREE.Raycaster(camera.position, dir_vec);
227	//var distance = -camera.position.z / dir_vec.z;
228	//var pos = camera.position.clone().add(dir_vec.multiplyScalar(distance));
229	//console.log(pos);
230	mag_cam.position.set(pos.x+25, pos.y, 10);
231	}
232	}
233
234	function onDocumentMouseMove( event ) {
235
236	/*mouseX = event.clientX - w2;
237	mouseY = event.clientY - h2;
238
239	targetRotationY = targetRotationOnMouseDownY + ( mouseX - mouseXOnMouseDown ) * 0.02;
240	targetRotationX = targetRotationOnMouseDownX + ( mouseY - mouseYOnMouseDown ) * 0.02;*/
241	//var target=
242	//mouse_path.push(e.seenas.ray);
243	mouseX=(( event.clientX / w ) * 2 - 1);
244	targetRotationY=mouseX;
245	mouseY=(( event.clientY / h ) * 2 - 1);
246	targetRotationX=mouseY;
247	}
248
249	function onDocumentMouseUp( event ) {
250	container.removeEventListener( 'mousemove', onDocumentMouseMove, false );
251	container.removeEventListener( 'mouseup', onDocumentMouseUp, false );
252	container.removeEventListener( 'mouseout', onDocumentMouseOut, false );
253	}
254
255
256	function onDocumentMouseOut( event ) {
257
258	container.removeEventListener( 'mousemove', onDocumentMouseMove, false );
259	container.removeEventListener( 'mouseup', onDocumentMouseUp, false );
260	container.removeEventListener( 'mouseout', onDocumentMouseOut, false );
261	}
262	//
263
264	function animate() {
265
266	requestAnimationFrame( animate );
267
268	render();
269	}
270
271	function render2()
272	{
273	var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
274	TWEEN.update();
275	// setViewport parameters:
276	// lower_left_x, lower_left_y, viewport_width, viewport_height
277	renderer.setViewport(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
278	renderer.clear();
279
280	// left side
281	renderer.setViewport( 1, 1, SCREEN_WIDTH - 200, SCREEN_HEIGHT);
282	renderer.render( scene, camera);
283
284	// right side
285	if(magnify) {
286	renderer.setViewport(SCREEN_WIDTH - 450, 50, 400, 400);
287	renderer.render( scene, mag_cam);
288	}
289
290	}
291
292	function render() {
293
294	var multx=0.5*Math.PI;
295	var multy=-Math.PI;
296	camera.position.x = rad * Math.sin( targetRotationYmulty ) Math.cos( targetRotationX*multx );
297	camera.position.y = rad * Math.sin( targetRotationX*multx );
298	camera.position.z = rad * Math.cos( targetRotationYmulty ) Math.cos( targetRotationX*multx );
299	camera.lookAt(scene.position);
300	render2();
301	}
302	</script>
303	</body></html>

Gitorious