#r3f — Public Fediverse posts
Live and recent posts from across the Fediverse tagged #r3f, aggregated by home.social.
-
💌 The Web Game Dev Newsletter Issue 031 is out! Read it online here: https://webgamedev.com/newsletter/031, and subscribe to get the next ones delivered right to your inbox 🚀 #threejs #r3f #gamedev
-
💌 The Web Game Dev Newsletter Issue 031 is out! Read it online here: https://webgamedev.com/newsletter/031, and subscribe to get the next ones delivered right to your inbox 🚀 #threejs #r3f #gamedev
-
A SaaS landing built around the Command Palette as a conversion surface — not decoration.
CMDK wired to live state, streaming AI responses, R3F dashboard backdrop running off the main thread. Lighthouse 96 mobile · LCP 1.6s · CLS 0.03.
Stack: Next.js 15 App Router · Tailwind v4 @Theme · Framer Motion 12 · Vercel AI SDK. Performance budget enforced in CI. Built by GrowthSite Lab.
-
Five thousand nodes, 60fps, one Three.js scene.
A knowledge graph 3D visualization built on React Three Fiber + d3-force-3d + Vite. Instanced sphere geometry for nodes, batched line geometry for edges, auto-frame camera on first paint. Vertex colors disabled on the material — that's the landmine that costs a weekend if you miss it.
Built by GrowthSite Lab.
-
7 flagship homepages in 7 days. Week 1 wrap.
HELIOS closes the triptych: high-key glass prism with 6-beam spectrum dispersion. Light-palette R3F at 60fps mobile.
The pattern across 7 builds: precompute heavy work at build time, lazy-mount the canvas, and never let two libraries fight for the same input event.
Average LCP 1.6s. Zero HDR fetches.
Built by GrowthSite Lab.
-
ÆTHER ships iridescence + dispersion on the same meshPhysicalMaterial.
60fps on iPhone 15 Pro. The unlock is precomputing the iridescence cubemap at build time — one static asset, zero per-frame GPU cost.
Layered with Framer Motion 12 scroll choreography, WCAG 2.2 AA on the same scene.
Built by GrowthSite Lab.
-
5 GSAP-pinned cinematic scenes at 60fps mobile.
Cooperation pattern: Lenis owns wheel/touch input, ScrollTrigger reads from Lenis's scroll callback. Single owner = zero jank.
Iridescence is meshPhysicalMaterial physics, not a moving texture. No HDR environment needed.
Torch-mask cursor reveal: pure CSS mask, zero JS reflow per pointermove.
Built by GrowthSite Lab.
-
💌 The Web Game Dev Newsletter Issue 030 is out! Read it online here: https://webgamedev.com/newsletter/030, and subscribe to get the next ones delivered right to your inbox 🚀 #threejs #r3f #gamedev
-
💌 The Web Game Dev Newsletter Issue 030 is out! Read it online here: https://webgamedev.com/newsletter/030, and subscribe to get the next ones delivered right to your inbox 🚀 #threejs #r3f #gamedev
-
@budgegeria love using #R3F as Three.js wrapper for React / Next.js apps:
https://github.com/pmndrs/react-three-fiber -
💌 The Web Game Dev Newsletter Issue 029 is out! Read it online here: https://webgamedev.com/newsletter/029, and subscribe to get the next ones delivered right to your inbox 🚀 #threejs #r3f #gamedev
-
💌 The Web Game Dev Newsletter Issue 029 is out! Read it online here: https://webgamedev.com/newsletter/029, and subscribe to get the next ones delivered right to your inbox 🚀 #threejs #r3f #gamedev
-
💌 The Web Game Dev Newsletter Issue 028 is out! Read it online here: https://webgamedev.com/newsletter/028, and subscribe to get the next ones delivered right to your inbox 🚀 #threejs #r3f #gamedev
-
💌 The Web Game Dev Newsletter Issue 028 is out! Read it online here: https://webgamedev.com/newsletter/028, and subscribe to get the next ones delivered right to your inbox 🚀 #threejs #r3f #gamedev
-
💌 The Web Game Dev Newsletter Issue 027 is out! Read it online here: https://webgamedev.com/newsletter/027, and subscribe to get the next ones delivered right to your inbox 🚀 #threejs #r3f #gamedev
-
💌 The Web Game Dev Newsletter Issue 027 is out! Read it online here: https://webgamedev.com/newsletter/027, and subscribe to get the next ones delivered right to your inbox 🚀 #threejs #r3f #gamedev
-
Needle supporting ShaderGraph to three.js is coming
For Needle Engine, vanilla three AND react-three-fiber
-
Needle supporting ShaderGraph to three.js is coming
For Needle Engine, vanilla three AND react-three-fiber
-
There's a lot of noise around AI and code... but this article by Ian Curtis shows what it actually looks like to use it in practice.
Discover the steps needed to build a physics-based character controller with AI, React Three Fiber, Three.js & Rapier, guided by real constraints and clear intent.
Read it here: https://tympanus.net/codrops/?p=94836
-
There's a lot of noise around AI and code... but this article by Ian Curtis shows what it actually looks like to use it in practice.
Discover the steps needed to build a physics-based character controller with AI, React Three Fiber, Three.js & Rapier, guided by real constraints and clear intent.
Read it here: https://tympanus.net/codrops/?p=94836
-
💌 The Web Game Dev Newsletter Issue 026 is out! Read it online here: https://www.webgamedev.com/newsletter/026, and subscribe to get the next ones delivered right to your inbox! 🚀 #threejs #r3f #gamedev
-
💌 The Web Game Dev Newsletter Issue 026 is out! Read it online here: https://www.webgamedev.com/newsletter/026, and subscribe to get the next ones delivered right to your inbox! 🚀 #threejs #r3f #gamedev
-
Today we have a brilliant new demo by Deadrabbbbit for you! 🌌
It's a super cool scanning light effect built with WebGPU, depth maps, and custom shaders using Three.js and R3F.
Check it out: https://tympanus.net/codrops/2025/03/31/webgpu-scanning-effect-with-depth-maps/
-
Today we have a brilliant new demo by Deadrabbbbit for you! 🌌
It's a super cool scanning light effect built with WebGPU, depth maps, and custom shaders using Three.js and R3F.
Check it out: https://tympanus.net/codrops/2025/03/31/webgpu-scanning-effect-with-depth-maps/
-
In today’s tutorial, Matt Park explores the magic of light and refraction! ✨💎🪩
Using Three.js, React Three Fiber, and Drei, he breaks down how light bends, refraction works, and how to create a super slick 3D glass torus.
Read it here: https://tympanus.net/codrops/?p=89382
-
In today’s tutorial, Matt Park explores the magic of light and refraction! ✨💎🪩
Using Three.js, React Three Fiber, and Drei, he breaks down how light bends, refraction works, and how to create a super slick 3D glass torus.
Read it here: https://tympanus.net/codrops/?p=89382
-
💌 The Web Game Dev Newsletter Issue 025 is out! Read it online here: https://www.webgamedev.com/newsletter/025, and subscribe to get the next ones delivered right to your inbox! 🚀 #threejs #r3f #gamedev
-
💌 The Web Game Dev Newsletter Issue 025 is out! Read it online here: https://www.webgamedev.com/newsletter/025, and subscribe to get the next ones delivered right to your inbox! 🚀 #threejs #r3f #gamedev
-
🌊 Today we have a very unique tutorial for you!
Thalles Lopes walks us through creating stylized water effects with React Three Fiber for a beautiful game he made as a birthday gift to his wife. 🎮💖
You'll learn so much, he's a true master at his art!
Read it here: https://tympanus.net/codrops/2025/03/04/creating-stylized-water-effects-with-react-three-fiber/
#webgl #r3f #threejs #webdevelopment #coding #gamedevelopment #tutorial
-
🌊 Today we have a very unique tutorial for you!
Thalles Lopes walks us through creating stylized water effects with React Three Fiber for a beautiful game he made as a birthday gift to his wife. 🎮💖
You'll learn so much, he's a true master at his art!
Read it here: https://tympanus.net/codrops/2025/03/04/creating-stylized-water-effects-with-react-three-fiber/
#webgl #r3f #threejs #webdevelopment #coding #gamedevelopment #tutorial
-
The Night Room is a soporific analogue escape for sleepless summer nights https://night-room.vercel.app/ #r3f #javascript #ambient #lofi #threejs #blender
-
The Night Room is a soporific analogue escape for sleepless summer nights https://night-room.vercel.app/ #r3f #javascript #ambient #lofi #threejs #blender
-
Generative art meets Three.js 🖼️
Eduard Fossas shows how to recreate Lygia Clark's geometric minimalism using grid systems and generative techniques.
A must-read for creative coders: https://tympanus.net/codrops/2025/01/15/creating-generative-artwork-with-three-js/
#generativeart #creativecoding #webdevelopment #generative #threejs #r3f #webgl #tutorial #howto
-
Generative art meets Three.js 🖼️
Eduard Fossas shows how to recreate Lygia Clark's geometric minimalism using grid systems and generative techniques.
A must-read for creative coders: https://tympanus.net/codrops/2025/01/15/creating-generative-artwork-with-three-js/
#generativeart #creativecoding #webdevelopment #generative #threejs #r3f #webgl #tutorial #howto
-
Check out this fantastic shader-based image reveal effect using React Three Fiber, GLSL, and Framer Motion 🌀✨ by Colin Demouge!
Follow along and learn how to create this eye-catching animation step-by-step: https://tympanus.net/codrops/?p=83030
#r3f #threejs #webgl #framermotion #tutorial #creativecoding #webdevelopment #demo
-
Check out this fantastic shader-based image reveal effect using React Three Fiber, GLSL, and Framer Motion 🌀✨ by Colin Demouge!
Follow along and learn how to create this eye-catching animation step-by-step: https://tympanus.net/codrops/?p=83030
#r3f #threejs #webgl #framermotion #tutorial #creativecoding #webdevelopment #demo
-
Today's amazing tutorial by Oguzhan Tufenk is all about dynamic terrain deformation with React Three Fiber.
From realistic snow effects to endless walking zones, there’s plenty to explore and learn!
Try it out and take Mr. Antarctic for a walk! ❄️
-
Today's amazing tutorial by Oguzhan Tufenk is all about dynamic terrain deformation with React Three Fiber.
From realistic snow effects to endless walking zones, there’s plenty to explore and learn!
Try it out and take Mr. Antarctic for a walk! ❄️
-
Today we have new tutorial for you ✨ Matias Perez takes you behind the scenes of his latest shader background effect with R3F. Follow along and see how it's done, step-by-step!
Read it here: https://tympanus.net/codrops/2024/10/31/how-to-code-a-subtle-shader-background-effect-with-react-three-fiber/
-
Feeling a bit nostalgic these days? 🎮 We’ve got the perfect tutorial for you!
Oğuzhan Tüfenk shares how to create a PS1-inspired jitter shader for adding that iconic retro wobble to your 3D models 🤩
Check it out: https://tympanus.net/codrops/?p=80278
-
We're starting the week with a fresh tutorial by Ben McCormick!
Learn how to build a simple raymarched scene with interesting lighting using React Three Fiber (R3F) and Three.js Shader Language (TSL): https://tympanus.net/codrops/?p=78977
-
⭐️ Featured this week on the Web Game Dev Discord: Candy Riot by Cosmitar! A cute Halloween-themed game where your skeletons fight for candies. Made with ⚛️ React Three Fiber. Play here: https://candy-riot-cosmitar.vercel.app and join 550 JavaScript game devs at: https://webgamedev.com/discord
#threejs #r3f #webgl #html5games -
💌 The #WebGameDev Newsletter Issue 008 is out! Read it online here: https://webgamedev.com/newsletter/008 and subscribe to get the next ones delivered right to your inbox! 🚀 #threejs #r3f #html5games #webgl #webgpu
-
💌 The #WebGameDev Newsletter Issue 004 is out! Read it online here: https://webgamedev.com/newsletter/004 and subscribe to get the next ones delivered right to your inbox! 🚀 #threejs #r3f #playcanvas #phaserjs #gamedev