This course will explore&nbsp;creating a beautiful configurator&nbsp;using&nbsp;Three.js&nbsp;and&nbsp;React Three Fiber. We will see how I make my designs for applications, I will understand how to optimize the model in Blender and export it to use in the experiment. Next, let's dive into react three fiber and implement the entire project, from a simple scene to load the model, creating the color variations, covering state management concepts, and using Framer Motion to animate the interface.This is a dynamic course and very focused on the final product. You can find the link to the final project in the introductory class or on my Twitter profile.Each class has a link to resources that contain the source code for the specific lesson. That way, you can use the video as a guide through each lesson and see the codes provided to build your project. Or you can follow the instructions in the video and code along with me as you go. You choose the best way and format that you like to learn the most.This course is&nbsp;suitable for people familiar with the React Environment, who already know a bit about&nbsp;React Three Fiber, and who have&nbsp;prior knowledge of using online code&nbsp;tools like CodeSandBox.

React Three Fiber Configurator Course

Learn to create a 3D configurator using Three.js, React Three Fiber, Valtio and Framer Motion.

Yuri Artiukh, known online as Akella, is a creative coder and educator specializing in web technologies and generative art. His YouTube channel offers a variety of content aimed at both beginners and experienced developers interested in creative coding.Content Highlights:<ul><li>Live Coding Sessions: Yuri conducts live streams where he explores creative coding techniques, often using JavaScript and WebGL. These sessions provide real-time insights into his thought process and problem-solving approaches.</li><li>Tutorials: The channel features tutorials on topics such as shaders, generative art, and web development, breaking down complex concepts into understandable segments.</li><li>Project Walkthroughs: Yuri shares detailed explanations of his projects, discussing the inspiration, development process, and technical challenges encountered.</li><li>Interviews and Discussions: He engages with other professionals in the field, discussing trends, tools, and the future of creative coding.</li></ul>Yuri's approach emphasizes experimentation and learning through doing, encouraging viewers to explore and create their own projects. His content is well-regarded for its depth and clarity, making complex topics accessible to a broad audience.For those interested in creative coding and web development, Yuri Artiukh's channel serves as a valuable resource for learning and inspiration.

Yuri Artiukh

Yuri Artiukh, known online as Akella, is a creative coder and educator

Wael Yasmina is a content creator specializing in beginner-friendly tutorials on web technologies, with a particular focus on 3D graphics and JavaScript frameworks. His YouTube channel offers a variety of tutorials aimed at helping viewers grasp complex topics in an accessible manner. Content Highlights:<ul><li>Three.js Tutorials: Comprehensive guides on creating realistic scenes, loading and animating models, and building interactive 3D applications using Three.js. </li></ul> <ul><li>GLSL and Shaders: In-depth tutorials on GLSL syntax, shader programming, and practical examples to enhance understanding of graphics programming. </li></ul> <ul><li>React Three Fiber: Tutorials integrating React with Three.js to build complex 3D applications using React Three Fiber. </li><li>Physics and Animation: Guides on implementing physics simulations and animations in web applications, utilizing libraries like Cannon.js and Yuka. </li><li> </li></ul>In addition to his YouTube channel, Wael maintains a personal website where he publishes articles and tutorials on various web development topics. For developers seeking to enhance their skills in web technologies, especially in 3D graphics and JavaScript frameworks, Wael Yasmina's resources provide valuable insights and practical guidance.

WaelYasmina

Wael Yasmina is a content creator specializing in beginner-friendly tutorials on web technologies

Threeveloper is a YouTube channel managed by a front-end developer from the Netherlands, focusing on modern web development technologies. The channel offers tutorials and content aimed at helping viewers master front-end development efficiently. Content Highlights:<ul><li>Recreating Award-Winning Websites: Tutorials that guide viewers through the process of replicating high-quality websites using HTML, CSS, and JavaScript. </li></ul> <ul><li>3D Web Development: A series dedicated to building 3D websites using tools like three.js and react-three-fiber. </li><li>SvelteKit Mastery: Videos focused on mastering SvelteKit, covering topics like server-side rendering and global state management. </li></ul> As of November 2024, the channel has over 4,500 subscribers and 26 videos. The creator is active on GitHub, Instagram, Twitter, and LinkedIn, fostering a community of developers passionate about front-end development. For those interested in enhancing their front-end development skills, Threeveloper provides valuable resources and tutorials.

Threeveloper

