The Codrops Three.js demos page presents an extensive collection of visually captivating, interactive web experiments crafted with Three.js, focusing on innovative use of WebGL and shaders. This resource combines technical depth with artistic exploration, featuring projects ranging from immersive 3D scenes to animated visuals that push the boundaries of web-based graphics. Each demo includes unique visual effects or interactivity elements, providing inspiration for designers, developers, and artists interested in harnessing Three.js for advanced web design.

Codrops

This page showcases interactive Three.js demos, highlighting creative 3D web effects and animations.

Create 3D games and experiences for web, mobile, and VR using Hology Engine web technologies. Suitable for designers, web developers, artists, creators, educators, and game developers who wish to use front-end web technologies such as React and TypeScript, and no-code solutions for features such as VFX. Use case: Building web, mobile, PC games/applications, 3D/VR websites, personal portfolios online, and more. Efficiency: Hot reloading, fast asset import, automatic collision shapes, plus easy mobile and web distribution. Minimalistic: Our minimalistic UI is inspired to help designers, artists, and developers to a fast prototyping experience. Available to use on Windows, Linux, macOS, and we will build a version for iPads in the future.

Hology Engine

Create 3D games and experiences for web, mobile and VR by using web technologies with Hology Engine.

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

AccuRIG by ActorCore is a powerful auto-rigging tool designed to simplify the process of preparing 3D characters for animation. With its intuitive interface and advanced algorithms, it streamlines the rigging process, making it accessible for professionals and hobbyists alike. <h3>Key Features:</h3><ul><li>Automatic Rigging: Quickly adds a professional-grade skeletal rig to 3D models with minimal effort.</li><li>Facial and Body Animation Support: Prepares models for both facial expressions and full-body movements.</li><li>Customizable Rigging Options: Allows manual adjustments for precision and tailored results.</li><li>Wide Compatibility: Supports integration with tools like Three.js, Unity, Unreal Engine, and Blender.</li><li>Real-Time Feedback: Preview rigs and animations instantly to ensure accuracy and quality.</li></ul> <h3>Ideal Use Cases:</h3><ul><li>Preparing 3D characters for use in games, films, or web-based animations.</li><li>Creating realistic animations for Three.js projects or interactive web experiences.</li><li>Simplifying workflows for developers and artists who need rigged characters fast.</li></ul> <h3>Why Use This Tool?</h3>AccuRIG by ActorCore eliminates the complexities of manual rigging, enabling users to focus on creativity while ensuring high-quality, rigged characters ready for animation.

AccuRIG by ActorCore

An auto rigging tool that prepares 3D characters for animation, compatible with Three.js

Rodin by Hyper3D is an innovative tool designed for creating, editing, and visualizing 3D content directly in the browser. Built with robust technology, including Three.js, it offers a seamless platform for developers and designers to prototype and deploy interactive 3D experiences quickly. <h3>Key Features:</h3><ul><li>Browser-Based Editing: Create and edit 3D scenes without the need for additional software or plugins.</li><li>Three.js Integration: Fully compatible with Three.js, enabling easy integration into existing projects.</li><li>Interactive Prototyping: Supports real-time previews and interaction with 3D assets.</li><li>Collaboration-Friendly: Allows sharing and collaboration through web links, fostering teamwork on 3D designs.</li><li>Customizable Tools: Offers a range of tools for modeling, lighting, and rendering tailored for web-based 3D projects.</li></ul> <h3>Ideal Use Cases:</h3><ul><li>Prototyping interactive 3D web applications.</li><li>Editing and optimizing 3D content for Three.js-based projects.</li><li>Collaborative 3D design and development workflows.</li></ul> <h3>Why Use This Tool?</h3>Rodin by Hyper3D simplifies the creation and deployment of 3D content by providing a powerful, browser-based platform that integrates seamlessly with modern web technologies.

Rodin by Hyper3D

A browser-based 3D creation tool integrated with Three.js for editing, visualizing, and sharing 3D

Reallusion iClone is a comprehensive 3D animation software that simplifies the process of creating realistic character animations, environments, and cinematic sequences. With real-time rendering capabilities, iClone is widely used for film production, game development, and 3D visualization projects. <h3>Key Features:</h3><ul><li>Character Animation: Easily create, animate, and customize 3D characters with facial expressions and body movements.</li><li>Real-Time Rendering: View animations and scenes in real-time for faster iteration and workflow efficiency.</li><li>Dynamic Environments: Design detailed 3D environments with interactive elements, lighting, and effects.</li><li>Motion Capture Integration: Supports motion capture devices to bring lifelike movements into your animations.</li><li>Compatibility: Integrates seamlessly with popular 3D tools and engines, including Three.js, Unity, and Unreal Engine.</li></ul> <h3>Ideal Use Cases:</h3><ul><li>Creating character-driven animations for films and games.</li><li>Rapid prototyping of 3D animated scenes and storytelling.</li><li>Adding animated 3D elements to web-based projects using Three.js.</li></ul> <h3>Why Use This Tool?</h3>Reallusion iClone streamlines the animation workflow by combining powerful features with an intuitive interface, making it a go-to solution for animators and developers looking to create polished, high-quality 3D animations efficiently.

Reallusion iClone

A realtime 3D animation tool for creating lifelike characters, environments, and cinematic sequence

The Browser Lab is an online platform designed to test and visualize 3D scenes directly in the browser. Built with Three.js, it provides a streamlined environment for developers and designers to experiment with 3D models, lighting setups, animations, and rendering techniques without the need for local setup or installations. <h3>Key Features:</h3><ul><li>Three.js Integration: Fully supports Three.js, allowing seamless testing of 3D assets and code.</li><li>Real-Time Previews: View changes instantly as you tweak materials, lighting, or camera settings.</li><li>Customizable Environment: Experiment with various rendering options, including shadows, textures, and post-processing effects.</li><li>Browser-Based Access: No installation required; accessible directly via any modern web browser.</li><li>Collaboration Tools: Share your work and collaborate with others through easy link-sharing.</li></ul><h3>Ideal Use Cases:</h3><ul><li>Testing and debugging Three.js scenes quickly and efficiently.</li><li>Experimenting with different 3D setups and rendering techniques.</li><li>Prototyping 3D designs for web projects without a heavy local development setup.</li></ul><h3>Why Use This Tool?</h3>The Browser Lab simplifies the workflow for Three.js developers by providing a fast, accessible, and feature-rich platform for testing and visualizing 3D scenes directly in the browser.

The Browser Lab

A browser based platform for testing and visualizing 3D scenes, fully integrated with Three js

