Sensitive content

This media may contain sensitive content.

Loading video...

Video Failed to Load

Go Home

Build 3D experiences with React seamlessly! ⚛️✨ React Three Fiber (R3F) lets you combine the power of React with Three.js for intuitive 3D development. Check it out: Poimandres ☄︎ #Threejs #WebGL #ReactThreeFiber

threejsresource's profile picture

Three.js Resources

1,807 subscribers

13,588 views • 1 year ago •via X (Twitter)

Science & Technology#Threejs#WebGL#ReactThreeFiber
LIVE

Anya Rossi• Live Now

Private livecam show

4 Comments

Nova on Mars's profile picture
Nova on Mars1 year ago

@Scobleizer @pmndrs @0xca0a Fascinating intersection of React and Three.js! Would love to test this for creating immersive Mars colony virtual tours. Anyone experimenting with R3F in low-bandwidth environments?

React Universe Conf | Sept 2-4, 2025's profile picture
React Universe Conf | Sept 2-4, 20251 year ago

React Universe is a constantly evolving ecosystem—driving curiosity and continuous learning. And that's what we love about it! 🙌 Join us at React Universe Conf 2025 to future-proof your dev team:

sonyx.eth's profile picture
sonyx.eth1 year ago

@pmndrs @0xca0a amazing

Opic Technologies, Inc.'s profile picture
Opic Technologies, Inc.1 year ago

@pmndrs @0xca0a Love the creativity!

Related Videos

🎮 React Three Game on Three.js Resources Learn how to build 3D games using React Three Fiber and #threejs. A great starting point for understanding game logic, interactivity, and real-time 3D on the web. 👉 #threejs #WebGL #GameDev #ReactThreeFiber #3D #Learning
1:05

🎮 React Three Game on Three.js Resources Learn how to build 3D games using React Three Fiber and #threejs. A great starting point for understanding game logic, interactivity, and real-time 3D on the web. 👉 #threejs #WebGL #GameDev #ReactThreeFiber #3D #Learning

Three.js Resources

15,838 views • 4 months ago

Having fun with InstantMesh model on Replicate and Poimandres react-three-rapier / Three.js 🪄 #react #r3f #threejs
0:56

Having fun with InstantMesh model on Replicate and Poimandres react-three-rapier / Three.js 🪄 #react #r3f #threejs

Baptiste Adrien

110,174 views • 2 years ago

Shipping react-three/handle! The one to handle them all! 👌 Build intuitive 3D and XR cross-platform interactions with just one line of code. #R3F Three.js #WebXR
1:02

Shipping react-three/handle! The one to handle them all! 👌 Build intuitive 3D and XR cross-platform interactions with just one line of code. #R3F Three.js #WebXR

Bela Bohlender

18,632 views • 1 year ago

Here's what it looks like to block out a scene with Triplex — the React Three Fiber editor. Sound on 🔊 #threejs #react #r3f
1:04

Here's what it looks like to block out a scene with Triplex — the React Three Fiber editor. Sound on 🔊 #threejs #react #r3f

mike douges

56,770 views • 3 years ago

Glm-5 ile Minecraft yapmak. Kullanılan Teknolojiler: Oyun Motoru & 3D Grafik Three.js – WebGL tabanlı 3D grafik kütüphanesi React Three Fiber – Three.js için React renderer 🌐 Frontend Framework Next.js 16 – React tabanlı framework React 19 – UI kütüphanesi TypeScript – Tip güvenli JavaScript Z.ai Zixuan Li jietang
1:18

Glm-5 ile Minecraft yapmak. Kullanılan Teknolojiler: Oyun Motoru & 3D Grafik Three.js – WebGL tabanlı 3D grafik kütüphanesi React Three Fiber – Three.js için React renderer 🌐 Frontend Framework Next.js 16 – React tabanlı framework React 19 – UI kütüphanesi TypeScript – Tip güvenli JavaScript Z.ai Zixuan Li jietang

Mehmet

10,925 views • 4 months ago

It’s time for photorealistic 3D to be everywhere on the web! Announcing our Three.js & React-Three-Fiber library for #GaussianSplatting! Capture from your phone, integrate anywhere, customize to match your brand, and build shaders/effects. Available now 👉 #3DGS #3D #threejs #LumaAI
0:28

It’s time for photorealistic 3D to be everywhere on the web! Announcing our Three.js & React-Three-Fiber library for #GaussianSplatting! Capture from your phone, integrate anywhere, customize to match your brand, and build shaders/effects. Available now 👉 #3DGS #3D #threejs #LumaAI

Luma

230,503 views • 2 years ago

Using the incredible creative and expressive power of Poimandres r3f + drei for this newsletter landing about AI + Design. With a parametric spring mesh on Three.js, later ported to React. Stay tuned!
0:25

Using the incredible creative and expressive power of Poimandres r3f + drei for this newsletter landing about AI + Design. With a parametric spring mesh on Three.js, later ported to React. Stay tuned!

