Companies Home Search Profile

Learn Three.Js and Shaders from scratch

Focused View

Ahmad Al-shurafa

8:41:50

121 View
  • 1. 1 - Hello To Your Course.mp4
    04:06
  • 2. 2 - What is WebGL and ThreeJs.mp4
    06:03
  • 3.1 Last Code.zip
  • 3. 3 - Hello Cube.mp4
    32:40
  • 4.1 Last Code.zip
  • 4.2 Startup.zip
  • 4. 4 - Transformation.mp4
    24:33
  • 5.1 Last Code.zip
  • 5.2 Startup.zip
  • 5. 5 - Animation.mp4
    18:07
  • 6.1 Last Code.zip
  • 6.2 Startup.zip
  • 6. 6 - Webpack.mp4
    10:50
  • 7.1 Functions.zip
  • 7.2 Last Code.zip
  • 7.3 Startup.zip
  • 7. 7 - Power Of Mathmatics And Gsap.mp4
    27:33
  • 8.1 Last Code.zip
  • 8.2 Startup.zip
  • 8. 8 - LookAt.mp4
    14:08
  • 9.1 Last Code.zip
  • 9.2 Startup.zip
  • 9. 9 - Responsive.mp4
    08:49
  • 10.1 Last Code.zip
  • 10.2 Startup.zip
  • 10. 10 - Cameras.mp4
    06:35
  • 11.1 Last Code.zip
  • 11.2 Startup.zip
  • 11. 11 - OrbitControl.mp4
    08:05
  • 12.1 Last Code.zip
  • 12.2 Startup.zip
  • 12. 12 - Geometries.mp4
    19:23
  • 13.1 Last Code.zip
  • 13.2 Startup.zip
  • 13. 13 - Textures.mp4
    14:46
  • 14.1 Last Code.zip
  • 14.2 Startup.zip
  • 14. 14 - Materials.mp4
    27:38
  • 15.1 Last Code.zip
  • 15.2 Startup.zip
  • 15. 15 - Debugging.mp4
    09:01
  • 16.1 Last Code.zip
  • 16.2 Startup.zip
  • 16. 16 - Lights.mp4
    23:51
  • 17.1 Last Code.zip
  • 17.2 Startup.zip
  • 17. 17 - Shadow.mp4
    10:25
  • 18.1 Last Code.zip
  • 18.2 Startup.zip
  • 18. 18 - Particles.mp4
    16:17
  • 19.1 Last Code.zip
  • 19.2 Startup.zip
  • 19. 19 - Raycaster.mp4
    15:10
  • 20.1 Last Code.zip
  • 20.2 Startup.zip
  • 20. 20 - 3d models.mp4
    58:05
  • 1.1 Startup.zip
  • 1. 1 - Introduction to shaders.mp4
    09:01
  • 2.1 Last Code.zip
  • 2.2 Startup.zip
  • 2. 2 - What is Vertex Shader and Fragment Shader.mp4
    39:06
  • 3.1 Last Code.zip
  • 3.2 Startup.zip
  • 3. 3 - Attributes.mp4
    10:51
  • 4.1 Last Code.zip
  • 4.2 Startup.zip
  • 4. 4 - Uniforms.mp4
    10:27
  • 5.1 Startup.zip
  • 5. 5 - Built-in functions.mp4
    27:07
  • 6.1 Startup.zip
  • 6. 6 - Noises.mp4
    06:19
  • 7.1 Startup.zip
  • 7. 7 - Texturing With Shaders.mp4
    04:43
  • 8.1 Last Code.zip
  • 8.2 startup.zip
  • 8. 8 - Post Processing.mp4
    23:45
  • 1.1 Last Code.zip
  • 1.2 Startup.zip
  • 1. Changing the Mesh into particles in an animated way.mp4
    34:26
  • Description


    Learn everything you need to master Three JS and Shaders to build immersive and creative Websites

    What You'll 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 is this for?


  • 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
  • What You Need to Know?


  • A device that you can install VSCode or any Code Editor
  • Basic JavaScript knowledge, you should be familiar with let, const, loops, arrays, functions
  • And the most two important things are to be patient ( please be patient ), and to have a desire to build 3D Web Applications
  • More details


    Description

    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

    Who this course is for:

    • 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

    User Reviews
    Rating
    0
    0
    0
    0
    0
    average 0
    Total votes0
    Focused display
    Category
    Ahmad Al-shurafa
    Ahmad Al-shurafa
    Instructor's Courses
    Hello, I'm Ahmad, I have obtained a master's degree in Computer Engineering, and I am also a front-end web developer who has worked professionally for clients in companies and as a freelancer, I have been teaching for 7 years, the beginning of my teaching was traditional teaching, and now I decided to start a new and enjoyable journey, which is teaching via the Internet, I hope you will benefit from the courses that I will offer
    Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.
    • language english
    • Training sessions 29
    • duration 8:41:50
    • English subtitles has
    • Release Date 2023/09/04