The Three.js GPU PathTracer is an advanced rendering library built for Three.js that leverages GPU acceleration to enable real-time path tracing in the browser. It uses WebGL and compute shaders to deliver highly realistic lighting, shadows, and reflections at impressive speeds, even for complex 3D scenes. <h3>Key Features:</h3><ul><li>GPU Acceleration: Utilizes WebGL and compute shaders to achieve high-performance path tracing.</li><li>Real-Time Rendering: Enables interactive experiences with dynamic, photorealistic visuals.</li><li>Advanced Lighting Effects: Simulates global illumination, soft shadows, and light scattering.</li><li>Material Support: Includes emissive, reflective, refractive, and volumetric material rendering.</li><li>Three.js Integration: Fully compatible with Three.js, making it easy to integrate into existing projects.</li></ul> <h3>Ideal Use Cases:</h3><ul><li>Real-time 3D applications requiring high-quality lighting.</li><li>Photorealistic rendering for games, simulations, or architectural visualization.</li><li>Interactive experiences with complex lighting and material effects.</li></ul> <h3>Why Use This Tool?</h3>The Three.js GPU PathTracer brings cutting-edge path tracing capabilities to the browser, enabling developers to achieve stunning visual fidelity while maintaining real-time interactivity.

Three.js GPU PathTracer

A GPU accelerated path tracer for Three.js, offering real-time, photorealistic lighting and shadows.

The THREE.js PathTracing Renderer is a powerful tool for creating photorealistic 3D scenes in the browser using Three.js. It utilizes advanced path tracing techniques to simulate realistic lighting and shadow behavior. <h3>Key Features:</h3><ul><li>Realistic Lighting and Shadows: Simulates the natural behavior of light, including global illumination and soft shadows.</li><li>Reflections and Refractions: Accurately renders reflective and transparent surfaces for added realism.</li><li>WebGL-Powered: Optimized for browser-based 3D graphics with high performance.</li><li>Emissive and Glossy Materials: Supports a variety of material types to enhance visual fidelity.</li><li>Volumetric Effects: Adds depth and atmosphere to your scenes with volumetric lighting and fog.</li><li>Three.js Integration: Seamlessly integrates into Three.js projects, extending its capabilities for rendering.</li></ul><h3>Ideal Use Cases:</h3><ul><li>Architectural visualization with realistic lighting.</li><li>Photorealistic 3D scenes and animations.</li><li>Interactive 3D environments with advanced rendering effects.</li></ul><h3>Why Use This Tool?</h3>Whether you are experimenting with cutting-edge rendering techniques or building production-quality 3D experiences, the THREE.js PathTracing Renderer empowers developers to achieve high-quality visuals directly in the browser

THREE.js PathTracing Renderer

A Three.js-based path tracing renderer for realistic lighting, shadows, and reflections in web 3D

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

Womp is a user-friendly platform for designing, sharing, and collaborating on 3D models directly in your browser. It combines intuitive tools with powerful features, making 3D creation accessible to both beginners and professionals. <h3>Key Features:</h3><ul><li>No Experience Needed: Simple interface suitable for all skill levels.</li><li>Collaborative Workflows: Share and edit projects with teammates in real time.</li><li>Browser-Based: No downloads required; create 3D models directly online.</li><li>Seamless Sharing: Export and share your 3D creations effortlessly.</li></ul>Womp is perfect for designers, developers, and enthusiasts looking for a straightforward way to create 3D models for various applications.

Womp

Threejs image effect using custom shaders , merging WebGL and html images. This tutorial covers advanced techniques like wave animations, magnet effects, and scaling on hover, making it perfect for developers looking to elevate their frontend skills with WebGL and Three.js. Includes project boilerplate for hands-on learning.

threejs image wave effect 

Recreate the webgl image effects on taotajima.jp website using threejs and custom glsl shaders

Upload your assets in a variety of formats, including&nbsp;GLTF, USD, FBX and VRM. We prepare them for various usecases using our state-of-the-art optimization pipeline.You can embed them in your website, share links with others, or download them for further use. The web is all about performance. Our pipeline automatically generates&nbsp;multiple levels of detail for meshes and textures, and loads them only when needed. This way, your users get the best experience, no matter the device.Our optimization presets allow you to choose what's right for your project: from&nbsp;hero assets&nbsp;for product showcases, to&nbsp;scene props&nbsp;that are part of a complex assembly.

Needle Cloud

Upload, share and optimize 3D files and host your spatial web apps.

ason Sturges' Three.js Low Poly project showcases the creation of low-poly 3D models and scenes using Three.js. It serves as a creative example of how to use the Three.js library to build visually striking, yet minimalistic 3D art with simple geometric shapes and textures. <h3>Features:</h3><ul><li>Low-Poly Art: Focuses on creating stylized, polygonal art with a low-poly aesthetic.</li><li>Three.js Integration: Demonstrates how to implement Three.js to build and render low-poly scenes.</li><li>Interactive Elements: Includes interactive 3D models and environments, allowing users to explore and engage with the art.</li></ul>This project is ideal for developers and designers interested in combining low-poly art styles with interactive 3D web experiences.

Three low poly

Jason Sturges' Three.js Low Poly project showcases the creation of low-poly 3D

In this article, Dive into WebGPU - Part 3, OkayDev continues its in-depth exploration of the WebGPU API, focusing on how developers can leverage the new graphics technology to build high-performance, low-level 3D applications directly in the browser. The series provides valuable insights and practical examples for developers interested in working with WebGPU. <h3>Key Highlights:</h3><ul><li>Detailed explanations of WebGPU’s architecture and how to interact with it.</li><li>Practical examples to guide developers through the process of creating 3D scenes and rendering techniques.</li><li>Covers optimization tips for improving performance with WebGPU.</li></ul>This article is a great resource for developers who want to get a deeper understanding of WebGPU and harness its power for building cutting-edge graphics applications in the browser.

Into WebGPU

The WebGPU Raytracer project on GitHub provides a WebGPU-based ray tracing engine, designed for high-performance real-time rendering in web browsers. It utilizes the WebGPU API to harness modern GPU capabilities for ray tracing, offering a significant performance boost over traditional methods. <h3>Features:</h3><ul><li>Implements ray tracing techniques using WebGPU for fast, hardware-accelerated rendering.</li><li>Compatible with modern web browsers supporting the WebGPU API.</li><li>Offers realistic lighting, shadows, and reflections with minimal setup.</li><li>Provides source code examples to help integrate ray tracing into web applications.</li></ul>This library is ideal for developers exploring next-gen graphics rendering techniques on the web, particularly those looking to take advantage of WebGPU’s capabilities for real-time ray tracing.

Webgpu Raytracer

The WebGPU Raytracer project on GitHub provides a WebGPU-based ray tracing engine.

The TinyBVH library by J. Bikker is a lightweight and efficient implementation of a Bounding Volume Hierarchy (BVH) for accelerating ray tracing and collision detection. It is designed to be compact and fast, making it ideal for performance-critical applications. <h3>Features:</h3><ul><li>Simple and minimalistic design for ease of integration.</li><li>Optimized for ray tracing and spatial queries.</li><li>Compact memory footprint suitable for resource-constrained environments.</li><li>Written in C++ with straightforward usage examples.</li></ul>TinyBVH is a great choice for developers working on projects that require efficient spatial partitioning, such as real-time ray tracing, physics simulations, or 3D visualization tools.

Tinybvh

TinyBVH: A Minimal Bounding Volume Hierarchy Library

