Three.js Workshops offers comprehensive online training sessions for mastering Three.js and building immersive 3D web experiences. These workshops cater to both beginners and experienced developers, providing hands-on guidance and expert insights into 3D web development. <h3>Key Features:</h3><ul><li>Expert-Led Training: Learn from industry professionals with extensive Three.js expertise.</li><li>Beginner to Advanced Topics: Covers basics, advanced techniques, and real-world applications.</li><li>Interactive Learning: Includes practical exercises and project-based learning.</li><li>Flexible Scheduling: Attend workshops at your convenience with online access.</li></ul>This platform is an excellent resource for developers eager to enhance their skills in Three.js and create cutting-edge 3D applications.

Threejs Workshops

Three.js Workshops offers comprehensive online training sessions for mastering Three.js

OffscreenCanvasOffscreenCanvas is a web API that enables rendering graphics in a separate thread, independent of the main browser UI thread. This feature is particularly useful for improving performance in web applications with heavy graphical computations, such as games or 3D visualizations. <h3>Key Features:</h3><ul><li>Allows rendering with WebGL, 2D, or other supported contexts off the main thread.</li><li>Improves responsiveness by offloading rendering tasks.</li><li>Compatible with Worker threads for parallel processing.</li></ul>OffscreenCanvas is ideal for applications that demand smooth, high-performance rendering while maintaining a responsive user interface.

offscreencanvas

OffscreenCanvas is a web API that enables rendering graphics in a separate threa.

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.

<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.

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>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.

Three js Course