Course Information
Registration period
Year-round Recruitment
Course Level
Study Mode
Duration
4 Hour(s) 18 Minute(s)
Language
English
Taught by
Christopher Lis
Rating
1 views
Course Overview
Create an interactive 3d globe with custom ThreeJS shaders
PLEASE READ: This is a freemium course—the first hour and a half are free (you can watch right here on Udemy [or YouTube] with each video's "Preview" button), while the remaining 3 hours require course purchase. I've always been a big advocate of spreading the basics to as many people as possible, as I believe knowledge and personal growth are some of the best ways to better our world as a whole. Enjoy.
Welcome to the Intermediate ThreeJS with Shaders course, where you will learn how to create an interactive 3d globe with custom ThreeJS shaders.
My name is Christopher Lis, and I'm an award winning Full-Stack Engineer with over ten years of web development experience. I've directly worked with clients like Harvard University, The Basketball Tournament, and premium award winning agencies like Brave People.
The goal of this course is to get you writing your own custom ThreeJS shaders with GLSL, and to help you understand how to import these shaders into a practical ThreeJS scene. You'll also learn how to dynamically place data points on a globe based on the latitude and longitude of different countries. There are little to no videos out there that actually go into this topic in-depth so I figured I should tackle it.
In this course, you'll learn everything from:
- Vertex Shaders
- Fragment Shaders
- Import Shaders with Vite Plugins
- Normals
- Uniforms
- Attributes
- Varyings
- Point clouds and particles
- Bulk Data Imports
- Rectangular Mesh Animation
- Click and Drag Functionality
- Scene Responsiveness
- Touch Event Listeners
And so much more.
If you're serious about taking your ThreeJS skills to the next level, then shaders are logically the next step after become acquainted with the framework. Let me guide you through the full production of a 3d scene you can actually use for a real website.
Course Content
- 2 section(s)
- 23 lecture(s)
- Section 1 Create An Interactive Globe with Custom Shaders
- Section 2 Add Interactive Data Points to Show Country Population
What You’ll Learn
- Create and understand ThreeJS shader composition and setup
- How to import textures into your shader to create a globe
- How to create vertex and fragment shaders
- How to import shaders into a vite project
- Understand complex 3D terms like normals, attributes, varyings, and UVs
- How to draw interactive data points onto a globe with latitude and longitude
- How to import bulk data and read it onto a scene
- How to animate generated meshes with GSAP
- How to add click and drag functionality to the globe
- How to scale a 3D scene for smaller screen sizes
- How to add mobile event listeners
Reviews
-
BBill Indest
Excellent content - spot on for me and well presented in a consumable way.
-
JJohn A Dodge
Outstanding class, in particular with mapping a real dataset upon a 3D sphere. The GSAP animation was a nice touch. A final extra touch, would be to view the arc animation (Like Github) flying between the lat and long of the countries mapped to the lat and long of where the file was actually viewed from.
-
GGarry MacGregor
I like the careful thorough explanation of pretty much every line of code!
-
CCarlos Rafael Córdova Flores
Great course, I learned new things, but the teacher does not resolve my doubts.