Codevember 2021 is a creative coding showcase by Spite, featuring mesmerizing 3D experiments and visual art created with WebGL and Three.js. Each piece demonstrates innovative techniques and artistic use of code to produce dynamic, interactive visuals. <h3>Highlights:</h3><ul><li>A collection of unique 3D and generative art pieces.</li><li>Showcases advanced WebGL and Three.js capabilities.</li><li>Inspires developers and designers to explore creative coding.</li></ul>This project is a great resource for anyone interested in the intersection of art and technology, offering insights into pushing the boundaries of 3D web graphics.

Codevember 2021 by Spite

Codevember 2021 is a creative coding showcase by Spite

The Denoiser repository by Dennis Smolek provides a post-processing utility for reducing noise in 3D renderings within Three.js projects. It is especially useful for improving the visual quality of path-traced or ray-traced scenes by smoothing out noisy artifacts. <h3>Features:</h3><ul><li>Implements efficient denoising techniques to enhance rendering clarity.</li><li>Customizable parameters to balance performance and quality.</li><li>Designed for seamless integration with Three.js workflows.</li></ul>This tool is a valuable resource for developers aiming to produce high-quality 3D visuals with reduced noise in their real-time or offline rendering projects.

Denoiser

The Denoiser repository by Dennis Smolek provides a post-processing utility.

Needle Cloud is a platform designed to host and share interactive 3D web experiences. It provides tools for developers and creators to deploy, showcase, and manage 3D projects directly on the web, with a focus on streamlined workflows and performance. <h3>Features:</h3><ul><li>Simple Deployment: Upload and host 3D content effortlessly.</li><li>Optimized Performance: Ensures smooth rendering for interactive experiences.</li><li>Collaboration Tools: Share projects easily with teams or clients.</li><li>Customization Options: Tailor the experience to suit your needs.</li></ul>Needle Cloud is perfect for developers looking to bring their 3D creations to life and make them accessible to a global audience.

Needle Cloud is a platform designed to host and share interactive 3D web experiences.

hex-to-gsl

AR and 3D configurator generator tools by us🤩💎 🌟Exciting News for Product Designers, Startups, and Software Companies! 🌟 We’ve developed a cutting-edge tool using Threejs and web-based AR technology that allows users to create interactive 3D configurators and AR experiences for their products—without any coding knowledge!🎥 In this video, I’ll be showcasing our dashboard and its incredible features:💎Lighting and Shadows customization💎Environment settings💎Material, Texture, and Color adjustments💎Transform💎Adding multiple models simultaneously💎Publish Link feature for easy embedding in websites via iFrame.This tool is ideal for launching startups, enhancing software company offerings, and creating innovative marketing campaigns.If you’re interested in purchasing the source code or ordering custom 3D design, animation, simulation, or web programming projects, feel free to contact me.💚WhatsApp :00989120067829💚Email : <a href="mailto:shahbazi.parisa10@gmail.com" rel="noopener noreferrer" target="_blank">shahbazi.parisa10@gmail.com</a>🙏🏻 Revolutionize how you present and customize products online—don’t miss out, watch the full video now!<a href="https://www.linkedin.com/feed/update/urn:li:activity:7244334215956221952/" rel="noopener noreferrer" target="_blank">https://www.linkedin.com/feed/update/urn:li:activity:7244334215956221952/</a>

AR and 3D configurator generator tools

AR and 3D configurator generator tools by us🤩💎 🌟   Product Designers, Startups, ...

<a href="https://x3js.com/en" rel="noopener noreferrer" target="_blank">X3JS Three.js Game Engine</a> empowers developers to create high-quality and fast-working web games, whether they know how to code or not, and all without any costs. It removes the burden of managing hosting expenses for your game assets and files. By leveraging our platform, developers can directly publish their games in front of audience.

X3JS

We ❤️ Three.js and X3JS is a browser-based game engine built on Three.js

This captivating phenomenon creates a&nbsp;stunning optical effect&nbsp;that adds a touch of enchantment to your r3f projects, especially for sun lights.&nbsp;Ultimate Lens Flare&nbsp;creates mesmerizing circular or hexagonal bursts of light. Embrace the magic and elevate your projects with this unique and alluring effect. This captivating optical innovation introduces a new dimension to your content, amplifying its visual impact and captivating your audience. Unlock a world of possibilities with Ultimate Lens Flare's intuitive interface. Seamlessly adjust parameters such as brightness, star points, glare size, ghosts, burst and much more, while real-time previews allow you to see the impact of your adjustments instantly. Embrace your creativity and effortlessly bring your artistic vision to life.

Ultimate Lens Flare for React Three Fiber

A Post processing effect for React Three Fiber, Ultimate Lens flare adds the optical aberration.

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.

Procedurally generated low poly parametric modeling for Three.js. Example scenes:<ul><li><a href="https://jasonsturges.com/three-low-poly/scenes/library" rel="noopener noreferrer" target="_blank">Library</a>: Procedural modeling of 6,000 books, each with unique shape and color</li><li><a href="https://jasonsturges.com/three-low-poly/scenes/mad-science" rel="noopener noreferrer" target="_blank">Mad Science Laboratory</a>: Example scene using parametric models</li></ul> NPM Package install:npm i three-low-poly

Three Low Poly

Parametric low poly modeling for Three.js

Adobe Substance 3D AssetsAdobe Substance 3D Assets offers a vast library of high-quality 3D materials, models, and lighting setups for use in 3D design projects. These resources are optimized for creating photorealistic and visually striking content in various applications. <h3>Highlights:</h3><ul><li>Extensive collection of customizable 3D materials.</li><li>Ready-to-use models and textures for diverse industries.</li><li>Seamless integration with Adobe Substance tools and other 3D platforms.</li></ul>This asset library is an invaluable resource for designers and developers looking to streamline their workflows and elevate the quality of their 3D creations.

Substance3d

Adobe Substance 3D Assets offers a vast library of high-quality 3D materials.

Physijs: Physics Engine for Three.jsPhysijs is a physics plugin designed to integrate seamlessly with Three.js, enabling realistic physics simulations in 3D web applications. It allows developers to add dynamic behaviors like collisions, gravity, and object interactions to their scenes without complex setup. <h3>Features:</h3><ul><li>Easy-to-use physics library built on top of Three.js.</li><li>Support for rigid body dynamics, collisions, and constraints.</li><li>Lightweight and optimized for real-time performance.</li><li>Simple API for defining physical properties such as mass, friction, and restitution.</li></ul>Physijs is perfect for games, simulations, or any project requiring realistic physical interactions in a Three.js environment.

Physijs

Physijs is a physics plugin designed to integrate seamlessly with Three.js

Wiggle Tool for Three.js The Wiggle Tool is a handy utility for adding dynamic motion effects to objects in Three.js. It simplifies the process of creating smooth, natural-looking animations, such as shaking, oscillating, or bouncing movements, with minimal setup. <h3>Features:</h3><ul><li>User-friendly interface for configuring motion parameters.</li><li>Real-time previews to test and refine animations.</li><li>Easy integration into Three.js projects with generated code snippets.</li></ul>This tool is ideal for developers looking to enhance their 3D scenes with playful and interactive motion effects.

Wiggle

The Wiggle Tool is a handy utility for adding dynamic motion effects to objects in Three.js.

