Globe Always Starts on Africa

[manuelbarros]

Hi Everyone,

I hope you are having a great day! Has anyone figured out a way to make it so the globe does not always start on Africa? I have even tried changing the coordinates of where the globe should be rotated at when the browser refreshes, however, I still get the globe starting on Africa no matter what I do. I have attached the codesandbox below and in the codesandbox I have commented the code on where I rotate the globe. Every time the user refreshes the browser, the center/right most of the globe should start on Brazil, but it always starts on Africa. Please let me know if anyone knows how to fix it! Thanks!

CodeSandbox: https://codesandbox.io/s/2nl934

[pescew]

instead of rotating the globe I rotate the camera

    // Start camera over São Paulo
    const latitude = -23.533773;
    const longitude = -46.62529;
    // altitude in globe radius units
    let altitude = camera.position.z / Globe.getGlobeRadius();
    let { x, y } = Globe.getCoords(latitude, longitude, altitude);
    camera.position.x = x;
    camera.position.y = y;

https://codesandbox.io/s/786twk?file=/src/NewGlobe.jsx

[Udith-Gayan]

@pescew You code works. To get the exact location to the front I had to do a small change as well.

  let { x, y, z } = Globe.getCoords(latitude, longitude, altitude);
 camera.position.z = z;

I have got an issue even without my change. The above code limits the zoom-in level of the globe. Once it hits a zoom-in level, it starts zooming out. Any fix for that ?

[pescew]

it sounds like there's a minimum zoom being enforced somewhere

are you using three js OrbitControls with minDistance/minZoom set?

the getCoords function ends up calling this internal function:

three-globe/src/utils/coordTranslate.js

Line 7 in 817be05

function polar2Cartesian(lat, lng, relAltitude = 0) {

I don't see anything obvious that would limit it there.

[iaruso]

I was working on a personal project and encountered a need to adjust the camera upon selecting a country. Since I reload the globe due to the utilization of hexPolygons and their alteration, the suggested solution helped me. However, it resulted in the camera being overly zoomed in. Despite having predefined constraints:

controls.minDistance = 150;
controls.maxDistance = 300;

The resolution to the zoom issue involved maintaining the camera.position.z as it was and repurposing it for altitude:

camera.position.z = 400; // with this value, at least for me it was zoomed out
// Initiate camera positioning over São Paulo (using your example)
const latitude = -23.533773;
const longitude = -46.62529;
let altitude = camera.position.z / globe.getGlobeRadius();
let { x, y, z } = globe.getCoords(latitude, longitude, altitude);
camera.position.z = z;
camera.position.x = x;
camera.position.y = y;
scene.add(camera);