webgl - Three.js globe rotate on click -
i have created rotating globe has hostspots fire modal when clicked on. globe spin , have hotspot clicked on @ centre of screen. code below rotates globe doesn't centre desired. kindly provide pointers
checkhotspotclick: function(){ var me = this; window.cancelanimationframe(me.animate) //get normalized mousecoords -1 -> 1 var mouse2dx = (mousex/me.windowdimensionx)*2-1 var mouse2dy = -(mousey/me.windowdimensiony)*2+1 //for utilize orthographic photographic camera var vecorigin = new three.vector3( mouse2dx, mouse2dy, - 1 ); var vectarget = new three.vector3( mouse2dx, mouse2dy, 1 ); me.projector.unprojectvector( vecorigin, me.camera ); me.projector.unprojectvector( vectarget, me.camera ); vectarget.subself( vecorigin ).normalize(); var ray = new three.ray(); ray.origin = vecorigin; ray.direction = vectarget; var intersects = ray.intersectobjects(me.hotspotsarr); if (intersects.length > 0) { console.log($(me.hotspotdivsarr[intersects[0].object.name]).html()) // ajax overide me.targetrotation_x += (me.options.camx-mouse2dx)*12; me.targetrotation_y += (me.options.camy+mouse2dy)*12; me.dozoom(-6); console.log(me.targetrotation_x); var country_id = $(me.hotspotdivsarr[intersects[0].object.name]).data('id'); url = 'home/getprojectdata'; $("#mymodal").load(url,{ s: country_id }); settimeout(function() {$("#mymodal").modal('show')},2000); $('#mycarousel').carousel($(this).data('slide-index')); /*me.targetrotation_x = 0;*/ } else { me.dozoom(+6); } },
three.js webgl
No comments:
Post a Comment