Главная
Study mode:
on
1
- Project overview
2
- Create a sphere
3
- Map a texture onto sphere
4
- Sharpen rendering
5
- Create a vertex shader
6
- Import shader with Vite Plugin String
7
- Create a fragment shader
8
- Modify vertex shader to accommodate three.js
9
- Add texture to fragment shader
10
- UV Coordinates Explained
11
- Add texture to fragment shader cont.
12
- Add shade of blue to earth texture
13
- Normals Explained
14
- Add shade of blue to earth texture cont.
15
- Add atmosphere
16
- Fix shader normal bug
17
- Add mouse movement interaction
18
- Add background stars
19
- Add HTML / CSS
20
- Outro
Description:
Dive into an intermediate-level Three.js tutorial that guides you through creating a visually stunning globe with custom shaders. Learn to display population data and animate geometries while mastering complex concepts like Vertex Shaders, Fragment Shaders, UVs, and Normals, explained in easy-to-understand language. Follow along as you build a realistic globe using atmospheric-like shaders, and gain valuable insights into debugging 3D shaders. Explore essential topics such as creating and texturing spheres, implementing vertex and fragment shaders, working with UV coordinates and normals, adding atmospheric effects, and incorporating interactive mouse movements. By the end of this comprehensive 1 hour and 34 minute video tutorial, you'll have developed a polished globe visualization complete with background stars and HTML/CSS enhancements, while significantly advancing your Three.js and shader programming skills.

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

Chris Courses
Add to list