Franky Arkon shares a detailed guide on creating realistic yet performant water wave effects in Three.js. The blog covers a step-by-step process to achieve visually stunning water surfaces optimized for real-time applications. <h3>Key Highlights:</h3><ul><li>Shader Techniques: Explanation of custom vertex and fragment shaders for simulating dynamic wave motion.</li><li>Performance Optimization: Strategies to balance visual quality with rendering speed, ensuring smooth performance.</li><li>Practical Examples: Clear code snippets and visuals to help developers integrate the effect into their projects.</li></ul>This tutorial is an excellent resource for anyone looking to add lifelike water simulations to their 3D applications while keeping performance in check.

Realistic and Fast Water Waves

Shader Techniques: Explanation of custom vertex and fragment shaders for simulating dynamic wave mot

The three-volumetric-clouds GitHub repository provides a solution for creating realistic and volumetric clouds in applications using the Three.js library. It is a library that provides dynamic, visually stunning cloud simulation, adding depth and realism to 3D scenes. FeaturesIt includes real-time rendering of clouds that can change dynamically according to scene settings. The clouds are highly customizable, allowing developers to adjust parameters like density, scale, and movement to fit their project needs. BenefitsThis library amplifies the 3D with the easy incorporation of clouds that would interact well with lighting for an immersive experience. It is perfect for gaming applications, simulations, and virtual landscapes. The repository is clear about how to use this and includes examples that could be followed by developers for seamlessly incorporating volumetric clouds into their projects.

Three volumetric clouds

The three-volumetric-clouds library enables realistic, dynamic cloud effects in Three.js projects, w

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.

3D web app that combines the Spotify API and Three.js. It displays my recently played and currently playing songs in a 3D environment.<ul><li>You can add songs directly to my listening queue.</li><li>You can also contribute to a public playlist created by the community.</li></ul>Here’s a quick recording of it in action. I’d love to hear your thoughts or suggestions for new features. Feel free to add some songs to the public playlist.demo link:&nbsp;<a href="https://spotify-woad-delta.vercel.app/" rel="noopener noreferrer" target="_blank">https://spotify-woad-delta.vercel.app/</a>repo link:&nbsp;<a href="https://github.com/radegast0/spotify" rel="noopener noreferrer" target="_blank">https://github.com/radegast0/spotify</a>The project is open source and available on my GitHub. If you'd like to provide feedback, I’d love to hear your criticisms.

Spotify woad delta

displays recently played and currently playing songs on spotify

Starter repo for VITE + REACT + TS + GLSL in React Three Fiber

VITE + REACT + TS + GLSL- Starter

Starter repo for VITE + REACT + TS + GLSL

The GitHub repository three-good-godrays provides an implementation of high-quality volumetric light scattering effects, often referred to as "god rays," for use in Three.js projects. This library is optimized for real-time rendering, making it suitable for interactive 3D applications. <h3>Features:</h3><ul><li>High-Quality Volumetric Lighting: Realistic god ray effects that enhance the visual depth of scenes.</li><li>Customizable Parameters: Control over intensity, decay, density, weight, and exposure to fine-tune the effect.</li><li>Integration with Three.js: Easy to use with existing Three.js setups.</li><li>Performance Optimizations: Designed for smooth performance even in complex scenes.</li></ul><h3>Usage:</h3>The repository includes examples and documentation to help developers quickly integrate the god rays effect into their projects. It's particularly useful for adding dramatic lighting effects in games, simulations, or visualizations.This library is a valuable resource for Three.js developers looking to elevate their projects with stunning volumetric light effects.

Three good godrays

Good godrays effect for three.js using the pmndrs postprocessing library

The Three.js and TypeScript Tutorials by Sean Bradley offer a comprehensive guide to creating interactive 3D content on the web using Three.js and TypeScript. These tutorials are designed to help developers of all levels build and understand 3D projects effectively. Course Access:The course is accessible through two platforms:<ul><li>Udemy: A structured course format with video lectures and resources.</li><li>YouTube Membership: Access to video content through Sean Bradley's YouTube channel.</li></ul>Discount coupons for the Udemy course are available on the official website. Course Overview:The tutorials cover a wide range of topics, including:<ul><li>Setting Up the Development Environment: Guidance on installing necessary tools and creating a project boilerplate. </li><li>Core Three.js Concepts: In-depth explanations of scenes, cameras, renderers, and the animation loop. </li><li>Object3D and Hierarchies: Understanding the Object3D class and its role in creating complex 3D structures. </li><li>Geometries and Materials: Exploration of various geometries and materials to create diverse 3D objects. </li><li>Lighting and Shadows: Techniques for implementing realistic lighting and shadow effects.</li><li>Loading Assets: Methods for importing and managing 3D assets within a project.</li><li>Physics Integration: Incorporating physics engines like Cannon.js for realistic object interactions. </li><li>Advanced Topics: Topics such as environment maps, raycasting, and animations.</li></ul>

sbcode.net

The Three.js and TypeScript Tutorials by Sean Bradley offer a comprehensive guide.

Welcome to CuboVerse (a combination of the Spanish word "cubo" (meaning "cube") and the English word "universe" (meaning "universe"), i.e., "the universe of cubes") — an innovative web application showcasing the power and flexibility of Three.js and Vue.js! ✨ CuboVerse is a unique interactive 3D platform built with JavaScript, Vue.js and Three.js, where you can dive into the world of interactive and dynamic cubes. Control models, explore various textures and colors, and watch the smooth rotation of objects on different orbits in real-time. 🚀 What to expect in this project:<ol><li>Models for every taste: solid colors, complex textures, and their combinations 🎨🖼️</li><li>Smart controls: scale, rotate, and adjust 3D objects as you like 🔄🔍</li><li>Multi-level composition: three cube models moving in complex orbits create a dynamic and engaging scene 🪐🌟</li></ol> Technologies used:&nbsp;<ul><li>Three.js for advanced 3D graphics 🌐</li><li>Vue.js + VueX for state management and responsive interface 🌍</li><li>Vue i18n — multi-language support for a global audience.</li><li>JavaScript for dynamic interaction 💻</li><li>Google Search Console &amp; Analytics for performance optimization, SEO and analytics 📈</li></ul> CuboVerse is an original project that showcases the capabilities of modern web technology. Explore the world of CuboVerse and experience the power of 3D graphics right in your browser!

CuboVerse

CuboVerse - Interactive 3D Universe on Three.js and Vue.js 🌐🧊

Unlike other tools that can distort meshes our advanced compression technology reduce file sizes by up to 90% without removing vital details from the mesh, ensuring your models stay perfectly intact.Whether you’re working with high-poly models or intricate designs, our technology speeds up loading times and saves up to 80% in bandwidth, making it easier to share complex geometries and textures.Perfect for designers and developers aiming for smooth workflows and flawless project performance! Boost your 3D projects with our powerful 3D converter!

Objectverse Converter

Optimise your 3D assets for Spatial Web, Gaming, AR/VR experiences

3D Assets

Тhis project provides online and offline Three.js-based generators of free 3D assets.

