Commit 42e725d0008d2e293f0958e457131781c04aec47

Change index.html
index.html
(208 / 50)
  
11<!DOCTYPE html>
2<html>
3<head>
4 <title>Book Engine</title>
5 <meta charset="utf-8"/>
6 <style>
7 body {
8 background-color: #aaa;
2<html lang="en"><head>
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.r46.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 </div>
27 <div id="container" style="position:relative;margin:0 auto;padding:0;z-index:0;cursor:pointer;"></div>
28 <script>
29 var container;
30 var camera, scene, renderer, projector;
31
32 var targetRotationY = 0;
33 var targetRotationOnMouseDownY = 0;
34 var targetRotationX = 0;
35 var targetRotationOnMouseDownX = 0;
36 var rad=700;
37 var mouse={x:0,y:0};
38 var mouseX = 0;
39 var mouseXOnMouseDown = 0;
40 var mouseY = 0;
41 var mouseYOnMouseDown = 0;
42 var mstack,bend;
43 var windowHalfX = window.innerWidth / 2;
44 var windowHalfY = window.innerHeight / 2;
45 var w,h,w2,h2;
46 var images=[{f:"img/catalog_13.jpg",b:"img/mag_page9.jpg", hard:1},
47 {f:"img/catalog_06.jpg",b:"img/catalog_05.jpg",hard:0},
48 {f:"img/catalog_05.jpg", b:"img/catalog_11.jpg" ,hard:0},
49 /*{f:"img/catalog_11.jpg" ,b:"img/catalog_12.jpg", hard:0},
50 {f:"img/catalog_09.jpg", b:"img/catalog_07.jpg", hard:0},
51 {f:"img/catalog_06.jpg", b:"img/catalog_01.jpg", hard:0},*/
52 {f:"img/catalog_04.jpg", b:"img/catalog_08.jpg",hard:1}];
53 var book, test_book;
54 var pagew=300;
55 var pageh=pagew*10/7;
56 var fl,fr;
57
58 var max_allowed_pages = 20;
59 var max_pages;
60 var fetched = 0;
61
62 $.getJSON('books.json', function(books) {
63 console.log(books);
64 test_book = books[0];
65 max_pages = (test_book.pages > max_allowed_pages) ? max_allowed_pages : test_book.pages;
66 init();
67 animate();
68 });
69
70
71 function init() {
72
73 container=document.getElementById('container');
74 w=window.innerWidth;
75 h=window.innerHeight;
76 w2=w/2;
77 h2=h/2;
78 container.style.width=w+"px";
79 container.style.height=h+"px";
80 container.style.marginTop=0.5*(window.innerHeight-h)+'px';
81
82 scene = new THREE.Scene();
83
84 camera = new THREE.PerspectiveCamera( 50, w / h, 1, 1000 );
85 camera.position.z = rad;
86 scene.add( camera );
87 projector = new THREE.Projector();
88
89 // webgl renderer gives better rendering without problems
90 renderer = new THREE.WebGLRenderer();
91 renderer.setSize( w, h );
92
93 container.appendChild( renderer.domElement );
94
95 container.addEventListener( 'mousedown', onDocumentMouseDown, false );
96
97 book=new FlipBook3D.Book();
98 book.pageWidth=pagew;
99 book.pageHeight=pageh;
100 scene.add(book);
101
102
103 for(var i=0; i<max_pages; i+=2) {
104 //var texturefront = t.ImageUtils.loadTexture(images[i].f);
105 var texturefront = THREE.ImageUtils.loadTexture(test_book.url + i + '.jpg');
106 var textureback = THREE.ImageUtils.loadTexture(test_book.url + (i+1) + '.jpg');
107 book.addPage(texturefront, textureback, 0);
108 fetched = i;
109 }
110 console.log('fetched', fetched);
111
112 fl=document.getElementById('flipleft');
113 fr=document.getElementById('flipright');
114 fl.addEventListener('click',function(){
115 book.pages[book.pages.length-book.flippedright].flipLeft()
116 prefetch();
117 });
118 fr.addEventListener('click',function(){
119 book.pages[book.flippedleft-1].flipRight()
120 prefetch();
121 });
122 }
123
124 function prefetch() {
125 var pageno = book.flippedleft * 2;
126 console.log('page no ', pageno);
127 if(test_book.pages < max_allowed_pages) {
128 return;
129 }
130 if(pageno <= fetched - 5) {
131 return;
132 }
133 console.log('fetching books..');
134 var load_pages = fetched + 20;
135 if(load_pages > test_book.pages) {
136 return;
137 }
138 for(var i = fetched + 1; i < load_pages; i += 2) {
139 var texturefront = THREE.ImageUtils.loadTexture(test_book.url + i + '.jpg');
140 var textureback = THREE.ImageUtils.loadTexture(test_book.url + (i+1) + '.jpg');
141 book.addPage(texturefront, textureback, 0);
142 fetched = i;
143 }
9144 }
10 </style>
11</head>
12<body>
13 <div id="loading">Loading. Please wait...</div>
14 <div id="controls" style="position:absolute;z-index:1000">
15 <input type="button" id="flipleft" value="flipLeft" />
16 <br />
17 <input type="button" id="flipright" value="flipRight" />
18 </div>
19 <script>
20 if (!window.requestAnimationFrame) {
21145
22 window.requestAnimationFrame = (function() {
146 function onDocumentMouseDown( event ) {
147 event.preventDefault();
148 mouseX=(( event.clientX / w ) * 2 - 1);
149 targetRotationY=mouseX;
150 mouseY=(( event.clientY / h ) * 2 - 1);
151 targetRotationX=mouseY;
152 container.addEventListener( 'mousemove', onDocumentMouseMove, false );
153 container.addEventListener( 'mouseup', onDocumentMouseUp, false );
154 container.addEventListener( 'mouseout', onDocumentMouseOut, false );
155 }
23156
24 return window.webkitRequestAnimationFrame ||
25 window.mozRequestAnimationFrame ||
26 window.oRequestAnimationFrame ||
27 window.msRequestAnimationFrame ||
28 function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {
29 window.setTimeout(callback, 1000 / 60);
30 };
31 })();
32 }
33 </script>
157
158 function onDocumentMouseMove( event ) {
34159
35 <script>
36 window.BE = window.BE || {};
37 window.onload = function() {
38 BE.init();
39 };
40 </script>
41 <!--script src="js/lib/jquery-1.9.0.js"></script-->
42 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
43 <script src="js/lib/Detector.js"></script>
44 <!--script src="js/lib/three.js"></script>
45 <script src="js/lib/physi.js"></script-->
46 <script type="text/javascript" src="js/lib/three.r46.js"></script>
47 <script src="js/lib/Three.FirstPersonControls.js"></script>
48 <!--script src="js/lib/threex.domevent.js"></script>
49 <script src="js/lib/threex.domevent.object3d.js"></script-->
50 <script type="text/javascript" src="js/lib/MOD3.js"></script>
51 <script type="text/javascript" src="js/lib/Tween.js"></script>
52 <script type="text/javascript" src="js/FlipBook3D.js"></script>
53 <script src="js/main.js"></script>
54</body>
55</html>
160 /*mouseX = event.clientX - w2;
161 mouseY = event.clientY - h2;
162
163 targetRotationY = targetRotationOnMouseDownY + ( mouseX - mouseXOnMouseDown ) * 0.02;
164 targetRotationX = targetRotationOnMouseDownX + ( mouseY - mouseYOnMouseDown ) * 0.02;*/
165 //var target=
166 //mouse_path.push(e.seenas.ray);
167 mouseX=(( event.clientX / w ) * 2 - 1);
168 targetRotationY=mouseX;
169 mouseY=(( event.clientY / h ) * 2 - 1);
170 targetRotationX=mouseY;
171 }
172
173 function onDocumentMouseUp( event ) {
174 container.removeEventListener( 'mousemove', onDocumentMouseMove, false );
175 container.removeEventListener( 'mouseup', onDocumentMouseUp, false );
176 container.removeEventListener( 'mouseout', onDocumentMouseOut, false );
177 }
178
179
180 function onDocumentMouseOut( event ) {
181
182 container.removeEventListener( 'mousemove', onDocumentMouseMove, false );
183 container.removeEventListener( 'mouseup', onDocumentMouseUp, false );
184 container.removeEventListener( 'mouseout', onDocumentMouseOut, false );
185 }
186 //
187
188 function animate() {
189
190 requestAnimationFrame( animate );
191
192 render();
193
194 }
195
196 function render2()
197 {
198 TWEEN.update();
199 renderer.render( scene, camera );
200 }
201
202 function render() {
203
204 var multx=0.5*Math.PI;
205 var multy=-Math.PI;
206 camera.position.x = rad * Math.sin( targetRotationY*multy ) * Math.cos( targetRotationX*multx );
207 camera.position.y = rad * Math.sin( targetRotationX*multx );
208 camera.position.z = rad * Math.cos( targetRotationY*multy ) * Math.cos( targetRotationX*multx );
209 camera.lookAt(scene.position);
210 render2();
211 }
212 </script>
213</body></html>