Help with a shader that is a circle with a border

I’m new to Three.js and by following some tutorials and examples I was able to create a 3d sphere and apply a texture to it.
Now I’m trying to place some markers on the sphere and stuck on this with no idea what to do and how to do it.

Basically what I am trying to achieve is a circle like this

with a black solid thick border around it that I want to place on the globe.

For this I believe I need to create a mesh with a CircleBufferGeometry and then apply the right fragment shader to it that will make it look like that (red gradient with black border) but I have no idea how to do that.

I have found the following but I don’t know how to translate this to Three.js and how to add the border.

Have you considered to just create a transparent texture and map it to a plane geometry? In this way, you don’t have to write a custom shader and you have a lot of design possibilities to properly author the texture.

Basic code: Edit fiddle - JSFiddle - Code Playground


That could work well. But the texture looks stretched. Any idea what I need to to so it maintains it’s scale and looks right?

You can make a marker out of two circle geometries, the smaller circle above the bigger, it will look like a circle with a border.



1 Like