I'm working on a project to generate world map projections and manipulate them. You can see a beta version here : http://ansichtssache-n.ch/en/personas/daVinci
I'm trying to get the drag event correctly interpreted, so that for example when you drag Australia up, it actually moves Australia up and not the center of the projection (causing Australia to move down in a Miller projection).
I've been trying to find the correct rotation angles to apply to the 3 axis as shown here http://bl.ocks.org/mbostock/4282586 .
I can get the x/y position on the canvas from the start and end of the mouse drag, I can get the geo-coordinates of these points too, and I can get the x/y of the current center as well as its geo-coordinates, but honestly I'm stuck now...
Any idea ?
I had a similar problem here Compose two rotations in D3 geo projection?
I came up with a way to compose the trackball rotation with the existing projection rotation so that you get intuitive control regardless of the original globe orientation.
Related
I've built a map where on hover over of a certain (x,y) coordinate point, a zoomed in mini-map shows up to the side with the hovered point in the center (using code similar to: http://bl.ocks.org/mbostock/2206590). It works well, but a bit inefficient because it is redrawing the whole map with a new scale and translate every time which I noticed when I took off overflow: hidden from the mini-map in IE.
Is there a built-in way in d3 or TopoJSON to filter map features to only keep those that fall within the bounding box of the zoomed in area?
Thanks!
I'm quite new to three.js and lacking some basic understanding of the coordinate systems obviously.
I have an Object3D "group" that has some children (planes). I use "group" to rotate the group of planes, which works fine. Now camera can move and parent object can rotate. One can click on the planes to select them. What I want now is to let the selected plane fly into the camera.
If I just move the plane to the camera position it flys in any direction but mostly not to the camera. Certainly because "group" seems to be the "world" for the child objects. If I move a plane along the z-axis the plane move along the z-axis of the parent.
I don't understand which coordinates I need to take (or transform) to move the plane bound to "group" in front of the camera.
Basically I demoed with three.js what famo.us did, just spent some two hours on it or so. I faked the wanted effect with an additional plane that is not grouped and which I can just move to camera without transformations. The demo is available here:
http://hwg.rattat.net/famo.html.
Would be nice if somebody could tell me how to get this working. I could still live with the fake, when I would be able to place the additional plane exactly over the selected plane.
Thanks in advance,
Christian
The question of converting local coordinates to world coordinates has been addressed at THREE.js: Calculate world space position of a point on an object . There might also be helping information at how to: get the global/world position of a child object .
Having fun with D3 geo orthographic projection to build an interactive globe, based on all the great examples I found.
You can see my simple mockup at http://bl.ocks.org/patricksurry/5721459
I want the user to manipulate the globe like a trackball (http://www.opengl.org/wiki/Trackball). I started with one of Mike's examples (http://mbostock.github.io/d3/talk/20111018/azimuthal.html), and improved slightly to use canvas coordinates and express the mouse locations in 'trackball coordinates' (i.e. rotation around canvas horizontal and vertical axes) so that a fixed mouse movement gives more rotation near the edges of the globe (and works outside the globe if you use the hyberbolic extension explained above), rather than Mike's one:one correspondence.
It works nicely when the globe starts at an unrotated position (north pole vertical), but when the globe is already rotated (manipulate the example so the north pole is facing out of the page) then the trackball controls become non-intuitive because you can't simply express a change in trackball coordinates as a delta in the d3.geo.rotate lat/lon coordinates. D3's 3-axis rotation involves applying a longitude rotation (spin around north pole), then a latitude rotation (spin around a horizontal axis in the canvas plane), and then a 'yaw' rotation (spin around an axis perpendicular to the plane) - see http://bl.ocks.org/mbostock/4282586.
I guess what I need is a method for composing my two rotation matrices (the one currently in the projection, with a new one to rotate the trackball slightly), but I can't see a way to do that in D3, other than digging into the source (https://github.com/mbostock/d3/blob/master/src/geo/rotation.js) and trying to do the math to define the rotation matrix. The code looks elegant but comment-free and I'm not sure I can correctly decipher the closures with the orthographic projection instance.
On the last point, if someone knows the rotation matrix form of d3.geo.projection that would probably solve my problem too.
Any ideas?
There is an alternative solution to patricksurry's answer, by using quaternion representations, as inspired by Jason Davies. I, too, thought D3 would've already supported this composition natively! And hoped Jason Davies posted his code...
Took sometime to figure out the math. A demo is uploaded here, with an attempt to explain the math too. http://bl.ocks.org/ivyywang/7c94cb5a3accd9913263
With my limited math knowledge, I think, one of the advantages quaternion over Euler is the ability to compound multiple rotations over and over, without worrying about coordinate references. So it would always work, no matter where your north pole faces, and no matter how many rotations you'll have. (Someone please correct me, if I got this wrong).
I decided that solving for the combined rotation matrix might not be so hard. I got http://sagemath.org to do most of the hard work, so that I could express the composition of the original projection rotate() orientation plus a trackball rotation as a single equivalent rotate().
This gives much more natural behavior regardless of the orientation of the globe.
I updated the mockup so that it has the improved version - see http://bl.ocks.org/patricksurry/5721459
The sources are at http://bl.ocks.org/patricksurry/5721459 which include an explanation of the math - cool that you can use proper greek letters in javascript for almost readable math sourcecode!
It would still be good if D3 supported composition of rotate operations natively (or maybe it does already?!)
I'm trying to add some dots representing the locations of various features onto some of D3.js's geographic projections. I would like the dots to rotate and get clipped the same as the country paths, but I'm having some difficulty getting this to work.
For a given projection, I can obtain the updated coordinates by updating the projection according to the drag as in the demo, then calling projection() on the coordinates that I want to update, but this does not clip the circles correctly (you can see the circles on the opposite side of the globe). Would it be possible to get an example of this? To recap, I'd like to draw a circle around, say, New York city, then be able to rotate the globe and have the circle "set".
Thanks!
Lauren
Context: trying to take THREE.js and use it to display conic sections.
Method: creating a mesh of vertices and then connect face4's to all of them. Used two faces to produce a front and back side so that when the conic section rotates it won't matter from which angle the camera views it.
Problems encountered: 1. Trying to find a good way to create a intuitive mouse rotation scheme. If you think in spherical coordinates, then it feels like just making up/down change phi and left/right change phi would work. But that requires that you can move the camera. As far as I can tell, there is no way to change actively change the rotation of anything besides the objects. Does anyone know how to change the rotation of the camera or scene? 2. Is there a way to graph functions that is better than creating a mesh? If the mesh has many points then it is too slow, and if the mesh has few points then you cannot easily make out the shape of the conic sections.
Any sort of help would be most excellent.
I'm still starting to learn Three.js, so I'm not sure about the second part of your question.
For the first part, to change the camera, there is a very good way, which could also include zooming and moving the scene: the trackball camera.
For the exact code and how to use it, you can view:
https://github.com/mrdoob/three.js/blob/master/examples/webgl_trackballcamera_earth.html
At the botton of this page (http://mrdoob.com/122/Threejs) you can see the example in action (the globe in the third row from the bottom).
There is an orbit control script for the three.js camera.
I'm not sure if I understand the rotation bit. You do want to rotate an object, but you are correct, the rotation is relative.
When you rotate or move your camera, a matrix is calculated for that position/rotation, and it does indeed rotate the scene while keeping the camera static.
This is irrelevant though, because you work in model/world space, and you position your camera in it, the engine takes care of the rotations under the hood.
What you probably want is to set up an object, hook up your rotation with spherical coordinates, and link your camera as a child to this object. The translation along the cameras Z axis relative to the object should mimic your dolly (zoom is FOV change).
You can rotate the camera by changing its position. See the code I pasted here: https://gamedev.stackexchange.com/questions/79219/three-js-camera-turning-leftside-right
As others are saying OrbitControls.js is an intuitive way for users to manage the camera.
I tackled many of the same issues when building formulatoy.net. I used Morphing Geometries since I found mapping 3d math functions to a UV surface to require v little code and it allowed an easy way to implement different coordinate systems (Cartesian, spherical, cylindrical).
You could use particles instead of a mesh I suppose but a mesh seems best. The lattice material is not too useful if you're trying to understand a surface mathematically. At this point I'm thinking of drawing my own X,Y lines on the surface (or phi, theta lines etc) to better demonstrate cross-sections.
Hope that helps.
You can use trackball controls by which you can zoom in and out of an object,rotate the object,pan it.In trackball controls you are moving the camera around the object.Object still rotates with respect to the screen or renderer centre (0,0,0).