Intermediate Three.js with Shaders

Intermediate Three.js with Shaders, available at $64.99, has an average rating of 4.5, with 23 lectures, based on 113 reviews, and has 1472 subscribers.

You will learn about 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 This course is ideal for individuals who are Intermediate ThreeJS Developers who know how to create scenes with materials, geometries, and meshes It is particularly useful for Intermediate ThreeJS Developers who know how to create scenes with materials, geometries, and meshes.

Enroll now: Intermediate Three.js with Shaders

Summary

Title: Intermediate Three.js with Shaders

Price: $64.99

Average Rating: 4.5

Number of Lectures: 23

Number of Published Lectures: 23

Number of Curriculum Items: 23

Number of Published Curriculum Objects: 23

Original Price: $24.99

Quality Status: approved

Status: Live

What You Will 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

Who Should Attend

Intermediate ThreeJS Developers who know how to create scenes with materials, geometries, and meshes

Target Audiences

Intermediate ThreeJS Developers who know how to create scenes with materials, geometries, and meshes

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 Curriculum

Chapter 1: Create An Interactive Globe with Custom Shaders

Lecture 1: Introduction

Lecture 2: Create a Sphere

Lecture 3: Map Texture Onto Sphere

Lecture 4: Sharpen Rendering

Lecture 5: Create A Vertex Shader

Lecture 6: Create A Fragment Shader

Lecture 7: Modify Vertex Shader for Use With Three.js

Lecture 8: Add Texture to Fragment Shader

Lecture 9: Add Blue Shade to Earth Texture

Lecture 10: Add Atmosphere

Lecture 11: Add Mouse Movement Interaction

Lecture 12: Add Background Stars

Lecture 13: Add HTML & CSS

Chapter 2: Add Interactive Data Points to Show Country Population

Lecture 1: Placing Points with Latitude and Longitude

Lecture 2: Maintain Canvas Size on Refresh

Lecture 3: Always Show Globe on Refresh

Lecture 4: Replace Points with Rectangular Prisms

Lecture 5: Animate Prisms with GSAP

Lecture 6: Create Data Labels on Mouse-Over

Lecture 7: Insert Bulk Country Data

Lecture 8: Click and Drag Functionality

Lecture 9: 3D Scene Responsiveness

Lecture 10: Mobile Event Listeners

Instructors

Christopher Lis
Founder of Chris Courses / Senior Full-Stack Engineer

Rating Distribution

1 stars: 2 votes
2 stars: 4 votes
3 stars: 9 votes
4 stars: 32 votes
5 stars: 66 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!

Menu