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.

Wannathis is a premium 3D asset library offering a wide range of high-quality, stylized 3D models for web development, game design, and Three.js-based projects. The platform provides ready-to-use 3D elements, making it easy for designers, developers, and marketers to enhance their visual content with professional-grade 3D assets. <h4>Key Features</h4><ul><li>Curated 3D Model Library: Access a vast collection of unique, stylized assets.</li><li>Three.js Compatibility: Seamlessly integrate 3D elements into web-based applications.</li><li>Optimized for Performance: Models are lightweight and designed for real-time rendering.</li><li>Categories for Various Use Cases: Includes tech, nature, abstract, and product visualization.</li><li>Commercial &amp; Personal Use: Use assets for branding, presentations, marketing, and UI design.</li></ul><h4>Ideal Use Cases</h4><ul><li>Enhancing Three.js-powered websites with professional 3D visuals.</li><li>Creating eye-catching UI/UX designs with 3D elements.</li><li>Building immersive game environments with high-quality assets.</li><li>Designing 3D product visualizations for eCommerce and branding.</li></ul><h4>Why Choose Wannathis?</h4>Wannathis offers premium-quality 3D models that are both visually appealing and optimized for real-time rendering in Three.js. It’s an ideal resource for developers, designers, and marketers looking to add a professional touch to their 3D projects.

Wannathis

Wannathis: A curated library of high-quality 3D assets for web, games, and Three.js-based projects.

Vectary is an advanced browser-based 3D design platform that enables users to create, customize, and share interactive 3D models and scenes. With its no-code interface, it simplifies 3D content creation for designers, marketers, and developers. Vectary supports Three.js-based projects, making it an excellent tool for creating 3D assets for web applications, AR, and VR. <h4>Key Features</h4><ul><li>Web-Based 3D Editor: No installation required—design directly in your browser.</li><li>Three.js Compatibility: Export and integrate 3D models into web-based 3D projects.</li><li>Customizable 3D Templates: Start quickly with a variety of pre-made designs.</li><li>Real-Time Collaboration: Work on projects with teams in the cloud.</li><li>AR &amp; VR Support: Create assets for augmented and virtual reality experiences.</li><li>Interactive Viewer: Embed 3D models directly into websites with interactive controls.</li></ul><h4>Ideal Use Cases</h4><ul><li>Three.js web development: Easily create and export models for Three.js-based applications.</li><li>Marketing &amp; eCommerce: Build interactive 3D product previews for websites.</li><li>AR/VR Prototyping: Design AR-ready models for mobile and web experiences.</li><li>Education &amp; Design: A perfect tool for beginners and professionals exploring 3D design.</li></ul><h4>Why Choose Vectary?</h4>Vectary is an easy-to-use, web-based 3D design tool that requires no prior 3D modeling experience. Its Three.js compatibility, interactive embedding, and AR/VR capabilities make it a powerful choice for web designers, developers, and content creators looking to enhance their projects with stunning 3D visuals.

Vectary

Vectary: A browser-based 3D design tool for creating, customizing, and sharing interactive 3D conten

3Daily AI3Daily AI is an innovative AI-powered 3D model generation platform that simplifies the creation of high-quality 3D assets for games, web applications, and Three.js projects. By leveraging AI, 3Daily AI can generate realistic 3D objects, textures, and environments in seconds, reducing development time and making 3D content creation accessible to everyone. <h4>Key Features</h4><ul><li>AI-Generated 3D Models: Create realistic assets quickly with minimal effort.</li><li>Three.js &amp; Web Compatibility: Export optimized models for Three.js and web-based 3D experiences.</li><li>Customizable Textures &amp; Materials: Adjust surfaces, lighting, and materials easily.</li><li>Low-Poly &amp; High-Detail Options: Generate assets tailored for performance or realism.</li><li>Game &amp; AR/VR Integration: Seamlessly use AI-generated assets in games, metaverse, and VR/AR apps.</li></ul><h4>Ideal Use Cases</h4><ul><li>Speeding up Three.js-based 3D web development with pre-made assets.</li><li>Generating custom 3D models for game environments and interactive applications.</li><li>Creating quick prototypes for VR, AR, and metaverse experiences.</li><li>Enhancing content creation workflows with AI-powered automation.</li></ul><h4>Why Choose 3Daily AI?</h4>3Daily AI offers a revolutionary approach to 3D content creation, removing technical barriers and allowing developers, artists, and designers to generate stunning 3D assets instantly. Its Three.js compatibility makes it a valuable resource for web-based 3D projects and interactive applications.

3daily

3Daily AI: AI-powered 3D model generation for fast, high-quality assets in web, games, and Threejs.

