Descriptions
Intermediate Three.js with Shaders, Welcome to the Intermediate ThreeJS with Shaders course where you will learn how to create an interactive 3D globe using custom ThreeJS shaders. My name is Christopher Lis and I am an award-winning full-stack engineer with over ten years of web development experience. I have worked directly with clients such as Harvard University, The Basketball Tournament, and award-winning premium agencies such as Brave People. The goal of this course is to teach you how to write your own custom ThreeJS shaders using GLSL and help you understand how to import those shaders into a practical ThreeJS scene. You will 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 that really cover this topic in depth, so I figured I should dig into it. If you’re serious about taking your ThreeJS skills to the next level, shaders are logically the next step after getting familiar with the framework. Let me walk you through the full production of a 3D scene that you can actually use for a real website.
What you will learn
- Create and understand the composition and setup of ThreeJS shaders
- 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 concepts such as normals, attributes, variations and UVs
- How to draw interactive latitude and longitude data points on a globe
- How to import bulk data and read it into a scene
- How to animate generated meshes with GSAP
- How to add a click and drag function to the globe
- How to scale a 3D scene for smaller screen sizes
- How to add mobile event listeners
Who is this course suitable for?
- Advanced ThreeJS developers who know how to create scenes with materials, geometries and meshes
Specification of Intermediate Three.js with shaders
- Publisher : Udemy
- Teacher: Christopher Lis
- Language: English
- Level: Intermediate
- Number of courses: 23
- Duration: 4 hours and 18 minutes
Content of Intermediate Three.js with shaders
Requirements
- You must already have a development environment with ThreeJS setup – I am using Vite here, which you can learn by taking my Modern ThreeJS course also on Udemy
- Vite with ThreeJS installed is recommended for a frontend server, but is not required
- ThreeJS version ^0.128.0 is recommended (used in the course) but not required
- You should have a basic knowledge of mathematics (the basics of matrices are covered, but not in the detail of a mathematics course)
Pictures
Sample clip
installation Guide
Extract the files and watch them with your favorite player
Subtitles: English
Quality: 720p
Download links
Password file(s): free download software
File size
3.78GB