I saw here Click to zoom in WebGL how to zoom in to a particular point. How can I reverse that functionality- i.e. zoom out?
Change the statement
vec3.subtract(eye,dir) ;
to
vec3.add(eye,dir) ;
This moves the eye in the opposite direction from before.
Here's the modified live example: http://jsfiddle.net/3wwdU/1/
Related
There are several physical bodies of different shapes on the screen. I want to click on the screen to get a physical body(if of course the click fell on it). I have no problems with converting the coordinates from the screen to the world and checking whether I hit the round collider(I just go through the list of "circles" and check the distance from the "click" to its center, if it is more than the radius, then skip). But I'm having problems with other shapes. I can't use raycast, as it doesn't detect the fixture inside which its starting point is. It seems to me that I'm missing some built-in solution that I didn't notice in the documentation. Advance thanks
I found an answer. World.QueryAABB
documentation pic
I would like to create some mouse interactions on several moving planes and for that, I need to know which planes I'm hovering on. I've implemented the Raycasting method like in your example here but it seems like I'm hovering all my planes in the center of the canvas, just like if the raycasting method wasn't considering my position.set() modifications.
You can see here an example of what I did here, I logged the result of the hits array at the end of the canvasSlider.js file and all planes are logging when hovering in the center.
Is there a way around that? Or I'm I doing something wrong? Thanks a lot.
The main issue is that you are setting the z scale to 0.
plane.scale.set(1, size.height/size.width, 0);
Replace the 0 with a 1 to enable the hit tests to function.
Another issue I noticed was that your mouse values are relative to the screen and not the canvas. As the canvas is on a scrolling page it may not be taking up the full screen at all times.
As for the current version, I have not found a proper way to detect the zoom start (without overriding the animation function). In my case both movestart and moveend events does not solve the problem.
The actual need for the zoom start is the TileWMS layer. I need to set it to invisible on certain zoom levels. This cannot be set on move end, because at move end the layer still loads tiles from geoserver although set to invisible. Enable / disable property is also not available on the layer itself.
Setting the layer invisible on movestart solves the problem with fetching but on drag already loaded the tiles are not visible :) this is annoying for the user experience.
Is there any other idea how to solve this?
Thanks
I am developing using Openseadragon
When I am zooming in using mouse wheel and reading the value of the current zoom using the function getZoom() , I am getting the value of the zoom for each wheel step
When I keep scrolling the mouse wheel in the up direction the zoom value keep changing normally as expected , going bigger.
But on a direction change of the mouse wheel , going down , ( in the first step only ) the zoom value continue to rise ( getting bigger ) but it should decrease ( getting smaller )
I think it is a bug of the Openseadragon , does anyone can help on the issue ? any info ?
I would think what you're seeing is because of the spring animation (slowing the zoom change exponentially as the zoom approaches the target level) after each wheel event.
If you use getZoom(false) you'll get the target zoom, which should change sign when you change the wheel direction.
I wonder is it possible to exclude SVG element (like circle) only from zoom (scale) functionality and preserve his panning. For example: in map i point my current position with red filled circle. When user zoom, i want that this circle have a constant radius. When user pan - i want circle to pan with all other viewport content.
I found this solution:
Scale independent elements
But it seems that i can't figure out how to use it correctly with svg-pan-zoom library.
Also I wonder for similar task - is it possible to drag and drop some element? Mean just that element to be excluded from pan functionality? I was try some approach like jQuery draggable but with no luck.
Thank you
Well after a few weeks I've some kind of workaround. I use onZoom event handler of ariutta/svg-pan-zoom library and write a simple function like this:
onZoom=function(currZoom){
document.getElementById("marker").setAttribute("r", 2/currZoom);
}
In my case I have a little circle which represent current position. Now, when user zoom, library pass current zoom level as argument, and we divide him to radius and off we go!
Also i found a way to achieve my other question. Drag and drop is possible if we use enablePan / disablePan in corresponding mouse event on desired element. I can't post code example for now, because i still cant clarify how to calculate exact dX/dY to match to current zoom level, but that definitely work.