Commit 42e725d0008d2e293f0958e457131781c04aec47
- Diff rendering mode:
- inline
- side by side
index.html
(208 / 50)
  | |||
1 | 1 | <!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 | } | ||
9 | 144 | } | |
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) { | ||
21 | 145 | ||
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 | } | ||
23 | 156 | ||
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 ) { | ||
34 | 159 | ||
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> |