Positioning object in canvas, atmosphere styling, and load altituibe

[jackkemmish]

Hi there,

I have a few questions I hope someone can help with.

I am looking to make the canvas taller, and want to make sure the globe is positioned to the bottom. Is this possible using this package or utilisting Three.js similar to world.controls().enableZoom?

The atmosphere of the globe, I would like to make it a more solid shape rather than a gradient. Is this possible too?

I am setting the altitude on load to be .pointOfView({ altitude: 1.2 }) but this doesn't have an effect. I have zoom in/out buttons which use .pointOfView({ altitude }) which I can see works, so am wondering if setting this on load of the globe works?

Thanks in advance!

Jack

[jackkemmish]

Hey, any help on this please?

[vasturiano]

Hi @jackkemmish, thanks for reaching out.

This module assumes that the globe will be at the very center of the canvas. You can make your canvas any aspect ratio you like, using the width and height attributes, but if you need it to be off center I'd recommend falling back to the lower level component three-globe. With that one you're in full control of your scene and controls, and can therefore manage it any way you prefer.

Regarding the atmosphere, the two settings that are possible to adjust currently are color and altitude, via atmosphereColor and atmosphereAltitude respectively.

However, you can always hide the built-in atmosphere (via .showAtmosphere(false)) and add a custom ThreeJS object that you manage with another atmosphere designed the way you want. You can use the customLayer for this.

For the init POV, you can try setting it assynchronously after instantiation of the component, for instance like:

setTimeout(() => myGlobe.pointOfView({ altitude }));

[jackkemmish]

Hi @vasturiano,

Thanks for the reply, I will give the three-globe and check out 👍

I will also try the other recomendations too!

Thanks again.

Jack