A React Three Fiber starter kit to &nbsp;to get you started!

r3f-drei starter

TinyGLB allows you to share and embed GLB models simply and quickly. Upload your 3D model and instantly get a custom web page to share or embed within a website.

TinyGLB

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

R3F Flow Field Particles Component

A particle system based on GPGPU, running with React Three Fiber

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.

Shader Learning is an interactive platform designed to teach and enhance shading skills through problem-solving. It offers a variety of modules that cover essential topics in shader programming, including:<ul><li>Built-in Functions: Understanding fragment shaders and exploring GLSL functions.</li><li>Image Manipulation with Shaders: Techniques for manipulating 2D images using fragment shaders.</li><li>Vertex Transformations: Comprehensive insights into vertex shaders and their role in the graphics pipeline.</li><li>Lighting Basics: Fundamental lighting models for simulating realistic effects.</li><li>Shadow Mapping: Techniques for creating realistic shadows in real-time rendering.</li><li>Signed Distance Fields: Rendering smooth and detailed shapes using distance functions.</li><li>Noise: Various algorithms for creating visual effects.</li><li>Water: Techniques for visualizing realistic waves, reflections, and refractions.</li><li>Ray Tracing: Simulating the physical behavior of light to create highly realistic images.</li></ul>Each module consists of tasks that combine theoretical explanations with practical exercises, facilitating hands-on learning. Users have praised the platform for its balanced approach and effectiveness in improving shader programming skills. Shader Learning offers various subscription plans, including one-month, two-month, and three-month options, providing access to all tasks during the subscription period. The platform emphasizes accessibility and encourages donations to keep its resources available to learners worldwide.

Shader learning

Shader Learning is an interactive platform designed to teach and enhance shading skills through probl

TSL Textures is a collection of procedural textures created using Three.js Shading Language (TSL). These textures are generated in real-time on the GPU, allowing for dynamic and efficient rendering in 3D applications.

tsl textures

TSL Textures is a collection of procedural textures created using Three.js Shading Language (TSL).

Build Interactive 3D CAD&nbsp;Applications We’re thrilled to announce the release of a new open-source NPM package for one of the most popular game engines on the web - ThreeJS. This package helps in creating 3D CAD applications by using our core technology stack. Access advanced geometry kernels and share your designs with the world. With this package, you’ll gain access to the code powering <a href="https://bitbybit.dev/" rel="noopener noreferrer" target="_blank">https://bitbybit.dev</a> platform. Live Demo:<a href="https://app-store.bitbybit.dev/patterns/" rel="noopener noreferrer" target="_blank">https://app-store.bitbybit.dev/patterns/</a>NPM Package:<a href="https://www.npmjs.com/package/@bitbybit-dev/threejs" rel="noopener noreferrer" target="_blank">https://www.npmjs.com/package/@bitbybit-dev/threejs</a>Demo Source Code:<a href="https://github.com/bitbybit-dev/app-examples/blob/main/webpack/threejs/src/code/patterns.ts" rel="noopener noreferrer" target="_blank">https://github.com/bitbybit-dev/app-examples/blob/main/webpack/threejs/src/code/patterns.ts</a> We’ve included helper functions to seamlessly convert shapes from OpenCascade and JSCAD geometry kernels into ThreeJS meshes. This makes it simple to build complex designs for 3D printing, automotive, AEC, and many other industries. Additionally, you can enable users to download STEP files, an industry-standard format that can be further edited in software like FreeCAD. Read more on our blog post:<a href="https://bitbybit.dev/blog/threejs-support" rel="noopener noreferrer" target="_blank">https://bitbybit.dev/blog/threejs-support</a>

CAD npm package for threejs by bitbybit.dev

3D CAD algorithms of bitbybit.dev for ThreeJS developers. Powerful geometry kernels for your apps.

<h2>What is Mattercraft?</h2> Mattercraft is a visual 3D content development platform designed to bridge the worlds of web, AR, VR, WebXR, 3D and game development. Perfect for web developers familiar with Three.js who are looking for a visual editor or game developers venturing into building web-based experiences. Mattercraft offers an intuitive, powerful development environment for building rich interactive content. Built with Three.js at the core, Mattercraft makes it easy to design, preview and publish dynamic 3D experiences without complex hand-coding. Its user-friendly interface lets you visually construct scenes, animations, physics, particles and interactions, while leveraging the best features on the web. <h2>Features</h2> <h3>Visual animation system</h3>Mattercraft features a rich and innovative animation system that includes layers, timelines and states. Unlock your creativity with keyframe support, custom curves, seamless interpolation transitions and 3D model animations. Craft unique animations effortlessly, redefining the way you bring your 3D web content to life. <h3>Realtime&nbsp;physics</h3>Experience cutting edge realism using the web optimised Havok physics engine, all managed via the interface for a simple and easy to use development process. <h3>Particle&nbsp;effects</h3>Take your experiences to the next level with particle effects. Choose from one of 6 pre-built effects or create your own. <h3>Augmented Reality</h3>Seamlessly develop immersive world, face, and image tracked augmented reality content. <h3>Visual Positioning System</h3>Mattercraft’s integration with Immersal empowers you to create immersive indoor and outdoor 3D environments with zero code, using the world’s most versatile and accurate Visual Positioning System (VPS). <h3>Headset&nbsp;support</h3>Effortlessly create Mixed and Virtual reality content (WebXR) for leading headsets such as Apple Vision Pro, Meta Quests, Magic Leap, and Zapbox. <h3>Seamless Scripting</h3>Mattercraft leverages Monaco, the excellent text editor from Visual Studio Code, to provide a delightful and responsive coding experience with a TypeScript compiler. <h3>Responsive UI with HTML</h3>Easy to build 2D screen UI. Making use of web standards (HTML and CSS). <h3>NPM</h3>Mattercraft lets you leverage your existing expertise and tooling, including full integration with the NPM repository of JavaScript libraries. <h3>Instant&nbsp;live preview</h3>Review your experiences with a single click and see real-time updates or make use of the built-in simulator to preview your content on different device sizes and network connections. <h3>One click publishing</h3>When hosting with Zapworks, you can instantly publish as many times as you need. Get your content into the hands of your users as soon as possible with no review times. <h3>Multi-user collaboration</h3>Develop collaboratively with multiple team members, Google docs style. <h3> </h3>

Mattercraft

Mattercraft is a visual editor perfected for building interactive 3D, AR, VR and WebXR experiences. 

WebGLStudio (formerly known as WebGLStudio) is a platform to create interactive 3D scenes directly from the browser.It allows to edit the scene visually, code your behaviours, edit the shaders, and all directly from within the app.

webglstudio

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

Gianluca Lomarco

<h3>You already know Threlte</h3>Threlte puts the simplicity of Svelte and all of the power of Three.js right at your fingertips. It's designed to be powerful and flexible while still being approachable and easy to use. <h3>Reimagine the Web</h3>With AR and VR picking up steam, the web is becoming more and more 3D. Threlte provides a simple, declarative API for creating 3D content on the web. <h3>Powerful Integrations</h3>Threlte comes with integrations for physics, animation and 3D model loading.

Threlte

