HOME > Development > Learn Three.Js and Shaders from scratch

Learn Three.Js and Shaders from scratch

  • Development
  • Apr 30, 2025
SynopsisLearn Three.Js and Shaders from scratch, available at $79.99,...
Learn Three.Js and Shaders from scratch  No.1

Learn Three.Js and Shaders from scratch, available at $79.99, has an average rating of 4.63, with 31 lectures, based on 195 reviews, and has 1531 subscribers.

You will learn about How to install ThreeJs library and import it into your project Learn the basics of ThreeJs with many demonstrations and example code Learn about the ThreeJs Scene, Camera and Renderer Creating our very first scene in ThreeJs How to move and animate the Objects Learn about Webpack, NodeJs ,and serving ES6 modules to the browser clients. We will talk about Gsap Package and how we can use it How to scale a 3D scene and be responsive due to the display screen Learn about Geometries such as Box, Sphere, Plane, Torus, TorusKnot and more Learn about Geometries such as Box, Sphere, Plane, Torus, TorusKnot and more Learn the secrets in which some projects were made Learn about the Basic, Normal, Lambert, Phong, Standard, Matcap and other materials Learn about the Bumpmap and Displacement Maps Learn Dat GUI panels Everything related to Lights and Shadows will be covered We will dive deep into OrbitControls We also will learn how to create a stunning Scene using Particles Learn about the model loaders such as the OBJ, GLTF, DRACO, FBX and more How to use Raycaster and how to use it for mouse picking 3D objects in the scene Create Custom Animations and Export From Blender Learn Shaders (GLSL ) to create immersive and creative websites How to create vertex and fragment shaders in detail We are also going to talk about GLSL Built in function, Noises and how to import textures into your shade Post Processing will also be explained And so much more . . . This course is ideal for individuals who are Beginner Web developers who wants to learn about ThreeJs or Front end developers wanting to learn about ThreeJs concepts or Web developers who wants to create immersive and creative 3D websites It is particularly useful for Beginner Web developers who wants to learn about ThreeJs or Front end developers wanting to learn about ThreeJs concepts or Web developers who wants to create immersive and creative 3D websites.

Enroll now: Learn Three.Js and Shaders from scratch

Summary

Title: Learn Three.Js and Shaders from scratch

Price: $79.99

Average Rating: 4.63

Number of Lectures: 31

Number of Published Lectures: 31

Number of Curriculum Items: 31

Number of Published Curriculum Objects: 31

Original Price: $24.99

Quality Status: approved

Status: Live

What You Will Learn

  • How to install ThreeJs library and import it into your project
  • Learn the basics of ThreeJs with many demonstrations and example code
  • Learn about the ThreeJs Scene, Camera and Renderer
  • Creating our very first scene in ThreeJs
  • How to move and animate the Objects
  • Learn about Webpack, NodeJs ,and serving ES6 modules to the browser clients.
  • We will talk about Gsap Package and how we can use it
  • How to scale a 3D scene and be responsive due to the display screen
  • Learn about Geometries such as Box, Sphere, Plane, Torus, TorusKnot and more
  • Learn about Geometries such as Box, Sphere, Plane, Torus, TorusKnot and more
  • Learn the secrets in which some projects were made
  • Learn about the Basic, Normal, Lambert, Phong, Standard, Matcap and other materials
  • Learn about the Bumpmap and Displacement Maps
  • Learn Dat GUI panels
  • Everything related to Lights and Shadows will be covered
  • We will dive deep into OrbitControls
  • We also will learn how to create a stunning Scene using Particles
  • Learn about the model loaders such as the OBJ, GLTF, DRACO, FBX and more
  • How to use Raycaster and how to use it for mouse picking 3D objects in the scene
  • Create Custom Animations and Export From Blender
  • Learn Shaders (GLSL ) to create immersive and creative websites
  • How to create vertex and fragment shaders in detail
  • We are also going to talk about GLSL Built in function, Noises and how to import textures into your shade
  • Post Processing will also be explained
  • And so much more . . .
  • Who Should Attend

  • Beginner Web developers who wants to learn about ThreeJs
  • Front end developers wanting to learn about ThreeJs concepts
  • Web developers who wants to create immersive and creative 3D websites
  • Target Audiences

  • Beginner Web developers who wants to learn about ThreeJs
  • Front end developers wanting to learn about ThreeJs concepts
  • Web developers who wants to create immersive and creative 3D websites
  • Welcome to my course on ThreeJs and Shaders, where you will learn how to build immersive and creative 3D websites

    In this course we will learn all about Three.js and Shaders , we are also going to share some of the project’s secrets soon

    The course is in 3 main sections,

    1. the Introduction Section : Where we will learn everything related to this library, starting with how to create a cube inside the scene and then how to animate that cube, how to add lights, shadows, particles and so much more.

    2. the Shaders Section : we will learn shaders from scratch and you will be amazed by the things that you will be able to do when you master shaders, all you have to do is one thing which is be patient while learning

    3. the Projects Section : in this section, we will share some of the project’s secrets

    All code is provided in the resources folder where you can find the Startup folder which is the code at the beginning of the lecture, and the Last Code folder which is the written code after we finished the lesson.

    If you encounter any questions regarding a particular lesson, I hope that you will ask the question in the questions section I will answer all questions, so don’t be afraid to ask any question

    Thanks for participating in my course, and I will see you there.

    Ahmad

    Course Curriculum

    Chapter 1: Introduction to Three.JS

    Lecture 1: 1 – Hello To Your Course

    Lecture 2: 2 – What is WebGL and ThreeJs

    Lecture 3: 3 – Hello Cube

    Lecture 4: 4 – Transformation

    Lecture 5: 5 – Animation

    Lecture 6: 6 – Webpack

    Lecture 7: 7 – Power Of Mathmatics And Gsap

    Lecture 8: 8 – LookAt

    Lecture 9: 9 – Responsive

    Lecture 10: 10 – Cameras

    Lecture 11: 11 – OrbitControl

    Lecture 12: 12 – Geometries

    Lecture 13: 13 – Textures

    Lecture 14: 14 – Materials

    Lecture 15: 15 – Debugging

    Lecture 16: 16 – Lights

    Lecture 17: 17 – Shadow

    Lecture 18: 18 – Particles

    Lecture 19: 19 – Raycaster

    Lecture 20: 20 – 3d models part one

    Lecture 21: 21 – 3d models part two

    Chapter 2: Physics

    Lecture 1: Cannon-es

    Chapter 3: Shaders

    Lecture 1: 1 – Introduction to shaders

    Lecture 2: 2 – What is Vertex Shader and Fragment Shader

    Lecture 3: 3 – Attributes

    Lecture 4: 4 – Uniforms

    Lecture 5: 5 – Built-in functions

    Lecture 6: 6 – Noises

    Lecture 7: 7 – Texturing With Shaders

    Lecture 8: 8 – Post Processing

    Chapter 4: Projects

    Lecture 1: Changing the Mesh into particles in an animated way

    Instructors

  • Learn Three.Js and Shaders from scratch  No.2
    Ahmad Al-shurafa
    Senior Front-End Developer
  • Rating Distribution

  • 1 stars: 1 votes
  • 2 stars: 4 votes
  • 3 stars: 13 votes
  • 4 stars: 45 votes
  • 5 stars: 132 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!