vasturiano / globe.gl

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

Is there a way to disable shine/shadow effect? #64

Open RasyiidWho opened 3 years ago

RasyiidWho commented 3 years ago

Hi,

Thanks for developing this easy-to-use component..

I'm trying to make grey-white globe something like this, I've already edited image to make it look grey-white here, but when I implement it using .globeImageUrl(), it turns that globe model have some shine/shadow effect here's the screenshot. Tried using globeMaterial.shininess = 0, globeMaterial.clipShadows = false, and globeMaterial.fog = false but nothing seems really worked.

Again, I'm really appreciate for your work, I really want to contribute anything to this project but instead I'm asking this silly question. Best wishes and have a nice day for devs and everyone!

vasturiano commented 3 years ago

@RasyiidWho thanks for reaching out.

See here: https://github.com/vasturiano/globe.gl/issues/40

RasyiidWho commented 3 years ago

I have been using that example last time and didn't worked out. When I try to display directionalLight using alert, it's shows undefined means that globe aren't rendered yet. So I looked up to the code and increasing waiting time in setTimeout to 1000, from

this

setTimeout(() => { // wait for scene to be populated (asynchronously)
    const directionalLight = world.scene().children.find(obj3d => obj3d.type === 'DirectionalLight');
    directionalLight && directionalLight.position.set(1, 1, 1); // change light position to see the specularMap's effect
    alert(directionalLight);
});

into this

setTimeout(() => { // wait for scene to be populated (asynchronously)
    const directionalLight = world.scene().children.find(obj3d => obj3d.type === 'DirectionalLight');
    directionalLight && directionalLight.position.set(1, 1, 1); // change light position to see the specularMap's effect
    alert(directionalLight);
}, 1000); // <- HERE

And viola, now it's worked like a charm.. But I have the problem here, that globe now got "darker" than original globeImageUrl which I already use #FFFFFF (white) for the background, but when it rendered into globe, background image turns into #BBBBBB.

vasturiano commented 3 years ago

@RasyiidWho perhaps you can add a directional light underneath the globe to illuminate that hemisphere, instead of removing the existing one above the north pole.

RasyiidWho commented 3 years ago

Trying using directionalLight, but it's gives me plain white on all side both water (#FFFFFF) and continent area (#B7B7B7)

image

But the weird things is, except from that white to grey color, other color aren't really affected.. image image

mikey-mo commented 2 years ago

@RasyiidWho hey did you ever find a solution to the image darkening? I'm having the same issue w/a white background image getting shaded w/o the highlight.

mikey-mo commented 2 years ago

to anyone looking to brighten up the globe when you remove the shadow -- you can set the AmbientLight child property intensity to greater than 1, similar to how you set the DirectionalLight.