vasturiano / globe.gl

UI component for Globe Data Visualization using ThreeJS/WebGL
https://vasturiano.github.io/globe.gl/example/world-population/
MIT License
1.99k stars 298 forks source link

Access underlying threejs globe object #78

Closed mbrodt closed 2 years ago

mbrodt commented 2 years ago

Hey, thanks for the awesome library!

Is there a way to access and directly manipulate the underlying three.js globe object mesh? I tried grabbing it through the scene getObjectByProperty method, which technically gave me the object, but I can't update it's properties (in this example I'm rotating, which I could do with the autoRotate function, but it's more of a general question like if I wanted to translate it or do something else). I'm using the cloud example and adjusting the code to the following, but the globe is not spinning:

   (function rotateClouds() {
        const threeGlobe = world.scene().getObjectByProperty("type", "Mesh");
        threeGlobe.rotation.y += (CLOUDS_ROTATION_SPEED * Math.PI) / 180;
        clouds.rotation.y += (CLOUDS_ROTATION_SPEED * Math.PI) / 180;
        requestAnimationFrame(rotateClouds);
   })();

Thanks for the help!

vasturiano commented 2 years ago

@mbrodt thanks for reaching out.

You'd normally not need to access the whole Globe three object, as that's maintained by the component itself and changes to it may lead to unpredictable results. But, if you'd really like to, you just have to make sure you actually find the right object, which the getObjectByProperty("type", "Mesh") is probably not going to.

I would start by looking for a type: Group as that's the object type the whole component is encapsulated under currently. However keep in mind that this internal hierarchy could change in future versions of the component.

mbrodt commented 2 years ago

@vasturiano Thanks for the response! Makes perfect sense 👍

If it's not recommended to modify the Globe three object itself, what would be the way to go if I wanted to rotate the globe on the Y axis for example (so something that can't be solved using autoRotate)?

Thanks again!

vasturiano commented 2 years ago

@mbrodt I'd recommend to move the camera instead (using .pointOfView({ lat, lng, altitude })) instead of modifying the inner globe objects.