Codrops·1yCreating Stylized Water Effects with React Three Fiber
Learn how to create a stylized water effect using React Three Fiber, focusing on writing shaders, optimizing 3D assets, and maintaining good performance. This tutorial covers the step-by-step process, including creating 3D terrain, setting up the environment, handling materials, and adding dynamic water animation. Additionally, the tutorial touches on incorporating sound for an immersive experience.
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.
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.
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.