Search
How to Code a Shader Based Reveal Effect with React Three Fiber & GLSL
2.12.2024
A simple yet cool image reveal effect created with React-Three-Fiber/Drei and animated using Framer Motion
Creating Dynamic Terrain Deformation with React Three Fiber
27.11.2024
An exploration of real-time terrain reshaping through user interactions, using React Three Fiber
How to Code a Subtle Shader Background Effect with React Three Fiber
31.10.2024
Learn how to create an interactive shader background effect using React Three Fiber and Drei in four simple steps
How to Create a PS1-Inspired Jitter Shader with React-Three-Fiber
3.9.2024
Learn how to create a custom jitter shader in React-Three-Fiber, inspired by the visual style of PS1-era games, to add a retro aesthetic to 3D models
Origami: 12 Free Animated 3D Objects
30.7.2024
A set of twelve free 3D animations created with React Three Fiber and GSAP
How to Create a Liquid Raymarching Scene Using Three.js Shading Language
15.7.2024
An introduction to Raymarching using the power of Signed Distance Fields (SDFs) and simple lighting to create a liquid shape effect
Creating an Animated Displaced Sphere with a Custom Three.js Material
9.7.2024
Learn how to create an animated, displaced sphere using custom shaders with Three.js and React Three Fiber
Case Study: ToyFight — 2024
11.6.2024
A snapshot of how the new ToyFight site was designed and developed
Exploring a 3D Text Distortion Effect With React Three Fiber
8.5.2024
A quick tutorial on how to create a beautiful distorted text ring effect in React Three Fiber
Model Texture Transition and Procedural Radial Noise using WebGL
2.5.2024
A WebGL experiment that explores two visual effects: a texture transition on a 3D can model and a procedural radial noise field
Creating an Interactive 3D Bulge Text Effect with React Three Fiber
20.3.2024
Exploring how to generate an engaging bulge effect on text using React Three Fiber
On-Scroll Revealing WebGL Images
7.2.2024
An exploration of on-scroll reveal effects for images in WebGL, using React Three Fiber
3D Glass Portal Card Effect with React Three Fiber and Gaussian Splatting
29.11.2023
Explore the creation of a 3D glass portal with React Three Fiber, with optimized rendering using Gaussian Splatting and integrating real-world objects
Collective #794
28.11.2023
Makereal tldraw * How to scale a large codebase * three-hex-tiling
Progressively Enhanced WebGL Lens Refraction
10.10.2023
Learn how to create a responsive WebGL layout powered by CSS and React Three Fiber
Case Study: Studiogusto
25.4.2023
Get a glimpse of the creative and innovative techniques used by Studiogusto, a dynamic agency, in designing their new website to better reflect their values and showcase their expertise
Recreating a Dave Whyte Animation in React-Three-Fiber
17.12.2020
Learn how to use instanced rendering and post-processing techniques to recreate a hypnotic looping animation with react-three-fiber.
The post Recreating a Dave Whyte Animation in React-Three-Fiber appeared first on Codrops
Creating Mirrors in React-Three-Fiber and Three.js
30.9.2020
A brief walk-through of how to create a mirror scene with react-three-fiber.
The post Creating Mirrors in React-Three-Fiber and Three.js appeared first on Codrops
Scroll, Refraction and Shader Effects in Three.js and React
16.12.2019
Discover how to use react-three-fiber and combine some common techniques to create a Three.js powered layout with shader effects.
Scroll, Refraction and Shader Effects in Three.js and React was written by Paul Henschel and published on Codrops
Collective #574
16.12.2019
Happy Hues * JavaScript Visualized * Styled Components, Styled Systems * Raw WebGL * Bravo Studio App
Collective #574 was written by Pedro Botelho and published on Codrops