Building a Physics-Based Character Controller with the Help of AI
In Tutorials, by Ian Curtis
A behind-the-scenes look at building a physics-based character controller using AI, React Three Fiber, Three.js, and Rapier.
51 posts tagged with
WebGPU Scanning Effect with Depth Maps
In Playground, by deadrabbbbit
An exploration of a scanning effect using depth maps, custom shaders, and WebGPU rendering.
Playing with Light and Refraction in Three.js: Warping 3D Text Inside a Glass Torus
Explore how MeshTransmissionMaterial in Three.js bends light, creates refraction effects, and enhances realistic glass-like materials.
Creating Stylized Water Effects with React Three Fiber
In Tutorials, by Thalles Lopes
Learn how to craft smooth, cartoon-style water effects with dynamic movement, optimized for performance, using React Three Fiber.
Building Efficient Three.js Scenes: Optimize Performance While Maintaining Quality
In Tutorials, by Niccolò Fanton
A comprehensive look at how to optimize Three.js scenes using Fiber, Drei, and advanced tools, ensuring smooth performance while retaining high-quality visuals.
Creating Generative Artwork with Three.js
In Tutorials, by Eduard Fossas
Develop a dynamic, generative artwork using Three.js and grid systems, inspired by Lygia Clark’s minimalist geometric designs.
How to Code a Shader Based Reveal Effect with React Three Fiber & GLSL
In Tutorials, by Colin Demouge
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
In Tutorials, by Oguzhan Tufenk
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
In Tutorials, by Matias Perez
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
In Tutorials, by Oguzhan Tufenk
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
In Playground, by deadrabbbbit
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
In Tutorials, by Ben McCormick
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
In Tutorials, by Pavel Mazhuga
Learn how to create an animated, displaced sphere using custom shaders with Three.js and React Three Fiber.
Case Study: ToyFight — 2024
A snapshot of how the new ToyFight site was designed and developed.
Exploring a 3D Text Distortion Effect With React Three Fiber
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
In Playground, by Mohammed Amine Bourouis
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
In Tutorials, by Roman Jean-Elie
Exploring how to generate an engaging bulge effect on text using React Three Fiber.
On-Scroll Revealing WebGL Images
In Playground, by Yuri Artiukh
An exploration of on-scroll reveal effects for images in WebGL, using React Three Fiber.
