Codrops·46wDeconstructing the 35mm Website: A Look at the Process and Technical Details
A technical breakdown of building an interactive 3D camera website using Three.js, covering edge detection with Sobel operators, mesh highlighting through render targets and raycasting, and scroll-triggered film roll animations. The tutorial demonstrates custom shader development, post-processing effects, and advanced WebGL techniques for creating engaging 3D web experiences.
JavaScript Mastery·1yBuild and Deploy an Awwwards Winning 3D Web Developer Portfolio with React, Three JS & GSAP
Learn to build a visually stunning 3D web developer portfolio using React, Three JS, and GSAP. This guide walks through creating an impressive portfolio with 3D animations, showcasing skills, projects, and experience. It covers integrating 3D models, adding smooth animations, designing with Tailwind CSS, and deploying the portfolio on the web. Whether you are a beginner or an experienced developer, this course will help you improve your portfolio to attract recruiters and clients.
Brad Woods' Digital Garden·47wScroll-driven camera animation
Explore how to create scroll-driven camera animations in a web scene using three.js and GSAP. The technique involves using the intersection observer to adjust camera positions as different sections come into view. Quaternions are utilized for smooth camera rotations, preventing issues like gimbal lock. The setup allows developers to easily configure desired positions with a GUI and handles the transitions using GSAP for animation.
Codrops·43wCoding a 3D Audio Visualizer with Three.js, GSAP & Web Audio API
A comprehensive guide to building an interactive 3D audio visualizer that combines Three.js for 3D rendering, Web Audio API for real-time sound analysis, and GSAP for smooth animations and draggable UI elements. The tutorial covers creating custom GLSL shaders for audio-reactive effects, implementing frequency analysis to drive visual distortions, and building a sci-fi interface with momentum-based interactions. The result is a glowing orb that pulses and morphs in sync with music while users can drag control panels around the screen.
Codrops·1yAnimating Letters with Shaders: Interactive Text Effect with Three.js & GLSL
Learn how to create an interactive text effect using Three.js and custom shaders. This tutorial covers the basics of creating a ShaderMaterial, using raycasting for mouse interactions, and applying a dynamic displacement effect. Enhance the visual experience with shadow effects and experiment with easing functions for smooth transitions.
80 LEVEL·29wDeliver Mail on Tiny Planet in This Relaxing Web Game
Studio abeto released Messenger, a free web-based game built with WebGL and Three.js where players deliver mail on a tiny spherical planet. The relaxing experience features character customization, 3D emoji interactions, and a soothing soundtrack, demonstrating how modern web technologies can create engaging browser-based gaming experiences.
Codrops·1yBuilding an Interactive Image Grid with Three.js
This tutorial guides you through creating a dynamic interactive image grid using Three.js, from grid setup and card initialization to advanced animations and shader effects. It explains the implementation using a pre-prepared repository, detail card position scaling, hover interactions based on mouse positions, and using custom shaders for visual effects. Tips for handling performance and customization options are included to optimize and enhance the grid's appearance and functionality.
Wawa Sensei·41wHow to Create a Minimap in Three.js with React Three Fiber (Drei View)
Learn to create an interactive minimap for 3D web games using React Three Fiber's View component. The tutorial covers setting up multiple camera views within a single canvas, implementing global state management with Valtio to sync character position between main scene and minimap, and adding visual elements like character indicators and zoom controls. The minimap displays a top-down view that follows the player character with optional rotation alignment.
All Frontend·46wJust vibe-coded my portfolio with Cursor AI - would love your feedback! 🚀
The author shares their experience of building a portfolio website using Cursor AI for vibe coding. The website features a modern design, interactive animations, smooth transitions, and is responsive across all devices, utilizing Three.js, framer motion, and Gsap. The author seeks community feedback on the design, UX, performance, and code quality.
iO tech_hub·48wReact three fiber
React three fiber simplifies creating 3D web experiences by using React and Three.js to reduce complexity, such as manually setting up render engines. While it offers powerful features like performance monitoring, HTML integration in 3D space, and physics support through Rapier, it results in a larger bundle size compared to vanilla Three.js. It's optimal for complex projects requiring advanced interactions and XR compatibility, although smaller, static cases might favor Three.js.
Codrops·46w3D Cards in Webflow Using Three.js and GLB Models
A comprehensive guide to creating interactive 3D cards in Webflow by integrating Three.js with GLB models. The tutorial covers the complete workflow from creating 3D models in Blender, setting up Three.js scenes with proper lighting and camera controls, and embedding the functionality into Webflow projects. Each card transforms from a flat UI element into an interactive 3D environment with real-time rendering, orbital controls, and atmospheric lighting effects.
80 LEVEL·43wBeautiful Liquid Glass Effect Made with Three.js
Web developer Faraz Shaikh created a liquid glass effect using Three.js JavaScript 3D library. The effect features smooth drop-like shapes using MeshPhysicalMaterial with ray-marched surfaces built from Signed Distance Fields (SDFs). The demo and source code are available online, showcasing advanced 3D rendering techniques for creating realistic glass materials in web browsers.
Codrops·1yCreating a Generative Artwork with Three.js
Learn how to create a generative artwork inspired by Brazilian artist Lygia Clarke using Three.js and React Three Fiber. The tutorial covers setting up the project, creating and breaking grid systems, adding color palettes, and incorporating a GUI with Leva for interactive controls. The guide provides step-by-step code examples and encourages creative experimentation with various artistic elements.
freeCodeCamp·1yHow to Code a Crossy Road Game Clone with React Three Fiber
Learn how to create a clone of the mobile game Crossy Road using React Three Fiber. This tutorial covers setting up the scene, drawing characters and maps, animating vehicles, and implementing player movement and hit detection. The tutorial also provides guidance on using Vite to initialize the project and incorporating essential components for the game.
Codrops·1yBuilding a Fully-Featured 3D World in the Browser with Blender and Three.js
Explore the process of building an immersive 3D world in the browser using Blender and Three.js. Learn the creative and technical steps involved, from conceptualizing scenes to blocking, sculpting, and adding materials. Discover tips for optimization, texturing, and exporting assets to ensure your web-based 3D environment performs efficiently and looks stunning.
Codrops·17wSpain Collection: Evolving a Luxury Website into a Digital Ecosystem
A detailed case study of redesigning Spain Collection's luxury travel website into a comprehensive digital ecosystem. The project evolved from a single-purpose site into a platform managing 100+ experiences across trips, stays, weddings, and VIP services. The design approach emphasized editorial aesthetics inspired by high-end fashion, implemented through a modular WordPress system with 50+ flexible components. Technical implementation included ACF Flexible Content for content management, GSAP and TaxiJS for animations and transitions, and a custom WebGL/Three.js petal rain effect for the weddings section. The architecture solved complex UX challenges through smart filtering, modal-based navigation, and content correlation across multiple service categories while maintaining visual consistency and scalability.
Codrops·33wInteractive Video Projection Mapping with Three.js
A comprehensive guide to creating interactive video projection mapping effects in the browser using Three.js. The tutorial covers building 3D grids of cubes, applying video textures with custom UV mapping, using mask images to control cube visibility, and implementing smooth transitions between multiple video projections. Includes practical code examples for creating dynamic visual effects that simulate real-world projection mapping on digital surfaces.
Codrops·16wBuilding a Nostalgic 8-bit Universe with Modern Tech: A Vibe Coding Journey
A developer rebuilt their portfolio with an 8-bit retro aesthetic using a 95% AI-driven workflow governed by strict design constraints. The project implements custom pixel mask transitions using Bayer dithering, a singleton PixelationManager for Canvas optimization, and adaptive WebGL quality scaling to maintain 60 FPS. Key techniques include a .cursorrules "Design Constitution" that prevents AI from hardcoding values, atomic component development in Storybook, GSAP ScrollTrigger orchestration, and performance optimizations like offscreen canvas rendering and intersection observers. The approach demonstrates how to maintain design integrity and code quality while leveraging AI for rapid development.
Codrops·1yWebGPU Scanning Effect with Depth Maps
An exploration of a scanning effect using depth maps, custom shaders, and WebGPU rendering with Three.js and react-three-fiber. The demo showcases three variations of the effect by combining depth information with post-processing to create dynamic visual depth. Techniques include image distortion through UV coordinate displacement, procedural dot grid masking, and continuous scan animation using GSAP.
Atomic Spin·29wCreate Sick Web Animations in Three.js with GSAP
Learn how to create smooth web animations using GSAP (GreenSock Animation Platform) with Three.js. The guide covers GSAP installation, basic usage with the gsap.to() function, and demonstrates creating animated 3D objects like a moon sphere. Examples show how to animate position, scale, rotation, and opacity properties with simple one-line commands, including timing delays and chaining multiple animations together.
Collections·33wExploring JavaScript with Three.js: Five Beginner-Friendly Projects
A project-based course covering Five.js fundamentals through five hands-on projects. Learn basic geometry and textures, create interactive 3D globes with GeoJSON data, implement particle effects for fire and smoke, build scroll-triggered animations, and explore physics simulations using the Rapier engine. The course progresses from basic concepts to advanced techniques including shaders and performance optimization, helping build a portfolio of sophisticated 3D web experiences.
Wawa Sensei·43wReal-Time Lipsync for Web: Build AI Chatbots & Games with Wawa-Lipsync (Free & Open-Source!)
Wawa-Lipsync is a new open-source JavaScript library that enables real-time lip synchronization for web applications. Unlike existing solutions that are either expensive or slow, this library analyzes audio frequencies in real-time to generate visemes (visual representations of phonemes) that can animate 2D or 3D characters. The library works by using the browser's analyzer node to detect audio patterns and deduce mouth movements, making it suitable for AI chatbots, games, and interactive web experiences without server-side processing delays.
freeCodeCamp·23wCreative Web Development with Three.js and Blender
A comprehensive 6-hour beginner course covering 3D web development by combining Blender for 3D modeling with Three.js for web integration. Learn to create an immersive 3D portfolio from scratch, starting with Blender fundamentals (modeling characters, trees, environments, textures) and progressing to Three.js implementation (camera controls, lighting, raycasting for interactions, character movement with GSAP, collision detection). Includes practical exercises, code analysis techniques, and deployment guidance using GitHub and Vercel.
Codrops·1yImplementing a Dissolve Effect with Shaders and Particles in Three.js
Learn how to create a dynamic dissolve effect using Three.js shaders and particles. This tutorial covers setting up the environment and lighting, crafting the dissolve effect with Perlin noise, creating a particle system, and applying the Unreal Bloom effect to make the edges and particles glow. Each step is detailed with code snippets and linked to specific commits for easy reference.
LogRocket·51wThree.js vs. Babylon.js: Which is better for 3D web development?
Three.js and Babylon.js are popular libraries for 3D web development, each with distinct approaches. Three.js is a lightweight rendering engine that requires third-party add-ons for advanced features. Babylon.js is a full-fledged 3D engine with built-in systems for physics, animations, and GUIs. The choice between the two depends on whether a developer prioritizes control and minimalism (Three.js) or built-in functionality and ease of use (Babylon.js). Performance tests show that Three.js has lower load times, while Babylon.js offers more stability during interactions. Both libraries have distinct strengths suited for different use cases.