Have you ever experienced a sense of disorientation while watching a movie, especially during moments of high tension or panic? As if the space around the protagonist starts to twist and turn, creating an almost vertiginous effect? This is the famous Dolly Zoom, also known as the Vertigo Effect. First appearing in Alfred Hitchcock’s masterpiece “Vertigo,” this cinematic technique continues to be widely used today in films, animations, advertisements, and video games due to its power to convey strong emotions. What is the Dolly Zoom?

From Perspective to Orthographic Camera in Three.js with Dolly Zoom — Vertigo Effect

A short article showing how to implement a Dolly Zoom effect in three.js

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

What is the Glossy Spheres in Three.js Tutorial?The Glossy Spheres in Three.js tutorial by Pierfrancesco Soffritti provides a comprehensive guide for creating highly realistic, glossy sphere effects in Three.js. This tutorial walks developers through the techniques for achieving reflective, polished surfaces on 3D objects, making it an invaluable resource for those aiming to add a touch of realism to their 3D scenes. It covers practical steps and shader adjustments, allowing you to produce eye-catching visuals with ease.Key Features:<ul><li>Step-by-Step Guidance: The tutorial breaks down each stage of the process, making it easy to follow for beginners and intermediate users.</li><li>Realistic Reflections: Learn to create glossy surfaces with accurate reflections, ideal for adding depth and realism to your 3D projects.</li><li>Shader Techniques: Delve into shader programming, gaining insights into the underlying techniques that produce realistic lighting and reflections.</li><li>Customizable Parameters: Easily adjust parameters to achieve different levels of glossiness and reflection, giving you creative control over the final look.</li><li>Applicable to Other Shapes: Although the tutorial focuses on spheres, the techniques can be adapted for other objects in Three.js.</li></ul>Why Choose the Glossy Spheres Tutorial?This tutorial is perfect for developers and 3D artists looking to bring a professional, polished look to their web-based 3D scenes. By following the guide, you’ll learn practical methods for achieving realistic reflections, making your Three.js projects more visually engaging and immersive. It’s a great resource to deepen your understanding of shaders and lighting in Three.js.

Glossy spheres 

Glossy Spheres in Three.js – Tutorial for Realistic 3D Reflections

What is MATLIB by GPUOpen?MATLIB by GPUOpen is an extensive material library tailored for 3D artists, designers, and developers, providing a wide range of realistic materials specifically optimized for GPU rendering. This resource, created by AMD’s GPUOpen, offers downloadable materials that can be seamlessly integrated into 3D projects, helping creators achieve photorealistic and dynamic visuals across various rendering engines.Key Features:<ul><li>Diverse Material Selection: Access to a broad array of material types, including metals, plastics, fabrics, and more, designed to suit various 3D applications.</li><li>Optimized for Performance: Each material is crafted to deliver high visual fidelity while remaining optimized for efficient GPU rendering.</li><li>Free to Use: MATLIB’s materials are freely available, making high-quality resources accessible to creators without additional costs.</li><li>Easy Integration: Materials are ready for import into popular 3D software, simplifying the workflow for both beginners and experienced users.</li><li>Consistent Updates: The library is regularly updated with new materials, ensuring users have access to the latest textures and surface types.</li></ul>Why Choose MATLIB by GPUOpen?MATLIB by GPUOpen is perfect for 3D artists who need reliable, realistic materials to bring their scenes to life. With its wide selection and GPU-optimized designs, MATLIB offers a powerful, free resource for enhancing visual quality in real-time and offline rendering projects.

Matlib

MATLIB by GPUOpen – Comprehensive Material Library for 3D Rendering

What is Agora Community?Agora Community is a vibrant platform that offers a vast collection of 3D animation assets and resources, designed for animators of all levels to enhance their creative projects. This platform provides access to high-quality assets, from character rigs to animation references, along with educational content and workshops hosted by industry professionals. Agora is a central resource for animators seeking to refine their skills and collaborate with a like-minded community.Key Features:<ul><li>Diverse Asset Library: A broad range of downloadable 3D assets, including character rigs, props, and environments, to help animators create polished projects.</li><li>Educational Resources: Access to tutorials, workshops, and breakdowns by experienced animators to improve your skills and understanding of animation fundamentals.</li><li>Community Interaction: Join a supportive network of animators, share your work, and receive feedback to accelerate your growth.</li><li>Regularly Updated Content: New assets and tutorials are added frequently, ensuring you stay current with industry trends and techniques.</li><li>Industry Insights: Learn from interviews and insights shared by seasoned professionals, gaining practical knowledge directly applicable to animation projects.</li></ul>Why Choose Agora Community?Agora Community is ideal for animators looking to develop their skills with high-quality resources and guidance from experts. With its extensive library of assets and a supportive community, Agora empowers you to elevate your work and stay inspired in the evolving field of 3D animation.

Agora

Agora Community – High-quality 3D animation assets, resources, and workshops for animators.

Smooth Voxels allows you to turn voxel models into low poly style or smooth organic looking models, mixing materials in one model. Smooth Voxels uses a text format and lends itself fabulously for procedural generation of 3D models, check out the generator in the Playground! Smooth Voxel models can be created in MagicaVoxel, adding smoothing and transformations in the Smooth Voxel Playground. You can exported to .glTF or .glb, or javascript, or generated at runtime using the Open Source Library. Features:<ul><li>For Threejs and A-Frame</li><li>Most Threejs materials and material options</li><li>Multiple matrials in one model</li><li>Tekst based format for easy runtime procedural generation</li><li>Transformations of model parts: translation, rotation, scale</li><li>Deformations of model parts: bend, rotate, sphere, cylinder, cone, ...</li><li>Baked Lighting</li><li>Baked Shadows</li><li>Baked Ambient Occlusion</li><li>Runtime generation using the open source library</li><li>Create animations in the playground</li><li>Export to .glb or .gltf</li><li>Export to Threejs or A-Frame javescript source code</li></ul>

Smooth Voxels

Turn voxels into smooth organic models. Like Markdown for 3D Models. 

<h4>A-Frame – Web Framework for 3D and VR Experiences with Three.js Resources</h4>What is A-Frame?A-Frame is a powerful open-source web framework designed for building 3D and virtual reality (VR) experiences directly in the browser. Built on top of three.js, A-Frame provides an easy-to-use, HTML-like syntax that simplifies the development of immersive 3D applications. It is an excellent resource for developers looking to leverage three.js capabilities while streamlining the process of creating interactive, VR-compatible scenes for web applications, games, and visualizations.Key Features:<ul><li>HTML-Like Syntax: A-Frame uses a declarative, HTML-based syntax, making it easy to build complex 3D scenes and VR experiences without extensive coding knowledge.</li><li>Three.js Integration: As a framework built on top of three.js, A-Frame allows developers to access the full power and flexibility of three.js while simplifying scene setup and management.</li><li>Cross-Platform VR Support: A-Frame supports VR devices such as Oculus, HTC Vive, and mobile VR headsets (e.g., Google Cardboard), enabling developers to create immersive, cross-platform VR experiences.</li><li>Component-Based Architecture: A-Frame’s component system allows for modular development, making it easy to reuse and extend functionalities in your three.js projects.</li><li>Rich Ecosystem: A-Frame has a growing ecosystem of community-created components and resources, providing additional tools for creating animations, physics, interactions, and more.</li><li>Interactive and Responsive: Build interactive 3D environments that respond to user inputs such as clicks, gestures, and controller inputs, enhancing engagement in web-based 3D and VR applications.</li></ul>Why Use A-Frame?A-Frame is an essential resource for developers working with three.js who want to build immersive 3D and VR experiences with ease. Its HTML-like syntax and component-based architecture reduce the complexity of creating VR environments, making it accessible for developers of all skill levels. Whether you are developing educational simulations, games, or interactive web visualizations, A-Frame offers a powerful yet simple way to bring your three.js projects into virtual reality.

