Learn Three.Js from scratch
Learn everything you need to master ThreeJs and Shaders to build immersive and creative Websites
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
Creating our very first scene in ThreeJs
Learn about the ThreeJs Scene, Camera and Renderer
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
Learn the secrets in which some projects were made
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 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
How to use Raycaster and how to use it for mouse picking 3D objects in the scene
Learn about the model loaders such as the OBJ, GLTF, DRACO, FBX and more
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
Why take this course?
🚀 Master Three.js and Shaders with Ahmad Al-Shurafa! 🚀
Course Title: Learn Three.Js from Scratch
Course Headline: Unlock the Secrets of Immersive Web Experiences with Three.js & Shaders!
Are you ready to transform your web development skills and create visually stunning 3D websites? Welcome to "Learn Three.Js from Scratch" – your ultimate guide to mastering one of the most powerful 3D libraries on the web!
🔹 What You'll Learn:
- Understanding Three.js: Dive into the core concepts and functionalities of this robust JavaScript library.
- Creating Your First 3D Scene: Start with a simple cube and progress to complex animations, lighting effects, and dynamic shadows.
- Exploring Particles: Add life to your creations with particles systems that react and respond to user interaction.
- Mastering Shaders: Learn the art of shaders from the ground up. Discover how to manipulate vertex and fragment shaders to create unique visual effects.
Course Structure:
📘 Introduction Section:
Learn everything you need to know about Three.js:
- Create your first 3D scene.
- Animate objects within the scene.
- Implement lighting and shadows.
- Experiment with particle systems.
- And much more! 🎉
🎨 Shaders Section:
Embark on a journey to master shaders:
- Understand the basics of GLSL (OpenGL Shading Language).
- Write your first vertex and fragment shaders.
- Apply shaders to create mesmerizing visuals.
- Utilize shaders for advanced effects like water, fire, glass, etc.
Course Resources:
All the code you need for this course is neatly organized in the Resources Folder. You'll find two main folders:
- Startup: Contains the code as it appears at the beginning of each lesson.
- Last Code: The completed code after we've worked through the lesson together.
Interactive Learning Experience:
As you progress through the course, you'll have direct access to a Questions Section. Have doubts or need clarification on a topic? Post your questions there! I am committed to providing personalized support and answers to all your inquiries. 🤝
Join Me on This Exciting Journey!
Embark on a creative adventure where you'll learn practical skills, challenge your creativity, and push the boundaries of web development. With each lesson, you'll be one step closer to becoming a Three.js wizard and a shader artist. ✨
Don't hesitate – dive into the world of Three.js and shaders with Learn Three.Js from Scratch today! Let's build the future of the web, together. 🚀
Enroll Now and Transform Your Web Development Skills with Ahmad Al-Shurafa!
See you in class, and let's create something extraordinary! 🌟
Ahmad Al-Shurafa
Screenshots
