正在加载视频...

视频加载失败

返回首页

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 次观看 • 1 年前 •via X (Twitter)

科学技术#R3F#WebXR
LIVE

Anya Rossi• Live Now

Private livecam show

11 条评论

Bela Bohlender 的头像
Bela Bohlender1 年前

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

Bela Bohlender 的头像
Bela Bohlender1 年前

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 的头像
Bela Bohlender1 年前

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 的头像
Bela Bohlender1 年前

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 的头像
Anima1 年前

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

Kevin 的头像
Kevin1 年前

@threejs Congratulations @BelaBohlender you are the GOAT !

Morten Haulik ᯅ 的头像
Morten Haulik ᯅ1 年前

@threejs Very cool!

Joao Rodrigues 的头像
Joao Rodrigues1 年前

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

KYLΞ ⚚ 的头像
KYLΞ ⚚1 年前

@threejs based

Anderson Mancini 的头像
Anderson Mancini1 年前

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

Zaniyar | CryptoFidgets 的头像
Zaniyar | CryptoFidgets1 年前

@threejs Love it!

相关视频

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 次观看 • 1 年前

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 次观看 • 1 年前

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 次观看 • 2 年前

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 次观看 • 9 个月前

🚀 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 次观看 • 25 天前

🎮 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 次观看 • 5 个月前

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 次观看 • 1 个月前

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,438 次观看 • 7 个月前

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 次观看 • 2 年前

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 次观看 • 11 个月前

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

45,971 次观看 • 2 个月前

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 次观看 • 7 个月前

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 次观看 • 4 个月前

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 次观看 • 1 年前

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 次观看 • 8 个月前

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 次观看 • 4 个月前

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 次观看 • 3 个月前

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 次观看 • 11 个月前

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 次观看 • 3 年前