Threeveloper is a YouTube channel managed by a front-end developer from the Netherlands

Harness the WebXR API and Three.JS to bring immersive experiences, VR and AR, to the browser, including Oculus Quest <h2>What you'll learn</h2> <ul><li>How to easily create VR and AR apps that work in the browser</li><li>How to use the ThreeJS library to create these apps</li><li>How to handle controllers</li><li>How to replace the controllers with custom models</li><li>How to create architectural walk-throughs, games and training apps.</li><li>How to add an in world UI</li><li>Developing AR apps that support real world hit testing</li><li>Learn game VR techniques such as teleporting and interacting with models in the scene using controllers.</li></ul>

WebXR, VR and AR, using Three.JS

Harness the WebXR API and Three.JS to bring immersive experiences, VR and AR, to the browser

<ul><li>Learn the Basics of Threejs with many demonstrations and example code</li><li>Setup a Development Environment using VSCode, Git and NodeJS</li><li>Install TypeScript</li><li>Create a Threejs project using NPM and package json</li><li>Learn about the VIte bundler and serving ES6 modules to the browser clients.</li><li>Create (or optionally Install) a Threejs TypeScript Boilerplate for use throughout the course</li><li>Learn about the Threejs Scene, Camera and Renderer</li><li>Learn about the Animation loop</li><li>Learn about the Stats, Dat GUI and lil-gui panels</li><li>Learn about Object3D base class, and the Rotation, Position, Scale, Visibility and Matrix properties</li><li>Learn about Geometries such as Box, Sphere, Icosahedron, Plane, TorusKnot and more</li><li>Learn about the Basic, Normal, Phong, Standard, Physical and other materials</li><li>Learn about PBR Roughness and Metalness</li><li>Learn about lighting using the Ambient, Directional, Point and Spot lights.</li><li>Learn about shadows using both the Perspective and Orthographic shadow cameras.</li><li>Learn about the Orbit, Trackball and Pointerlock mouse and touch interaction controls</li><li>Learn about loaders such as the GLTF, DRACO, OBJ, Texture, RGBE and more</li><li>Import third party glTF/glB animations</li><li>Animate using Lerp, JEasings and the Animation Mixer</li><li>Use Raycaster and how to use it for mouse picking 3D objects in the scene,</li><li>Physics with Rapier</li><li>The Rapier Debug Renderer</li><li>Understanding Shapes for Collision Detection</li><li>Provision, Deploy and Start our Threejs Projects to a Production server</li><li>Matching Blender Lighting and Environment Maps</li><li>Install Nginx Proxy, Point a Domain Name and Install SSL</li><li>And many more very useful examples of Threejs</li></ul>

Three.js and TypeScript

Learn Threejs, TypeScript and NodeJS to create interactive 3D content on the web.

You can find a lot of tutorials and examples about Three.js, GSAP and more on my YouTube Channel

Gianluca Lomarco

What is the OpenGL Tutorial?The OpenGL Tutorial by Paroj is a structured resource aimed at teaching the fundamentals of modern OpenGL programming. Covering everything from the basics of rendering pipelines to advanced shader techniques, this guide is designed for developers and enthusiasts interested in building a solid foundation in OpenGL for graphics programming. With step-by-step explanations and hands-on examples, the tutorial makes it easier to understand key concepts essential for 3D rendering and real-time graphics.Key Features:<ul><li>Comprehensive Curriculum: Covers a wide range of topics, including rendering pipelines, vertex and fragment shaders, and 3D transformations.</li><li>Hands-On Approach: Provides practical examples and code snippets to reinforce each concept, making it suitable for learners who prefer a hands-on style.</li><li>Beginner-Friendly Explanations: Each topic is broken down into simple explanations, making complex graphics concepts accessible to newcomers.</li><li>Shader Programming: Introduces shader development, giving users a strong grasp of OpenGL’s programmable pipeline.</li><li>Open Source Access: The tutorial is freely available, allowing learners to experiment and build on the examples provided.</li></ul>Why Choose the OpenGL Tutorial?This tutorial is ideal for developers seeking a thorough and structured introduction to modern OpenGL. By working through the guide, you’ll gain practical knowledge and skills to create your own 3D graphics projects. Whether you’re a beginner or looking to refresh your OpenGL skills, this resource provides a comprehensive foundation for 3D graphics programming.

Learning Modern 3D Graphics Programming

