Create a Cute Award-Winning Room Portfolio with Three.js and Blender

Create a Cute Award-Winning Room Portfolio with Three.js and Blender | Beginner Course

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.

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

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

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

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

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

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

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 

Jamir is an online sci-fi <a href="https://jamir.io" rel="noopener noreferrer" target="_blank">browser fps game</a> where you can play in multiple game modes. I have been developing Jamir since 2017 with Three.js and vanilla js.

JAMIR

Jamir is an online sci-fi browser FPS Game purely made with Three.js and vanilla js.

Introducing GoAct: A super easy tool for promotion video creation in the browser ﻿Focus on creating, not on complicated software You can create apple style promotion video with just one click.

goact

A super easy tool to create stunning 3D video in the browser

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>Bezi – No-Code 3D Animation Tools for Three.js Resources</h4> What is Bezi? Bezi is an intuitive, no-code design platform that enables users to create stunning 3D animations and interactive content without the need for coding knowledge. Perfectly suited for designers, developers, and creators working with three.js, Bezi provides a seamless way to craft immersive 3D web experiences with ease. It offers a visual interface, allowing you to focus on creativity while handling the complexity of 3D animations behind the scenes. Key Features:<ul><li>No-Code 3D Animations: Easily create and manage complex 3D animations for your web projects without writing a single line of code.</li><li>Interactive 3D Content: Use three.js resources and tools within Bezi to create interactive 3D elements that bring your websites and apps to life.</li><li>User-Friendly Interface: Bezi’s interface is designed for both beginners and experienced creators, offering an accessible way to design and customize 3D animations.</li><li>Customizable Effects: Bezi offers various pre-built 3D effects, giving you control over animations, transitions, and interactions with minimal effort.</li><li>High-Performance Output: The platform optimizes your 3D content for performance, ensuring smooth experiences across different devices and browsers.</li><li>Cloud-Based Workflow: With everything stored in the cloud, your projects are accessible anywhere, anytime, and there’s no need for installation.</li><li>Export Options: Export your animations and assets in various formats, making it easy to integrate your work into three.js projects or other web applications.</li></ul> Why Use Bezi?Bezi is an excellent resource for developers and designers looking to create 3D animations for their three.js projects without diving into the complexities of coding. Whether you are building interactive 3D websites or adding dynamic visuals to your applications, Bezi simplifies the process, making it a valuable tool in any creator's toolkit.

Bezi

Bezi offers intuitive, no-code tools for designing 3D animations and three.js resources effortlessly

<h4>Endless Tools – The Ultimate Design Multitool</h4> Design-Driven Features and Beyond Endless Tools is the first ultimate design multitool, offering a constantly updated collection of ready-to-use fonts, visual effects, shapes, and 3D objects. Created under meticulous art direction by top designers, this platform gives you everything you need to create professional-grade designs with ease.You can apply any result created in Endless Tools to everyday design tasks, commercial projects, social media content, presentations, and even large-scale media like billboards thanks to its 4K image export capabilities. Whether it's for static imagery or dynamic content, Endless Tools delivers high-quality visuals every time.In addition to saving static images, the platform allows you to create stunning animations with 3D objects, shapes, fonts, and visual effects using a specially designed animation system. This makes it easy to produce engaging visual content quickly. Create Unique User ExperiencesWith the Embed option, you can bring your designs to life by creating interactive elements for your website in minutes. Choose from any font, shape, or visual effect in the collection and embed it directly into your site for an enhanced user experience.Endless Tools also offers a wide range of lifelike textures, unique lettering, captivating 3D designs, and generative graphics, pushing the boundaries of creativity for any designer. Why Use Endless Tools?Whether you’re a designer, content creator, or marketing professional, Endless Tools empowers you to explore limitless creative possibilities. It’s perfect for creating professional designs, from everyday projects to commercial and large-scale campaigns. With its cutting-edge tools and easy-to-use interface, you can quickly craft visually stunning content that stands out.

Endlesstools.io

Endless Tools is a design multitool offering fonts, effects, 3D objects, and high-quality exports.

Three js Rendering