After exploring the Three.js globe example on github, I set out to create my own globe using some specific data. However, I am encountering difficulty in making the camera focus on a given coordinate.
I attempted to use a function to convert coordinates into points and adjust the camera position accordingly, but it seems to have no effect:
function searchCountry(lat, lng){
var phi = (90 - lat) * Math.PI / 180;
var theta = (180 - lng) * Math.PI / 180;
camera.position.x = 200 * Math.sin(phi) * Math.cos(theta);
camera.position.y = 200 * Math.cos(phi);
camera.position.z = 200 * Math.sin(phi) * Math.sin(theta);
camera.lookAt(mesh.position);
}
The remaining code structure mirrors that of the globe example. I pass arguments from the index file as follows:
<select class="country">
<option data-lat="33" data-lng="65">Afghanistan</option>
</select>
In addition:
jQuery(".country").change(function () {
console.log(jQuery(".country :selected").data('lat'), jQuery(".country :selected").data('lng'));
globe.searchCountry(jQuery(".country :selected").data('lat'), jQuery(".country :selected").data('lng'));
});
Despite successful echoing of values and conversions, the globe remains stationary without rotating to the specified coordinates. Furthermore, I am looking to implement a zoom feature within the rotate function for closer visualization upon rotation. Any suggestions or insights on enabling this functionality would be greatly appreciated.