OpenGL Tutorial – Foundational Guide to Modern OpenGL Programming

<h4>Mastering Three.js Instancing – Learn Advanced Instancing Techniques for Three.js Resources</h4>What is Mastering Three.js Instancing?Mastering Three.js Instancing is a comprehensive course designed to teach developers how to use instancing techniques in three.js to create optimized, visually stunning 3D projects. With over 4 hours of project-based lessons, the course covers everything from the basics of instancing to advanced interactive 3D scenes, making it an invaluable resource for developers who want to push the boundaries of three.js performance and creativity.Key Features:<ul><li>4+ Hours of Lessons: The course offers more than 4 hours of project-based lessons, teaching you how to implement instancing and shaders in three.js.</li><li>Comprehensive Instancing Curriculum: Learn everything from the basics of instancing to creating complex 3D scenes with projects like the "Infinite Tunnel."</li><li>Shaders and Gradients: Explore shader creation and gradient effects with detailed lessons on adding rich visual elements to your instanced 3D scenes.</li><li>Exclusive Projects: Get access to the exclusive source code for the "Infinite Tunnel" project, a visually engaging 3D scene designed to enhance your understanding of instancing.</li><li>Mouse Interactive InstancedMesh: Master how to make interactive 3D scenes using three.js's InstancedMesh feature, allowing you to create mouse-responsive animations and effects.</li><li>Bonus Lessons: Delve deeper into shader exploration and advanced instancing techniques with bonus lessons, cheat sheets, and practical next steps.</li><li>Free Updates: Stay up-to-date with the latest versions of three.js as the course content is continually updated to reflect changes in the library.</li><li>Community Support: Gain access to an exclusive Discord community where you can share progress, ask questions, and get feedback.</li></ul> Who is this Course for?This course is suitable for developers who have a basic understanding of how to render objects using three.js but want to dive deeper into instancing and shader techniques. Whether you’re building 3D games, interactive websites, or data visualizations, this course is a valuable resource for expanding your skill set and pushing your three.js projects to new levels of performance and visual complexity.

Mastering threejs Instancing

Mastering Three.js Instancing teaches instancing techniques for creating advanced three.js.

The First Arabic Spoken Course for Three.jsUnlock the potential of 3D web development with the first-ever Arabic spoken course on Three.js. Whether you're a complete beginner or have some experience in web development, this course will guide you step by step through the fascinating world of 3D graphics. <h3>What You Will Learn:</h3><ul><li>Introduction to Three.js: Understand the basics of 3D modeling and rendering in the browser using this powerful JavaScript library.</li><li>Setting Up Your First Scene: Learn how to create objects, apply textures, and manage lighting in your 3D environment.</li><li>Animations and Interactions: Master the art of making dynamic and interactive 3D scenes that respond to user input.</li><li>Advanced Topics: Explore particle systems, shaders, and post-processing effects to bring your 3D creations to life.</li><li>Real-World Projects: Apply your skills to build immersive 3D web experiences with real-world examples and hands-on projects.</li></ul><h3>Why This Course?</h3><ul><li>First-of-its-kind in Arabic: This is the first course tailored specifically for Arabic speakers, breaking down complex concepts in a clear and accessible way.</li><li>Practical Approach: We focus on real-world applications to ensure you can implement everything you learn.</li><li>Step-by-Step Guidance: No prior experience with 3D graphics is needed. We’ll start from the basics and progressively build up your skills.</li><li>Complete Learning Package: From setting up your development environment to deploying your final 3D projects, we’ve got you covered.</li></ul><h3>Who Is This Course For?</h3><ul><li>Web developers looking to expand their skill set into 3D graphics.</li><li>Designers interested in creating interactive 3D experiences for the web.</li><li>Students and enthusiasts eager to dive into the world of 3D development.</li></ul>Join us in this groundbreaking course and become a pioneer in 3D web development using Three.js, all while learning in your native language!

Code with Posidoon

"The First Arabic Spoken Course for Three.js" Discover the power of Three.js and begin your journey 

Dan Greenheck

Three.js tutorials with a focus on game development

Course Length: ~9 hours In this 10 part tutorial series, you'll learn how to code your very own Minecraft clone with JavaScript and Three.js! Video Topics<ol><li>Introduction</li><li>World Generation</li><li>Block Types</li><li>Player Controller</li><li>Collision Detection</li><li>Infinite Terrain</li><li>Add/Remove Blocks</li><li>Trees, Water &amp; Clouds</li><li>Tool Animations, UI and Save/Load Functionality</li><li>Biomes</li></ol>

