Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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

BelaBohlender's profile picture

Bela Bohlender

2,038 subscribers

18,632 görüntüleme • 1 yıl önce •via X (Twitter)

Bilim & Teknoloji#R3F#WebXR
LIVE

Anya Rossi• Live Now

Private livecam show

11 Yorum

Bela Bohlender profil fotoğrafı
Bela Bohlender1 yıl önce

Learn more about react-three/handle here: Learn more about building XR apps with react: Check out the editor demo:

Bela Bohlender profil fotoğrafı
Bela Bohlender1 yıl önce

Attributions: Music by Dmitrii from Pixabay Ships sounds by LXX.70 Door Model by witnessk Ship Model By Maksim Batyrev Spaceship Model By Comrade1280

Bela Bohlender profil fotoğrafı
Bela Bohlender1 yıl önce

Also, I recommend joining the pmndrs discord, where a growing community of XR, 3D and react developers are helping each other to build ground breaking web experiences:

Bela Bohlender profil fotoğrafı
Bela Bohlender1 yıl önce

Side note: Used from @theo today for the first time because I quickly needed to do some last minute grammar checks for the react-three/handle docs. It not only solved my use case super fast, it also displayed the markdown 100% correct. 10/10 would do again

Anima profil fotoğrafı
Anima1 yıl önce

Transform your @figma designs into production-ready @shadcn components with Anima. Streamline your workflow, maintain design consistency, and generate Tailwind-based code effortlessly.✨

Kevin profil fotoğrafı
Kevin1 yıl önce

@threejs Congratulations @BelaBohlender you are the GOAT !

Morten Haulik ᯅ profil fotoğrafı
Morten Haulik ᯅ1 yıl önce

@threejs Very cool!

Joao Rodrigues profil fotoğrafı
Joao Rodrigues1 yıl önce

@threejs I mean this is so exciting that I have to handle myself on handling this "handle" situation

KYLΞ ⚚ profil fotoğrafı
KYLΞ ⚚1 yıl önce

@threejs based

Anderson Mancini profil fotoğrafı
Anderson Mancini1 yıl önce

@threejs Man. You are unstoppable 😍 congratulations. This in incredible. Thanks for sharing it 😊

Zaniyar | CryptoFidgets profil fotoğrafı
Zaniyar | CryptoFidgets1 yıl önce

@threejs Love it!

Benzer Videolar

Let’s build interactive Three.js User Interfaces 🫰 Uses react-three/handle, react-three/xr, and react-three/uikit - vanilla versions are available🍦 Works on any device inside and outside #WebXR Compose <uikit> with <handle> to control sizes, positions, rotations (Link in 🧵)
0:37

Let’s build interactive Three.js User Interfaces 🫰 Uses react-three/handle, react-three/xr, and react-three/uikit - vanilla versions are available🍦 Works on any device inside and outside #WebXR Compose <uikit> with <handle> to control sizes, positions, rotations (Link in 🧵)

Bela Bohlender

47,422 görüntüleme • 1 yıl önce

Excited to launch react-three/xr🤳🥽 Leverage the latest WebXR features, reuse your existing interactions, and advance what is possible in AR and VR on the Web. ↳ Turn your existing R3F app into an AR or VR experience with only a few lines of code. 🎉
0:52

Excited to launch react-three/xr🤳🥽 Leverage the latest WebXR features, reuse your existing interactions, and advance what is possible in AR and VR on the Web. ↳ Turn your existing R3F app into an AR or VR experience with only a few lines of code. 🎉

Bela Bohlender

40,109 görüntüleme • 1 yıl önce

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,187 görüntüleme • 2 yıl önce

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 görüntüleme • 10 ay önce

🚀 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,671 görüntüleme • 26 gün önce

🎮 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 görüntüleme • 5 ay önce

Web 3d explorer for Oxide Computer Company. Built in three.js/r3f. Tonnes of little interactions and details in this. Poke around, and take a look at the guided tours.
0:21