Davo

32,059 views • 3 years ago

I wanted to see what would happen if we stripped away pixels and polygons from a video, and instead tried to recreate moving footage using a single, unbroken, continuous line. Introducing SINGLETHREAD- experimental web app that transforms any video into a real-time, 3D oscilloscope-style sculpture, running entirely in the browser Tech Stack: React + Vite | Three.js + React-three-fiber + Postprocessing (Bloom glow) #CreativeCoding #ThreeJS #ReactThreeFiber #WebGL #GenerativeArt #TechArt #Frontend #3D
0:33

I wanted to see what would happen if we stripped away pixels and polygons from a video, and instead tried to recreate moving footage using a single, unbroken, continuous line. Introducing SINGLETHREAD- experimental web app that transforms any video into a real-time, 3D oscilloscope-style sculpture, running entirely in the browser Tech Stack: React + Vite | Three.js + React-three-fiber + Postprocessing (Bloom glow) #CreativeCoding #ThreeJS #ReactThreeFiber #WebGL #GenerativeArt #TechArt #Frontend #3D

SHAHNAB AHMED

75,360 views • 3 months ago

Hey everyone!! New tutorial out!!! Create your own Papercraft web portfolios with three.js, Blender, React/React Three Fiber, and Krita! ✂️✂️✂️✂️📰📰🖋️🖋️🖋️ The video below has two example websites! Code, credits, and other files are here: #threejs #b3d #blender #r3f
0:36

Hey everyone!! New tutorial out!!! Create your own Papercraft web portfolios with three.js, Blender, React/React Three Fiber, and Krita! ✂️✂️✂️✂️📰📰🖋️🖋️🖋️ The video below has two example websites! Code, credits, and other files are here: #threejs #b3d #blender #r3f

Andrew Woan

22,678 views • 3 months ago

🚀 I'm launching r3f-webgpu-perf today! "npm i r3f-webgpu-perf" One thing I missed while working with WebGPU in React Three Fiber was a performance monitor similar to r3f-perf. The existing tool is fantastic, but it doesn’t support the WebGPU renderer yet. So I decided to build one. ✅ Supports both WebGL and WebGPU ✅ Modern and customizable UI ✅ Lightweight and easy to integrate ✅ Built specifically for React Three Fiber My goal is to turn r3f-webgpu-perf into more than just a metrics dashboard. I want it to become a learning tool that provides real-time optimization suggestions based on the techniques I’ve developed while building hundreds of interactive 3D projects over the last two decades. A vanilla Three.js version is also planned. If you’re building with Three.js, React Three Fiber, or WebGPU, I’d love for you to try it and share your feedback. ⭐ GitHub: 📦 NPM: Every GitHub star helps make the tool better for the entire community. #threejs #creativecoding #webgpu #r3f
0:43

🚀 I'm launching r3f-webgpu-perf today! "npm i r3f-webgpu-perf" One thing I missed while working with WebGPU in React Three Fiber was a performance monitor similar to r3f-perf. The existing tool is fantastic, but it doesn’t support the WebGPU renderer yet. So I decided to build one. ✅ Supports both WebGL and WebGPU ✅ Modern and customizable UI ✅ Lightweight and easy to integrate ✅ Built specifically for React Three Fiber My goal is to turn r3f-webgpu-perf into more than just a metrics dashboard. I want it to become a learning tool that provides real-time optimization suggestions based on the techniques I’ve developed while building hundreds of interactive 3D projects over the last two decades. A vanilla Three.js version is also planned. If you’re building with Three.js, React Three Fiber, or WebGPU, I’d love for you to try it and share your feedback. ⭐ GitHub: 📦 NPM: Every GitHub star helps make the tool better for the entire community. #threejs #creativecoding #webgpu #r3f

Anderson Mancini

22,328 views • 11 days ago

Introducing react-three/timeline → Write composable declarative 3D behaviors like a story The following video is 100% made with #r3f and Three.js. Don't believe me? Try the demo below!
0:30

Introducing react-three/timeline → Write composable declarative 3D behaviors like a story The following video is 100% made with #r3f and Three.js. Don't believe me? Try the demo below!

Bela Bohlender

68,192 views • 9 months ago

✨ Introducing Triplex — the React Three Fiber editor, now in public alpha! Here's a video fleshing out a scene, sound on! 🔊 🧵👇 Continue into the thread below for more information and what's coming next for Triplex. #threejs #react #webgamedev #r3f #gamedev #3dartwork
1:45

✨ Introducing Triplex — the React Three Fiber editor, now in public alpha! Here's a video fleshing out a scene, sound on! 🔊 🧵👇 Continue into the thread below for more information and what's coming next for Triplex. #threejs #react #webgamedev #r3f #gamedev #3dartwork

mike douges

219,510 views • 3 years ago

Introducing pmndrs/viverse and react-three/viverse 🎉 A Toolkit for building Three.js and React Three Fiber Apps for VIVERSE and beyond with only a few lines of code ⟁
1:09