Learn to Code a Minecraft Clone

Learn to code a MInecraft clone with Three.js in this 10 part video series!

Awesome Generative Art is a repository specifically dedicated to creating, learning and dropping generative art, as well as providing links that help you engage with the community! Below you'll find curated lists of tutorials, frameworks, libraries, and platforms to get you started and to advance your skills.

Awesome Generative Art

Carefully curated list of awesome resources to create, learn and, drop generative art

<h4>LSL Shaders from Scratch – Master Shader Programming for Three.js Resources</h4> What is GLSL Shaders from Scratch?GLSL Shaders from Scratch is a comprehensive course designed by SimonDev to teach developers how to create custom GLSL shaders from the ground up. Shaders are essential for controlling the appearance of 3D objects and effects in real-time 3D rendering, and this course is a perfect resource for those looking to enhance their three.js projects with custom visual effects. The course breaks down complex shader concepts, making them accessible even to beginners. Key Features:<ul><li>Complete Shader Programming Guide: Learn the fundamentals of GLSL (OpenGL Shading Language), including vertex and fragment shaders, and apply them to three.js.</li><li>Hands-On Projects: The course provides practical examples and projects that focus on creating real-time visual effects like lighting, shadows, and reflections.</li><li>From Basics to Advanced: Whether you're a beginner or have some experience with shaders, this course will help you understand and master shader programming step-by-step.</li><li>Three.js Integration: Specifically designed for developers working with three.js, this course shows how to integrate custom shaders into your 3D scenes.</li><li>Lifetime Access: Once enrolled, you receive lifetime access to the course materials, updates, and the ability to revisit the content anytime.</li></ul> Why Choose GLSL Shaders from Scratch?If you’re looking to add unique and creative visual effects to your three.js resources, this course is the perfect way to deepen your understanding of GLSL shaders. From creating dynamic lighting effects to custom water shaders, the course gives you all the tools needed to enhance your three.js projects with custom shaders.

Glsl Shaders from scratch

GLSL Shaders from Scratch teaches you to create custom shaders, enhancing three.js resources.

<h4>Three.js Journey – The Ultimate Learning Resource for Three.js</h4> What is Three.js Journey?Three.js Journey is a comprehensive, step-by-step course designed to teach developers the essentials of three.js and 3D web development. Created by Bruno Simon, it is widely recognized as one of the most complete learning resources available for three.js, offering an in-depth curriculum that covers everything from the basics to advanced 3D techniques. The course is structured to help you build interactive and visually stunning web experiences.Key Features:<ul><li>Step-by-Step Learning Path: The course guides you through each topic in a structured way, making it suitable for beginners and experienced developers alike.</li><li>Hands-On Projects: Apply what you learn by building real-world 3D projects, enhancing your understanding of three.js concepts.</li><li>Comprehensive Coverage: Covers a wide range of topics, including shaders, animations, lighting, physics, and particle systems.</li><li>Regular Updates: The content is continually updated with new techniques and resources, ensuring you stay up-to-date with the latest in 3D web development.</li><li>Community Access: Gain access to a private community of learners, where you can share your progress, ask questions, and get feedback.</li></ul> Why Choose Three.js Journey?Three.js Journey is perfect for developers who want a thorough and organized learning experience to master three.js. The course not only teaches you how to use the library but also dives into the underlying principles of 3D graphics. By the end of the course, you will have a deep understanding of three.js resources, enabling you to create professional-grade 3D web experiences.

Threejs Journey

Three.js Journey is a comprehensive course to master three.js and 3D web development.

<h4>React Three Fiber Ultimate Guide – Master 3D Web Development with Three.js Resources</h4> Level Up Your 3D Web Development SkillsThis comprehensive course takes you on a step-by-step journey through the essential tools and techniques needed to build immersive 3D web experiences using three.js and React Three Fiber. Whether you’re a beginner or an experienced developer, this guide will help you master 3D web development by offering organized and structured resources.Unlock New Frontend Skills<ul><li>Become a creative developer by mastering advanced 3D techniques.</li><li>Learn how to build engaging, interactive web applications that stand out from traditional websites.</li></ul>

Wawasensei

React Three Fiber Ultimate Guide – Master 3D Web Development with Three.js Resources

Three js learning resources