@webloved: The effect is a particle globe built from an image map 👇 Academy in bio 🔗 1. Load a black and white world map PNG into a hidden canvas and read its pixel data. 2. Walk the pixels in steps of 4. Every pixel brighter than 128 becomes one particle, the dark ones are skipped. 3. Convert each kept pixel to a sphere position: lon = (x / width) * 360 - 180, lat = 90 - (y / height) * 180, then place it at radius 1. 4. Push all positions into a Float32Array and render them as a single THREE.Points with a BufferGeometry. One draw call for 30k+ dots. 5. Material: PointsMaterial, size 0.008, sizeAttenuation true, transparent true, blending set to AdditiveBlending. That is what makes overlapping dots glow instead of muddy. 6. In the render loop, rotate the whole group 0.0008 per frame and offset each particle along its own normal by sin(time + index) * 0.004 so the surface breathes. 7. Fog or a radial gradient behind it hides the edge where the sphere ends. The map image controls the shape, so the same code draws any silhouette you feed it. Save this if you build 3D on the web 🔥 #astra6 #threejs #webgl #webdesign #frontend

weblove

Open In TikTok:

Region: PT

Friday 18 September 2026 12:37:09 GMT