Commit d704c4dede26006e70b8531db09149180709d658

For Demo. Magnification.

  Magnification doesn't work properly. There is an offset of what is
under cursor, and what is projected of the magnified viewport.
Pushing for demo.
index.html
(34 / 20)
  
2323 <input type="button" id="flipleft" value="flipLeft" />
2424 <br />
2525 <input type="button" id="flipright" value="flipRight" />
26 <br />
27 <input type="button" id="magnify" value="Magnify Off"/>
2628 </div>
2729 <div id="container" style="position:relative;margin:0 auto;padding:0;z-index:0;cursor:pointer;"></div>
2830 <script>
2931 var container;
3032 var camera, scene, renderer, projector, clock, mag_cam;
33 var clientX, clientY, magnify = false;
3134
3235 var targetRotationY = 0;
3336 var targetRotationOnMouseDownY = 0;
3437 var targetRotationX = 0;
3538 var targetRotationOnMouseDownX = 0;
36 var rad=700;
39 var rad = 200;
3740 var mouse={x:0,y:0};
3841 var mouseX = 0;
3942 var mouseXOnMouseDown = 0;
……
4747 var windowHalfY = window.innerHeight / 2;
4848 var w,h,w2,h2;
4949 var book, test_book;
50 var pagew=300;
51 var pageh=pagew*10/7;
50 var pagew = 80;
51 var pageh = pagew * 10/7;
5252 var fl,fr;
5353
5454 var max_allowed_pages = 20;
……
137137 book.pages[book.flippedleft-1].flipRight()
138138 prefetch();
139139 });
140 var mag = document.getElementById('magnify');
141 mag.addEventListener('click', function(event) {
142 if(magnify == true) {
143 mag.value = "Magnify Off";
144 magnify = false;
145 }
146 else {
147 mag.value = "Magnify On";
148 magnify = true;
149 }
150 });
140151 }
141152
142153 function prefetch() {
143154 var pageno = book.flippedleft * 2;
144 console.log('page no ', pageno);
145155 if(test_book.pages < max_allowed_pages) {
146156 return;
147157 }
……
209209 }
210210
211211 function onMousemoveForMag(event) {
212 clientX = event.clientX;
213 clientY = event.clientY;
212214 var mousex = ((event.clientX / w) * 2 - 1);
213215 var mousey = - ((event.clientY / h) * 2 - 1);
214 var vec = new THREE.Vector3(mousex, mousey, 0.5);
215 console.log(mousex, mousey);
216 var vec = new THREE.Vector3(mousex, mousey, 0);
216217 projector.unprojectVector(vec, camera);
217218 var raycaster = new THREE.Raycaster(camera.position, vec.sub(camera.position).normalize());
219 //var intersects = raycaster.intersectObjects(book.pages, true);
218220 var intersects = raycaster.intersectObject(book, true);
219221 if(intersects.length) {
220 //console.log(intersects);
221 //var intersected = intersects[0].object;
222 //console.log(intersected);
223 //mag_cam.position.copy(intersected.position);
224 //mag_cam.lookAt(intersected.position);
225 mag_cam.position.set(0 * book.pageWidth,0 * book.pageHeight, 60);
226 //console.log(mousex * book.pageWidth, mousey * book.pageHeight);
227 //console.log(book.pageWidth, book.pageHeight);
228 //mag_cam.position.set(0,0, 60);
229 //console.log(book.position);
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);
230231 }
231232 }
232233
……
244244 targetRotationY=mouseX;
245245 mouseY=(( event.clientY / h ) * 2 - 1);
246246 targetRotationX=mouseY;
247 console.log(mouseX, mouseY);
248247 }
249248
250249 function onDocumentMouseUp( event ) {
……
282282 renderer.render( scene, camera);
283283
284284 // right side
285 renderer.setViewport(SCREEN_WIDTH - 300, 50, 200, 200 );
286 renderer.render( scene, mag_cam);
285 if(magnify) {
286 renderer.setViewport(SCREEN_WIDTH - 300, 50, 200, 200);
287 renderer.render( scene, mag_cam);
288 }
287289
288290 }
289291
……
296296 camera.position.x = rad * Math.sin( targetRotationY*multy ) * Math.cos( targetRotationX*multx );
297297 camera.position.y = rad * Math.sin( targetRotationX*multx );
298298 camera.position.z = rad * Math.cos( targetRotationY*multy ) * Math.cos( targetRotationX*multx );
299 //controls.update(clock.getDelta());
300299 camera.lookAt(scene.position);
301300 render2();
302301 }
js/FlipBook3D.js
(1 / 1)
  
6565 this.isFlippedRight=true;
6666 this.flippingLeft=false
6767 this.flippingRight=false;
68 this.zz=2;
68 this.zz=1;
6969 this.pageColor=col;
7070 this.sides={bottom:3,top:2, right:0,left:1, front:4,back:5};
7171