Web 3d explorer for Oxide Computer Company. Built in three.js/r3f. Tonnes of little interactions and details in this. Poke around, and take a look at the guided tours.

Ben Leonard

99,158 görüntüleme • 1 ay önce

Meet AI Verse: one unified platform where creators build worlds, and we power them across PC, VR, and mobile. From no-code world creation to multiplayer, retail, education, and enterprise. It all connects inside one ecosystem. This is how the future of 3D experiences scales.
5:06

Meet AI Verse: one unified platform where creators build worlds, and we power them across PC, VR, and mobile. From no-code world creation to multiplayer, retail, education, and enterprise. It all connects inside one ecosystem. This is how the future of 3D experiences scales.

Victoria VR

136,461 görüntüleme • 7 ay önce

Teaser 🔥 Hint: this is a website built with React and Three.js, and the smartphone is not real. #WebXR
0:27

Teaser 🔥 Hint: this is a website built with React and Three.js, and the smartphone is not real. #WebXR

Bela Bohlender

24,736 görüntüleme • 2 yıl önce

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,579 görüntüleme • 11 ay önce

One Prompt. One Iteration. That’s all it took to vibe code this super sleek 3D orbital gallery using Three.js with Gemini 3.1 Pro in Google AI Studio. Period. Live: Code:
0:20

One Prompt. One Iteration. That’s all it took to vibe code this super sleek 3D orbital gallery using Three.js with Gemini 3.1 Pro in Google AI Studio. Period. Live: Code:

The Bugged Dev

46,104 görüntüleme • 3 ay önce

Quick demo of Stripe Managed Payments (MoR) Here's my tiny Next.js app, a few prompts in Cursor, and the Stripe docs handle the rest One line of code and it just works
2:53

Quick demo of Stripe Managed Payments (MoR) Here's my tiny Next.js app, a few prompts in Cursor, and the Stripe docs handle the rest One line of code and it just works

JR Farr

29,125 görüntüleme • 7 ay önce

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

23,070 görüntüleme • 4 ay önce

He was able to handle all three of them by himself.
1:21

He was able to handle all three of them by himself.

Goofies Of Chicago

29,250 görüntüleme • 1 yıl önce

The new Samsung Mobile Galaxy XR is all about blending the digital and physical worlds, creating experiences that are both seamlessly intuitive and powerfully immersive. We chatted with the Calm team to learn how they were able to bring their mobile app to the Android XR platform and create features like the 3D "breathe bubble" and scene experiences.
4:59

The new Samsung Mobile Galaxy XR is all about blending the digital and physical worlds, creating experiences that are both seamlessly intuitive and powerfully immersive. We chatted with the Calm team to learn how they were able to bring their mobile app to the Android XR platform and create features like the 3D "breathe bubble" and scene experiences.

Android Developers

10,300 görüntüleme • 8 ay önce

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 görüntüleme • 4 ay önce

MiniMax M2.7 is too good for it price🤯 Prompt : Build a premium interactive isometric 3D cozy room using Three.js in one html code block, with all objects modeled in code (no external assets) and subtle ambient animations and you can do 2 things of your choice to make it better
0:32

MiniMax M2.7 is too good for it price🤯 Prompt : Build a premium interactive isometric 3D cozy room using Three.js in one html code block, with all objects modeled in code (no external assets) and subtle ambient animations and you can do 2 things of your choice to make it better

Chetaslua

26,520 görüntüleme • 3 ay önce

How does Cam Ward handle all the pressure and distractions on his plate right now? By just chillin. And talking to five non-teammates a day. And one of them is dog.
0:40

How does Cam Ward handle all the pressure and distractions on his plate right now? By just chillin. And talking to five non-teammates a day. And one of them is dog.

AtoZ Sports Nashville

35,781 görüntüleme • 11 ay önce

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,068 görüntüleme • 3 yıl önce