Loading video...

Video Failed to Load

Go Home

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

iampetrknoll's profile picture

Petr Knoll

3,217 subscribers

47,472 views • 1 year ago •via X (Twitter)

Science & TechnologyEducationArts
LIVE

Anya Rossi• Live Now

Private livecam show

11 Comments

Petr Knoll's profile picture
Petr Knoll1 year ago

fog is giving me some Arrival vibes

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:

andrew's profile picture
andrew1 year ago

insane work. how does react three fiber impact bundle size/seo?

Petr Knoll's profile picture
Petr Knoll1 year ago

It's pretty hefty and isn't directly crawlable for SEO, but there are workarounds. Wouldn't make this be the primary way to interact with cases, just a cool secondary visual

Faizan Alve's profile picture
Faizan Alve1 year ago

Nice 3d Animation 😍

Vist's profile picture
Vist1 year ago

Wow!! Such a cool idea

Fons Mans's profile picture
Fons Mans1 year ago

Uhm hello this is fcking sick

Petr Knoll's profile picture
Petr Knoll1 year ago

Haha thanks!

Tim ✖️'s profile picture
Tim ✖️1 year ago

Were any logos harmed?

Marv Naka's profile picture
Marv Naka1 year ago

Crazy good man, seriously

Petr Knoll's profile picture
Petr Knoll1 year ago

Appreciate it!

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,817 views • 4 months 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 • 3 months 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

612,776 views • 1 month 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

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

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

Demo of a Google AR & VR 3D Tiles editor in Poimandres' react-three-fiber, drei and NextJS. Completely hackable! ⚡️ 🌏 Edit the world from anywhere, from your browser! ⏳No need to install 3D engines 📖 Open source
0:45

Demo of a Google AR & VR 3D Tiles editor in Poimandres' react-three-fiber, drei and NextJS. Completely hackable! ⚡️ 🌏 Edit the world from anywhere, from your browser! ⏳No need to install 3D engines 📖 Open source

Alberto

63,948 views • 3 years ago

Testing logo transformations in VEO 3 using JSON. ⚙️🎥
0:24

Testing logo transformations in VEO 3 using JSON. ⚙️🎥

Koldo Huici

362,980 views • 10 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,426 views • 2 years ago

Opus 4.6 vs Gemini 3 Pro (3/9) prompt: Build a premium interactive isometric 3D cozy room using Vite + React + Three.js (react-three-fiber/drei), with all objects modeled in code (no external assets) and subtle ambient animations. Gemini looks good on initial impression but I feel like I have way more to work with opus here (opus also did light/dark mode and took a quarter of the time to make it).
0:26

Opus 4.6 vs Gemini 3 Pro (3/9) prompt: Build a premium interactive isometric 3D cozy room using Vite + React + Three.js (react-three-fiber/drei), with all objects modeled in code (no external assets) and subtle ambient animations. Gemini looks good on initial impression but I feel like I have way more to work with opus here (opus also did light/dark mode and took a quarter of the time to make it).

Dev Ed

77,206 views • 3 months ago

Russia testing a USV launched fiber optic strike drone.
1:00

Russia testing a USV launched fiber optic strike drone.

Preston Stewart

29,618 views • 3 months ago

Prince William believes you can have zero homelessness and he’s using Finland as a case study.
4:32

Prince William believes you can have zero homelessness and he’s using Finland as a case study.

CNN

265,135 views • 2 years ago

my gift for the @levelsio game jam a three.js starter file with cannon.js, react three fiber, and drei.. ready to go no paywall, just a download link 👇
0:22

my gift for the @levelsio game jam a three.js starter file with cannon.js, react three fiber, and drei.. ready to go no paywall, just a download link 👇

Aurelien

94,775 views • 1 year ago

Take a look at this animated 3D arm muscles study created by 3D Artist John Newell using ZBrush. More anatomy studies: #zbrush #3dsculpting #anatomy #reference
0:28

Take a look at this animated 3D arm muscles study created by 3D Artist John Newell using ZBrush. More anatomy studies: #zbrush #3dsculpting #anatomy #reference

80 LEVEL

55,652 views • 2 years ago

.Ann He and I won the AGI House ai x commerce hackathon on saturday! we built taste space: a 3d representation of 1500 clothing items that, through rating, you can place yourself in. built with CLIP, UMAP, synthetic labeling, react three fiber, and more. thread 👇
0:36

.Ann He and I won the AGI House ai x commerce hackathon on saturday! we built taste space: a 3d representation of 1500 clothing items that, through rating, you can place yourself in. built with CLIP, UMAP, synthetic labeling, react three fiber, and more. thread 👇

Michelle Lu

86,612 views • 1 year ago

New work for IBM. Sound by Cypher. Case study + creds coming soon. #tendril #ibm #3d #motiondesign
0:51

New work for IBM. Sound by Cypher. Case study + creds coming soon. #tendril #ibm #3d #motiondesign

Tendril

21,690 views • 1 year ago

Verydarkman react to Federal government using Yahaya bello who is currently having a case with EFCC as witness in their filled case against Suspended Senator natasha akpoti
5:32

Verydarkman react to Federal government using Yahaya bello who is currently having a case with EFCC as witness in their filled case against Suspended Senator natasha akpoti

Nigeria Stories

87,133 views • 1 year ago

Nigeria a case study.
1:29

Nigeria a case study.

Chinasa Nworu

10,475 views • 1 year 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