The WebGL Globe - help - part 2 transparency

Questions
1

Hi guys , I’m noob to webgl /js /three.js and most of the coding - I know some basic html and css .

I would like to make a project based on this video
What I found so far is a google globe experiment that Is more related with what I want and maybe work with it : webgl globe

My Codepen proj webgl globe HERE

I can’t figure it out how to make the material transparent so I can add a .png as a texture ! , I was looking online for hours testing but din’t get nothing !

I anyone have any ideas pls let me know , also any suggestions to this project or wants to help me out pls let me know I will tip ! :slight_smile:

Thank you ! .

2

I think you should look at line 109:

uniforms['texture'].value = THREE.ImageUtils.loadTexture(imgDir+'world3.png');

This is where the background image for the globe is loaded in. You’ll notice in your browser debugging console that world3.png is not loading correctly, because you haven’t included it in the project. You can upload a file make it appear as your base texture.

The globe is a SphereGeometry built with a ShaderMaterial. The earth shader is defined on line 29 and you can edit the fragment shader to change the way the texture appears.

3

Thank you ianw , yes I 'm aware about the texture , but to upload assets to CodePen you need a pro plan and I don’t have it , and with that ShaderMaterial I’ve tried many options but I can’t make it work ! , also I have a problem when I resize the page , the globe disappear !