Cascadeur is a powerful AI-driven 3D character animation software designed to create realistic, physics-based motion for games, films, and web applications. Unlike traditional keyframe animation tools, Cascadeur integrates AI assistance to refine character movements, ensuring natural physics and smooth transitions. It is widely used in game development and Three.js-based projects where high-quality animations are needed. <h4>Key Features</h4><ul><li>AI-Assisted Animation: Automatically enhances animations for realistic motion.</li><li>Physics-Based Movements: Ensures natural character motion with real-world physics simulation.</li><li>Pose and Rigging Tools: Easily pose and animate characters with an intuitive interface.</li><li>Game &amp; Web Integration: Export animations for use in Three.js, Unity, Unreal Engine, and more.</li><li>Motion Editing &amp; Fine-Tuning: Adjust timing, balance, and weight for polished animations.</li></ul><h4>Ideal Use Cases</h4><ul><li>Creating high-quality 3D animations for Three.js web applications.</li><li>Designing realistic character movements for games and interactive media.</li><li>Developing animations for films, cinematic trailers, and motion graphics.</li><li>Enhancing AR/VR experiences with fluid, physics-based character motion.</li></ul><h4>Why Choose Cascadeur?</h4>Cascadeur is a game-changer for animators looking for precision and realism without tedious manual adjustments. With AI-powered physics simulation and Three.js compatibility, it’s an excellent tool for game developers, animators, and 3D web creators seeking lifelike animations.

Cascadeur

Cascadeur: AI-assisted 3D character animation software for physics-based, realistic motion.

PixCapPixCap is a powerful browser-based 3D animation and modeling platform designed for developers, designers, and content creators. It enables users to create, edit, and animate 3D models directly in the cloud without the need for complex software installations. With its Three.js compatibility, PixCap is an excellent tool for web-based 3D experiences, game development, and interactive content creation. <h4>Key Features</h4><ul><li>Cloud-Based 3D Editing: Create and animate models directly in the browser.</li><li>Ready-Made 3D Assets: Access a library of customizable 3D models.</li><li>Three.js &amp; Web Integration: Export assets optimized for Three.js applications.</li><li>Real-Time Animation Tools: Animate 3D characters and objects with intuitive controls.</li><li>Game &amp; AR/VR Compatibility: Easily export models for game engines and immersive experiences.</li></ul><h4>Ideal Use Cases</h4><ul><li>Designing Three.js-powered 3D websites and interactive experiences.</li><li>Creating animated 3D assets for games, social media, and marketing.</li><li>Rapidly prototyping 3D content without requiring advanced modeling skills.</li><li>Enhancing AR/VR applications with lightweight, animated 3D models.</li></ul><h4>Why Choose PixCap?</h4>PixCap simplifies 3D animation and modeling by offering a cloud-based, easy-to-use interface that integrates seamlessly with web technologies like Three.js. Whether you're a game developer, web designer, or content creator, PixCap provides an efficient solution for generating high-quality 3D visuals.

Pixcap

PixCap: Browser-based 3D animation and modeling platform for game, web, and Three.js projects.

3D AI Studio3D AI Studio is an innovative AI-powered 3D model generator designed for web applications, gaming, and interactive experiences. By leveraging artificial intelligence, it simplifies the 3D modeling process, enabling developers and designers to create high-quality assets quickly and efficiently. With seamless Three.js integration, 3D AI Studio is a valuable tool for building immersive web-based 3D environments. <h4>Key Features</h4><ul><li>AI-Generated 3D Models: Create high-quality 3D assets with minimal manual effort.</li><li>Three.js &amp; Web Compatibility: Optimized for use in web-based 3D applications.</li><li>Customizable Models: Adjust textures, materials, and scaling for specific needs.</li><li>Game &amp; AR/VR Ready: Export models for real-time applications in gaming, AR, and VR.</li><li>Cloud-Based Workflow: Generate and edit 3D models directly from the browser.</li></ul><h4>Ideal Use Cases</h4><ul><li>Quickly generating 3D assets for games, websites, and interactive applications.</li><li>Creating models optimized for Three.js-powered web experiences.</li><li>Enhancing AR/VR applications with AI-generated 3D content.</li><li>Streamlining the workflow for developers and designers.</li></ul><h4>Why Choose 3D AI Studio?</h4>3D AI Studio accelerates 3D content creation by combining artificial intelligence with intuitive tools, making it ideal for developers working with Three.js and web-based 3D environments. Whether you're building interactive websites, immersive experiences, or game assets, 3D AI Studio provides an efficient solution for generating high-quality 3D models.

3daistudio

3D AI Studio: AI powered 3D model generation for web, gaming, and Three.js applications.

