Learn Three.Js and Shaders from scratch by Ahmad Al-shurafa

Ready to build mind-blowing 3D websites? This course dives deep into Three.js and Shaders, giving you the skills to create truly immersive and creative online experiences. You’ll go from setting up your project to crafting custom visual effects that will wow your audience.

🎯 What you’ll learn

• Install and integrate the Three.js library into your projects.
• Grasp Three.js fundamentals through hands-on demonstrations and example code.
• Understand the core concepts of Three.js: Scene, Camera, and Renderer.
• Create and animate 3D objects within your scenes.
• Work with Webpack, Node.js, and serve ES6 modules.
• Utilize the GSAP animation package for dynamic effects.
• Make your 3D scenes responsive across different screen sizes.
• Explore various Geometries like Box, Sphere, Plane, and Torus.
• Learn about different Materials including Basic, Normal, Lambert, and Phong.
• Implement Lights and Shadows for realistic rendering.
• Create stunning scenes using Particles.
• Load and use 3D models in formats like OBJ, GLTF, and FBX.
• Implement Raycasting for interactive object selection.
• Create custom animations and export assets from Blender.
• Master Shaders (GLSL) to craft unique visual effects.
• Understand vertex and fragment shaders in detail.
• Utilize GLSL built-in functions and import textures into shaders.
• Implement Post Processing effects.

✅ Requirements

• Skills: Basic JavaScript knowledge (variables, loops, arrays, functions). Patience and a strong desire to build 3D web applications.
• Tools: VSCode or any other code editor.
• Hardware: A device capable of running a code editor.

📝 Description

Welcome to this deep dive into Three.js and Shaders! We’re going to explore how to build truly immersive and creative 3D websites. This course is structured into three main parts. First, we’ll cover the Three.js essentials, from creating a basic cube and animating it to adding complex lighting, shadows, and particle effects. Then, we’ll tackle Shaders from the ground up. You’ll be amazed at what you can create once you master GLSL – just remember to be patient as you learn! Finally, we’ll reveal some of the secrets behind creating impressive 3D projects.

All the code you need is provided. You’ll find starter code in the “Startup” folder and the completed code in the “Last Code” folder for each lecture. If you get stuck or have questions, don’t hesitate to use the Q&A section. I’m here to help!

🧑‍🎓 Who this course is for:

• Beginner Web developers looking to get started with Three.js.
• Front-end developers aiming to expand their skills with Three.js concepts.
• Web developers who want to build unique, immersive 3D websites.

🧑‍🏫 About the Author

Ahmad Al-shurafa is an instructor with a Master’s degree in Computer Engineering and extensive experience as a front-end web developer. He’s worked professionally with clients and companies, and has been teaching for 7 years. Starting with traditional teaching methods, Ahmad is now excited to share his knowledge online through engaging courses.

🏁 Final Result

• Students will be able to build and deploy their own portfolio-ready 3D websites using Three.js and custom Shaders.