Aframe

A-Frame is a web framework for building 3D and VR experiences, ideal for enhancing three.js resource

<h4>Meshy – AI-Generated 3D Models for Three.js Resources</h4>What is Meshy?Meshy is a cutting-edge platform that uses AI technology to generate high-quality 3D models in minutes. It is designed to simplify the process of 3D model creation, making it accessible for developers and designers working with three.js. Meshy offers a wide range of customizable 3D assets that can be easily integrated into web projects, games, and interactive applications, allowing users to expand their three.js resources rapidly and efficiently.Key Features:<ul><li>AI-Powered Model Generation: Meshy uses AI algorithms to generate diverse 3D models quickly, reducing the time and effort needed to create assets from scratch.</li><li>Customizable Models: Adjust parameters to create variations of models that fit your specific needs, ensuring that each asset aligns with your three.js project requirements.</li><li>Multiple File Formats: Export models in popular formats such as OBJ, FBX, and glTF, making it easy to integrate them directly into your three.js scenes.</li><li>High-Quality Outputs: The platform ensures that models are optimized for quality and performance, making them suitable for both real-time rendering and high-end visualizations.</li><li>Library of Assets: In addition to generating models, Meshy offers a growing library of AI-generated assets that can be used to populate your three.js environments.</li><li>User-Friendly Interface: The intuitive interface allows users of all levels to generate and customize models quickly, streamlining the 3D asset creation process.</li></ul>Why Use Meshy?Meshy is a valuable resource for developers and designers working with three.js who want to accelerate the process of creating and integrating 3D models into their projects. Whether you're building interactive web applications, games, or immersive experiences, Meshy’s AI-powered model generation offers a fast, efficient, and scalable solution for expanding your 3D asset library. Its support for multiple file formats and high-quality outputs ensures compatibility and performance across various platforms and projects.

Meshy AI

Meshy offers AI-generated 3D models, perfect for expanding and enhancing three.js resources quickly.

<h4>Model Viewer – Display and Interact with 3D Models for Three.js Resources</h4>What is Model Viewer?Model Viewer is a powerful, easy-to-use web component that allows developers to embed and interact with 3D models on the web without needing extensive coding knowledge. Perfect for use alongside three.js, Model Viewer supports glTF and GLB file formats and includes features like lighting, environment setup, animations, and augmented reality (AR). It is an ideal resource for developers who want to quickly add 3D models to their projects while ensuring compatibility and high performance across devices and platforms.Key Features:<ul><li>Easy Embedding: Model Viewer simplifies the process of embedding 3D models on web pages, making it accessible for developers of all skill levels.</li><li>glTF and GLB Support: The component supports industry-standard 3D formats, ensuring seamless integration with three.js and other 3D frameworks.</li><li>Interactive Features: Includes built-in features like lighting controls, background customization, camera positioning, and object rotation for enhanced interactivity.</li><li>Augmented Reality (AR): Model Viewer supports AR experiences on mobile devices, allowing users to view 3D models in real-world environments through their smartphones.</li><li>Animation Support: Display and control animations within your 3D models, making it ideal for interactive applications like product showcases, visualizations, and games.</li><li>Performance Optimized: Built with performance in mind, Model Viewer ensures smooth rendering and fast loading times, providing a fluid user experience on various platforms and devices.</li></ul>

Modelviewer.dev

Model Viewer is a web component for displaying 3D models, perfect for enhancing three.js resources.

<h3>Company Overview</h3>Peach Worlds is the first no-code builder for 3D websites, empowering designers to effortlessly create immersive, interactive experiences in a fraction of the time. By combining familiar 3D, Motion, and UI tools into one powerful toolset, Peach Worlds acts as a website within a drag-and-drop 3D canvas. We are the future of 3D web design and we are setting a new standard for online presence,<h3> </h3><h3>Technological Overview</h3>Peach Worlds combines cutting-edge 3D technology with an intuitive, no-code website builder, allowing designers to seamlessly integrate 3D elements, motion graphics, and UI components into fully immersive websites. Here’s how Peach Worlds makes it happen: Drag-and-Drop 3D Canvas:<ul><li>A visual workspace where designers can import and manipulate 3D models, set lighting, adjust environments, and apply post-processing effects—no coding required.</li></ul>Keyframe Animation Tools:<ul><li>Easily animate elements and trigger interactions with keyframe-based animations to enhance storytelling and engage users.</li></ul>Integrated UI Editor:<ul><li>Create responsive, visually appealing layouts by blending traditional 2D web design with 3D elements, ensuring seamless scrolling and smooth transitions.</li></ul>Optimized Performance Engine:<ul><li>Peach Worlds uses a custom-built engine and compression tools to optimize 3D models and graphics, ensuring fast load times and smooth performance across devices.</li></ul>Global Hosting with AWS &amp; CDN:<ul><li>Hosted on AWS infrastructure with CloudFront CDN, ensuring low-latency experiences and fast delivery anywhere in the world.</li></ul>With Peach Worlds, designers can focus on their creativity while the platform takes care of the technical complexities—allowing them to build next-level 3D web experiences that perform beautifully.

Peach Worlds

Started as just a little playground for me. I wanted a place to collect various shader effects that I can actually use in real world client projects.All of the code of this website is public so you can see how I am doing this and copy it for your projects.I also made the shaders directly accessible for you to copy or expand on.

real world shader

a collection of shader effects that are actually useful in real world client projects

What is THREE.Interactive?THREE.Interactive is a lightweight library designed to simplify the management of user interactions with 3D objects in three.js scenes. Built on top of three.js, this library enables easy event handling for interactive elements like clicks, hovers, and drags, helping developers create engaging and responsive 3D web applications. It is a perfect resource for anyone working with three.js who needs an efficient way to add user interactions to their projects.

THREE.Interactive

THREE.Interactive simplifies interactive object handling in three.js scenes for better user experien

