THREE.js scene and camera access

[FrissAnalytics]

Hi Felix,

hope you are doing well! what a great package, really cool :-) I had a few questions, if possible.

I was wondering, is there any way to access the THREE.js camera and scene such that the user can see what the current viewpoint (camera position) is? For instance, then the user can manipulate the view using the mouse, get access to the location and camera position to then programmatically zoom to it say. Is that possible?

In the same vain, as your tool is build on top of THREE.js, is it possible to add custom meshes to a scene, similar to what one can do with globe.gl?

FYI, its render controls and utility functions are quite handy to create and sync additional annotation layers to a view.

Anyways, congrats on your package, really amazing!

kind regards, Herman

[felixpalmer]

Currently the THREE.js scene isn't exposed as the shaders used in the library transform the positions of the terrain in a non-trivial way, so exposing the scene would likely be confusing as objects wouldn't show up where one would expect. However I would like to add support for adding THREE Meshes in the future, but I need to figure out a clean way to do this.

As for the camera positions, thefocusOnLocation API lets you set the camera position and the onUserInteraction callback can detect user input. The missing part is reading out the camera position. If this was added to the API would this help?

[FrissAnalytics]

Hi Felix,

to be able to read out the camera position would help for sure!

Indeed, it would be really cool if in the future one could add THREE mesh objects :-) Thanks for the feedback about the position data, I was not aware of this!

Given your feedback, I guess it's more difficult than I thought, my reference to globe.gl was only to say that the author added a few auxiliary methods that help translating between different coordinate systems (using e.g. getCoords(lat, lng [,altitude]), getScreenCoords(lat, lng [,altitude]), toGeoCoords({ x, y, z }) and toGlobeCoords(x, y) as described here.

Of course in your case one needs different methods, but for globe.gl for instance these greatly help adding an additional annotation layer of some sort by using an overlay, be it a div, a canvas element or an svg element e.g. so you can link up d3.js based chart elements . Of course adding the overlay is easy, getting things to sync up is where the auxiliary functions come in handy.

Anyways, thanks for your feedback and amazing package. Have a good and healthy new year!