Intermediate Three.js Tutorial - Create a Globe with Custom Shaders

This intermediate tutorial teaches how to create an interactive globe in Three.js with custom GLSL vertex and fragment shaders. It covers textures, UV coordinates, normals, atmospheric effects, mouse interaction, and background stars.

Syllabus

- Project overview
- Create a sphere
- Map a texture onto sphere
- Sharpen rendering
- Create a vertex shader
- Import shader with Vite Plugin String
- Create a fragment shader
- Modify vertex shader to accommodate three.js
- Add texture to fragment shader
- UV Coordinates Explained
- Add texture to fragment shader cont.
- Add shade of blue to earth texture
- Normals Explained
- Add shade of blue to earth texture cont.
- Add atmosphere
- Fix shader normal bug
- Add mouse movement interaction
- Add background stars
- Add HTML / CSS
- Outro