<h4>Plasticity – Modern CAD Tool for Three.js Resources</h4>What is Plasticity?Plasticity is a cutting-edge CAD (Computer-Aided Design) tool designed for creating precise, high-quality 3D models. With its intuitive interface and advanced modeling capabilities, Plasticity is perfect for developers and designers working with three.js who want to generate detailed 3D assets for their projects. Whether you're building intricate mechanical designs, architectural models, or creative 3D shapes, Plasticity offers powerful tools to bring your concepts to life.Key Features:<ul><li>Advanced CAD Modeling: Plasticity provides robust modeling features that enable the creation of complex, precise 3D geometries, making it ideal for technical designs and highly detailed models.</li><li>Intuitive Interface: The platform is designed for both beginners and experienced CAD users, offering an easy-to-use interface with powerful features that don’t overwhelm.</li><li>Perfect for Three.js Integration: Models created in Plasticity can be exported in formats compatible with three.js, such as OBJ, FBX, and glTF, ensuring seamless integration into your 3D web projects.</li><li>Precision Tools: Utilize advanced tools for exact measurements, boolean operations, fillets, and other CAD-specific functionalities, making Plasticity ideal for projects that require high accuracy.</li><li>Cross-Platform Support: Plasticity works on multiple platforms, allowing you to create and export 3D models regardless of your operating system.</li><li>Optimized Workflow: Plasticity enhances your modeling workflow, allowing for faster prototyping and iteration, saving time when creating assets for three.js scenes.</li></ul>Why Use Plasticity?Plasticity is an excellent resource for developers working with three.js who need precision 3D models for their applications. Whether you’re working on product designs, architectural renderings, or interactive web projects, Plasticity’s combination of ease of use and advanced CAD tools allows you to quickly generate detailed, professional-grade models that can be directly integrated into your three.js scenes.

Plasticity

Plasticity is a modern CAD tool for creating precise 3D models, perfect for three.js

Shaders.app is a powerful, web-based GLSL shader editor that allows developers and designers to create, test, and visualize shaders in real time. Perfectly suited for use with three.js, this interactive tool simplifies the process of creating custom visual effects and animations for 3D projects. Shaders.app is a valuable resource for anyone working with three.js who wants to explore the creative potential of shaders without extensive coding.

Shaders.app

Shaders.app is an interactive GLSL shader editor for creating visual effects in three.js

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

What is LGL Tracer?LGL Tracer is a powerful real-time ray tracing editor that allows developers and designers to create advanced 3D shaders and scenes using ray tracing techniques, perfect for use in three.js projects. With its intuitive visual editor, LGL Tracer helps users generate custom shaders and lighting effects, offering a streamlined way to create complex, photorealistic visuals without the need for deep technical knowledge. This tool is a valuable resource for enhancing the realism and lighting in three.js projects.Key Features:<ul><li>Real-Time Ray Tracing: LGL Tracer enables real-time ray tracing, providing developers with the ability to simulate realistic light behavior, including reflections, refractions, and shadows, directly in their three.js scenes.</li><li>Shader Creation: Use the editor to create and customize complex shaders for materials, surfaces, and lighting effects, elevating the visual quality of your three.js projects.</li><li>Interactive Visual Editor: The intuitive node-based visual editor allows you to easily build and modify shaders without needing to write code, making it accessible for both beginners and experienced developers.</li><li>Seamless Integration with Three.js: Shaders and ray tracing effects created in LGL Tracer can be exported and integrated directly into three.js projects, ensuring smooth and efficient workflows.</li><li>Lighting and Material Optimization: Create realistic materials and control how light interacts with objects in 3D space, making it perfect for enhancing scenes with complex lighting setups.</li></ul>Why Use LGL Tracer?LGL Tracer is a highly useful resource for developers working with three.js who want to introduce advanced lighting, shading, and ray tracing effects into their projects. By simplifying the process of creating realistic materials and lighting effects, LGL Tracer enables developers to focus on the creative aspects of their projects while achieving visually stunning results in their three.js environments.

Lgltracer

LGL Tracer is a real-time ray tracing editor for creating shaders and scenes in three.js 

What is Blender Market?Blender Market is a robust online marketplace that offers high-quality 3D models, textures, shaders, and tools designed for use in Blender but also ideal for developers working with three.js. With a wide selection of assets available, Blender Market helps creators build stunning 3D environments, characters, and objects, which can be exported to formats compatible with three.js. It’s a valuable resource for developers seeking professional-grade assets to enhance their 3D web applications and interactive experiences.Key Features:<ul><li>Premium 3D Models: Access a vast collection of detailed 3D models, from characters and vehicles to environments and props, that can be seamlessly integrated into three.js projects.</li><li>High-Quality Textures and Shaders: The marketplace offers a variety of PBR textures and shaders, allowing for realistic rendering of materials and surfaces in three.js scenes.</li><li>Tools and Add-ons: Enhance your workflow with powerful Blender add-ons and tools that can help streamline the process of creating assets for use in three.js.</li><li>Customizable Assets: Many models and textures are highly customizable, giving developers flexibility when adapting them for use in their projects.</li><li>Multiple File Formats: Blender Market assets can be exported in formats compatible with three.js, such as OBJ, FBX, and glTF, making it easy to integrate them into your 3D web applications.</li></ul>Why Use Blender Market?Blender Market is an excellent resource for developers working with three.js who need professional-grade 3D models, textures, and tools to enhance the visual quality of their projects. Whether you’re building interactive web applications, games, or architectural visualizations, Blender Market provides top-tier assets that can help you save time while delivering high-quality results in your three.js scenes.

Blendermarket

Blender Market offers premium 3D models, textures, and tools to enhance your three.js

<h4>Mixamo – Free 3D Characters and Animations for Three.js Resources</h4>What is Mixamo?Mixamo is a powerful online platform offering a vast library of free 3D character models and animations. Designed for developers and designers working with three.js, Mixamo provides ready-to-use character rigs and animations, making it easy to add lifelike movement and interactivity to your 3D projects. With its user-friendly interface, Mixamo allows you to quickly apply animations to characters and download them in formats compatible with three.js. Key Features:<ul><li>Free 3D Character Models: Access a wide variety of customizable 3D character models, from humans to fantasy creatures, that are ready to be animated and used in three.js scenes.</li><li>Automatic Character Rigging: Upload your custom 3D models and use Mixamo’s automatic rigging feature to create skeletons and joints, ready for animation in minutes.</li><li>Animation Library: Choose from a large selection of pre-made animations, including walking, running, jumping, fighting, and more, which can be easily applied to your 3D characters.</li><li>Seamless Integration with Three.js: Download animated characters in popular formats such as FBX and glTF, ensuring seamless integration into your three.js projects.</li><li>Customizable Animations: Adjust the animation’s speed, timing, and transitions to perfectly fit your project’s needs.</li></ul> Why Use Mixamo?Mixamo is an essential resource for developers and designers working with three.js who want to quickly add high-quality characters and animations to their 3D projects. Whether you’re creating interactive games, simulations, or immersive web experiences, Mixamo provides an easy-to-use platform to animate characters without the need for complex rigging or animation skills. This allows for rapid prototyping and development of lifelike character interactions in your three.js environments.

Mixamo

Mixamo offers free 3D character models and animations, ideal for enhancing three.js resources.

Collection of Three.js Resources
for Building 3D Websites.

Sponsors

UseMockups.com

Newsletter

Collection of Three.js Resources for Building 3D Websites.

Sponsors

UseMockups.com

Newsletter

Collection of Three.js Resources
for Building 3D Websites.