Course Information
Registration period
Year-round Recruitment
Course Level
Study Mode
Duration
9 Hour(s) 22 Minute(s)
Language
English
Taught by
Ahmad Al-shurafa
Rating
Course Overview
Learn everything you need to master Three JS and Shaders to build immersive and creative 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,
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.
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
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 Content
- 4 section(s)
- 31 lecture(s)
- Section 1 Introduction to Three.JS
- Section 2 Physics
- Section 3 Shaders
- Section 4 Projects
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 . . .
Skills covered in this course
Reviews
-
YYoav Barnea
so far great explenations
-
FFool's Tech
Very good overview of the topic. There are some minor issues though: - author's voice is super monotone (AI?) - math stuff in shaders section is explained only verbally which is difficult to grasp (even for someone like me who has already shader knowledge/background). There should be more visualizing slides. The course doesn't make you a pro three.js dev/artist, but gives a solid base to work from. I don't know though how well the course is suited for absolute beginners, since I already worked through threejs-journey and took the course just to refresh already learned concepts after working for one month on a project using TresJS (abstraction layer on top of Three.js for Vue apps). But I found the first chapters of this course much better than threejs-journey's intro. It seems to have a better thought through structure.
-
RRavuri Nikhil
More content to physics and shaders section is required to understand more about them. It would be better if there were 1 or 2 detailed projects involving everything taught in this course.
-
AAnup karki
very clear explaination.