Introducing pmndrs/viverse and react-three/viverse 🎉 A Toolkit for building Three.js and React Three Fiber Apps for VIVERSE and beyond with only a few lines of code ⟁

Bela Bohlender

22,510 views • 10 months ago

Stickers pack with #react + #r3f, it's a wrap! Thanks ☄︎ for this lib
0:45

Stickers pack with #react + #r3f, it's a wrap! Thanks ☄︎ for this lib

Baptiste Adrien

92,098 views • 2 years ago

Bored of boring flat heatmaps? Introducing Topographical Explorer that turns any country into a real-time tactile landscape Search any country → watch real elevation data come alive as thousands of satisfying 3D blocks. Built entirely client-side with: - React Three Fiber + Three.js - AWS Terrain Tiles + OpenStreetMap - Real-time boundary Three.js React-three-fiber #DataVisualization #Geospatial #CreativeCoding #BuildInPublic
0:24

Bored of boring flat heatmaps? Introducing Topographical Explorer that turns any country into a real-time tactile landscape Search any country → watch real elevation data come alive as thousands of satisfying 3D blocks. Built entirely client-side with: - React Three Fiber + Three.js - AWS Terrain Tiles + OpenStreetMap - Real-time boundary Three.js React-three-fiber #DataVisualization #Geospatial #CreativeCoding #BuildInPublic

SHAHNAB AHMED

615,195 views • 1 month ago

Testing a 3D logo/case study picker using React Three Fiber
0:34

Testing a 3D logo/case study picker using React Three Fiber

Petr Knoll

47,472 views • 1 year ago

Mana Blade is my MMORPG built with Three.js, React Three Fiber, and WebGPU. It loads in 2 seconds and is playable on desktop and mobile. Already 2 years in the works! Music by the very talented 磯村ショウノ Shauno Isomura. #threejs #r3f #webgpu
0:25

Mana Blade is my MMORPG built with Three.js, React Three Fiber, and WebGPU. It loads in 2 seconds and is playable on desktop and mobile. Already 2 years in the works! Music by the very talented 磯村ショウノ Shauno Isomura. #threejs #r3f #webgpu

Verekia | ManaBlade.com

14,688 views • 4 months ago

🥪 Learn how to make a 3D Sandwich Configurator with React Native and React Three Fiber! 🍭 WawaWonka is hidden in the video with a 🎟️ Golden Ticket to get for free! Be the first to redeem it 👉
0:29

🥪 Learn how to make a 3D Sandwich Configurator with React Native and React Three Fiber! 🍭 WawaWonka is hidden in the video with a 🎟️ Golden Ticket to get for free! Be the first to redeem it 👉

Wawa Sensei

39,633 views • 2 years ago

Beneath our feet, the Earth pulses with fiery veins- Magma rivers carving the planet's secrets. 3D interactive globe of global volcanoes like "Veins of the Earth"! Built w/ React + TypeScript + Three.js + React-three-fiber Data Source: Smithsonian global volcanism program Note- The volcano lines are not actual paths just a creative rendition Like/RT if you it's interesting.. #Volcano #DataViz #ThreeJS #Geospatial #CreativeCoding #GAI #VisualArt #climate
0:27

Beneath our feet, the Earth pulses with fiery veins- Magma rivers carving the planet's secrets. 3D interactive globe of global volcanoes like "Veins of the Earth"! Built w/ React + TypeScript + Three.js + React-three-fiber Data Source: Smithsonian global volcanism program Note- The volcano lines are not actual paths just a creative rendition Like/RT if you it's interesting.. #Volcano #DataViz #ThreeJS #Geospatial #CreativeCoding #GAI #VisualArt #climate

SHAHNAB AHMED

32,990 views • 3 months ago

Ditched boring flat maps forever. Population Density 3D map- This is a premium glass-like orb floating in a quantum black void, with glowing spikes for every major city - taller + brighter = higher population. Rotate it. Zoom in. It was a fun exercise balancing 3D performance with clean, minimal UI. Tech Stack: React + Vite | Three.js | Tailwind CSS | Lucide React What do you think of the dark aesthetic? Like if you’re impressed Repost if you’re a dev who loves creative coding #React #ThreeJS #DataVisualization #WebGL #CreativeCoding #Frontend #TailwindCSS #UIUX
0:23

Ditched boring flat maps forever. Population Density 3D map- This is a premium glass-like orb floating in a quantum black void, with glowing spikes for every major city - taller + brighter = higher population. Rotate it. Zoom in. It was a fun exercise balancing 3D performance with clean, minimal UI. Tech Stack: React + Vite | Three.js | Tailwind CSS | Lucide React What do you think of the dark aesthetic? Like if you’re impressed Repost if you’re a dev who loves creative coding #React #ThreeJS #DataVisualization #WebGL #CreativeCoding #Frontend #TailwindCSS #UIUX

SHAHNAB AHMED

29,619 views • 3 months ago