A series of articles introducing TSL.

Get to grips with ThreeJS Shading Language (TSL)

Tripo3DTripo3D is an advanced AI-powered 3D model generator that enables creators to effortlessly generate high-quality 3D assets for games, AR/VR, and web applications. With its intuitive interface and seamless Three.js compatibility, Tripo3D streamlines the 3D modeling process, making it accessible for developers, designers, and artists alike. <h4>Key Features</h4><ul><li>AI-Driven Model Generation: Automatically generates detailed 3D assets with minimal effort.</li><li>Optimized for Web &amp; Game Engines: Export models for use in Three.js, Unity, Unreal Engine, and more.</li><li>Customizable Outputs: Adjust texture, shape, and scale to fit specific project needs.</li><li>Seamless AR/VR Support: Create interactive models for augmented and virtual reality applications.</li><li>Cloud-Based Workflow: Generate, edit, and export models directly from your browser.</li></ul><h4>Ideal Use Cases</h4><ul><li>Quickly generating game-ready 3D assets.</li><li>Creating 3D content for web applications using Three.js.</li><li>Enhancing AR/VR applications with lightweight, optimized models.</li><li>Streamlining 3D asset creation for developers and designers.</li></ul><h4>Why Choose Tripo3D?</h4>Tripo3D leverages AI to simplify the 3D modeling process, making it faster and more efficient than traditional methods. Its compatibility with Three.js and major game engines ensures that developers can integrate generated assets seamlessly. Whether you’re building interactive web experiences or immersive virtual worlds, Tripo3D provides the tools you need to bring your ideas to life.

Tripo Ai

Tripo3D: AI-powered 3D model generator for game assets, AR/VR, and Three.js web applications.

JSDev Space is a comprehensive platform dedicated to JavaScript developers. Whether you're a beginner or an expert, it offers insightful tutorials, the latest JavaScript news, and in-depth guides to modern frameworks and tools. From mastering ES6 features to exploring cutting-edge web technologies, JSDev Space helps you stay ahead in the fast-evolving world of web development. Join a vibrant community of developers and take your JavaScript skills to the next level!

JSDev Space

JSDev Space delivers JavaScript tutorials, news, and tools to elevate your web development skills.

DreiDrei is an extensive collection of reusable components and helpers built for React Three Fiber, making it easier for developers to create interactive 3D content. Designed to complement Three.js, Drei simplifies common 3D development tasks by providing pre-built tools that save time and effort while ensuring clean and maintainable code. <h4>Key Features</h4><ul><li>Seamless Integration: Works effortlessly with React Three Fiber and Three.js for creating 3D experiences.</li><li>Reusable Components: Includes tools for controls, loaders, geometry, shaders, and more.</li><li>Built-In Interactivity: Simplifies the implementation of advanced interactions like drag-and-drop and click events.</li><li>Flexibility and Modularity: Each component is independent, allowing you to pick and choose what fits your project.</li><li>Extensive Documentation: Features a well-maintained guide with code examples to kickstart your workflow.</li></ul><h4>Ideal Use Cases</h4><ul><li>Building web-based 3D applications with React Three Fiber and Three.js.</li><li>Accelerating the development of 3D scenes and interactive experiences.</li><li>Simplifying complex tasks such as camera controls, loading assets, or adding post-processing effects.</li></ul><h4>Why Choose Drei?</h4>Drei is an essential toolkit for developers using React Three Fiber, offering robust components that enhance 3D workflows. Whether you’re building immersive 3D applications or experimenting with creative Three.js projects, Drei provides the tools to bring your vision to life with minimal coding effort.

Drei

Drei: A collection of reusable helpers for Three.js and React Three Fiber, boosting 3D workflows.

Hi! I'm Bobby Roe, I make videos about coding, art, and technology. I'm here to help you on your coding journey. With over 20 years experience as a creative developer, I've helped thousands learn to code and create art.

Robot Bobby

Creative coding and code art tutorials. Mostly with THREE.js, JavaScript, and shaders.

CreativeDevJobs.com is a job board for creative developers who work with modern visualization technologies. This includes, but is not limited to, technologies such as Three.js, React Three Fiber, WebGL, and various 2D/3D libraries like P5.js, Babylon, Phaser, Unity, and Unreal Engine. The platform also features positions requiring design expertise and animation skills, with technologies ranging from GSAP and Framer to many other creative tools. You can find opportunities across the creative industry, including creative agencies, gaming studios, blockchain projects, and other sectors seeking talent for high-quality interactive websites and visualization tools.

Creativedevjobs

A job board connecting creative developers with companies seeking 3D, animation, and interactive web

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. 

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.