Community Picks·1yThe Best Three.js Resources in One Place
Discover a curated compilation of resources designed for building immersive 3D projects with Three.js. This collection includes tools, tutorials, and libraries to aid in Three.js development, covering areas from shaders and animation to modeling and interactivity.
YouTube·2yBuild a 3D Ecommerce Landing Page with Next.js 14, GSAP, Three.js and Prismic - Full Course 2024
The post details a comprehensive course aimed at building an interactive 3D e-commerce landing page using Next.js, GSAP, Three.js, and Prismic. The project revolves around creating a stunning website for a fictional soda brand named Fizzy. The course covers foundational aspects using Next.js and Prismic for scalability and management, designing with Tailwind CSS, adding animations with GSAP, and incorporating 3D effects with Three.js. The post assures step-by-step guidance for users of all levels, highlighting the customizable nature of the project, and provides resources and support materials.
Wawa Sensei·2yMake a 3D Avatar Builder w/ Threejs and React - Part 5
Part five of the 3D avatar builder tutorial series covers creating a dress from scratch using Blender and making it compatible with the existing character builder framework. It includes steps for generating thumbnails and hiding assets based on other assets, such as preventing outfits from overlapping awkwardly. The tutorial also addresses exporting the dress as a glb file, configuring materials, and ensuring the asset animates correctly. Finally, it discusses updating the UI to reflect asset compatibility constraints, enhancing the user experience by providing visual feedback for locked items.
Community Picks·2yBuilding Real-Time Global Illumination: Part 1
This guide details the foundation of building real-time global illumination using three.js, starting with a 'naive' global illumination approach. The process involves using signed distance functions (SDFs) to draw shapes on the GPU, followed by implementing raymarching to simulate how light interacts with surfaces. The goal is to create realistic lighting effects efficiently on consumer hardware. The post also touches on optimizations, such as the Jump Flood Algorithm (JFA) for distance fields, enhancing the basic raymarching technique.
Threejs Tips and Inspiration·1yThreejs Award Winning Project Breakdown - Windland 3D Digital City - Source code review
Explore the detailed source code review of Windland, an immersive 3D project created with Three.js, covering components like 3D city models, post-processing effects, ambient lighting systems, and particle systems. Stay tuned for a follow-up video on building a night mode.