method to convert word-coordinates to normalized device coordinates (screen coordinates) about globe.gl

[vasturiano]

@FrissAnalytics thanks for your suggestion.

I think it's a nice addition in any case. So I've added a new method that facilitates this: getScreenCoords.

It receives spherical coordinates (lat, lng, ?alt) and returns the viewport coordinates of where that location is rendered on the screen.
The method is quite similar to the one you use above. It first converts to cartesian coordinates and then projects them via the camera to retrieve the screen position.

Thanks again for the nice idea. 😉

[FrissAnalytics]

hi again!

my bad, I now realize that to use the camera one needs to say: myGlobe.camera(), instead of myGlobe.camera!

For those still interested in x, y screen coordinates for e.g. a label that gets clicked, you can get the coordinates as follows (assuming we have setup a globe myGlobe, and have some label data stored in places, that holds the lat, long data etc.) (see examples in this repo):

// get the globe and setup some label data
myGlobe
	.labelsData(places)
	.labelLat(d => d.properties.latitude)
	.labelLng(d => d.properties.longitude)
	.labelText(d => d.properties.name)
	.onLabelClick(d => {
		// on label click, extract the __threeObj object from `d`, clone it (otherwise the original data gets overwritten!), and get the position
		const position = d.__threeObj.__data.__threeObj.clone().position;

		// use the project method and pass it the camera to get the device independent coordinates i.e. x,y,z coordinates between -1 and 1; 
                // note that if the camera position changes, these coordinates change as well!
		const coordinates = position.project(myGlobe.camera())

	        // next, scale these coordinates in relation to the available canvas size
               
                // grab the canvas that holds the globe e.g. using d3
		const canvas = d3.select("#globeViz").select("canvas");

		// get the width and height
		const width = canvas.attr("width");
		const height = canvas.attr("height");

		// scale the x, y coordinates from range -1,1 to the available width and height
		const x = Math.round((0.5 + coordinates.x / 2) * (width / window.devicePixelRatio));
		const y = Math.round((0.5 - coordinates.y / 2) * (height / window.devicePixelRatio));

		// the actual x,y coordinates in relation to the canvas
		// these can be used to e.g. create annotations via an overlay div
                // note we need these x,y coordinates to attach the annotation in the overlay div
                // to the data point on the globe e.g. via a line (see screenshot above)
		console.log("screen coordinates - x:", x, " y:", y);
	})

@vasturiano I guess it would still be handy for others to add a method that makes it easier to get these coordinates, assuming some would like to create annotations as I did. Anyways, great library, really loving it! :-)