iiinova — where your digital self keeps evolving

Reposted by Bela Bohlender

React Advanced London @reactadvanced.gitnation.org · 23/10/2025

🕹️ 3D on the web is leveling up! @belabohlender.bsky.social, maintainer of react-three/uikit & react-three/xr, shows how to build production-ready 3D apps with React in 2025. He also explores how AI is shaping the next wave of immersive web. Join React Advanced next to Big Ben this Nov!

Bela Bohlender @belabohlender.bsky.social · 08/09/2025

Original Song: Okean Elzy - Обійми 🇺🇦 youtu.be/--Wokwe4-i0

t.co

https://youtu.be/--Wokwe4-i0

000

Bela Bohlender @belabohlender.bsky.social · 08/09/2025

Example: this code shows the use of parallel actions with multiple transitions for the text fade in animation at the start (yes, r3/timeline uses async generators, I fell in love w. them, thanks to effect-ts)

110

Bela Bohlender @belabohlender.bsky.social · 08/09/2025

Repo: github.com/pmndrs/timel... Docs: pmndrs.github.io/timeline/ Demo: react-three-timeline-lambo.vercel.app

100

Bela Bohlender @belabohlender.bsky.social · 08/09/2025

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

140

Bela Bohlender @belabohlender.bsky.social · 28/07/2025

And special thanks to @douges.dev for doing the voice over for the video ❤️

000

Bela Bohlender @belabohlender.bsky.social · 28/07/2025

This project wouldn't be possible without the default model and animations made by @quaternius.bsky.social , the prototype texture from @kenney.nl, the three-vrm project from the pixiv team, three-mesh-bvh from Garrett Johnson and the prior work from @fez.bsky.social and Andrew Chen ❤️

110

Bela Bohlender @belabohlender.bsky.social · 28/07/2025

Github Repo: github.com/pmndrs/viverse Docs: pmndrs.github.io/viverse/ Super excited for this launch since it enables every threejs dev to get started with VIVERSE! Let's show them the power of the threejs community ❤️

111

Bela Bohlender @belabohlender.bsky.social · 28/07/2025

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

1193

Reposted by Bela Bohlender

Kevin @webxr.bsky.social · 15/04/2025

Had some fun last week-end porting Lunakepio (AlexMoulinneuf) 's #Mario Controller to #webXR. github.com/Lunakepio/ma... Uses #ThreeJS #R3F @belabohlender.bsky.social 's new Handle in #XR Should work smoothly on #iPhone in #AR. Not available on #Switch2 🤡

2146

Reposted by Bela Bohlender

React Advanced London @reactadvanced.gitnation.org · 11/04/2025

Greet our next speaker - @belabohlender.bsky.social❤️ Open-source developer and React-Three/xr maintainer. Bela is building tools to create extraordinary Web, 3D, and XR experiences! Hope to see you in London & Online on Nov. 28 & Dec. 1!

reactadvanced.com

Hope to see you in London!

reactadvanced.com

062

Reposted by Bela Bohlender

mike douges @douges.dev · 03/04/2025

literally throwing up from how sick this is #threejs #webxr

1144

Reposted by Bela Bohlender

pixel_mesh @pixel-mesh.bsky.social · 30/03/2025

check out my latest webxr project github.com/shpowley/thr.... a mixed-reality adaptation of several course lessons from Bruno Simon's (@bruno-simon.bsky.social) "three.js journey" course (threejs-journey.com) quest 3 (possibly other headsets) | android | ios #threejs #webxr #webdev

0101

Bela Bohlender @belabohlender.bsky.social · 26/03/2025

Peak XR development - modifications in headset 🥽 <Handle scale={{ uniform: false -> true }} >...</Handle> Recorded by @acrilique.bsky.social 🙏🏼

071

Reposted by Bela Bohlender

Kevin @webxr.bsky.social · 15/03/2025

Did you know you can now open a #webXR session thanks to on your #iPhone? You don’t even need to download the app. Just click on the link below to try @belabohlender.bsky.social ’s #R3F #Threejs #XR handle example : shorturl.at/DkWfs Thanks to @sung-powley.bsky.social for sharing about this !

131

Bela Bohlender @belabohlender.bsky.social · 06/03/2025

Demo: pmndrs.github.io/uikit/exampl... Source Code: github.com/pmndrs/uikit... (requires uikit 0.8.8) Shoutout to cyango.com for being the inspiration to this example.

020

Bela Bohlender @belabohlender.bsky.social · 06/03/2025

🚨 How to properly highlight pmndrs/uikit elements when hovering? Now live - including source code - in the dashboard demo. Link below 👇 Yes - everything is rendered on the GPU with @threejs.org

141

Reposted by Bela Bohlender

Verekia 🔮 ManaBlade.com @verekia.com · 04/03/2025

💌 The Web Game Dev Newsletter Issue 025 is out! Read it online here: www.webgamedev.com/newsletter/025, and subscribe to get the next ones delivered right to your inbox! 🚀 #threejs #r3f #gamedev

webgamedev.com

Newsletter – Issue 025 | Web Game Dev

12210

Bela Bohlender @belabohlender.bsky.social · 27/02/2025

Attributions: Music by Rockot from Pixabay Lever 3D Model by Amine.Elouneg from Sketchfab Lever Sound Effect by freesound_community from Pixabay Door Sound Effect by freesound_community from Pixabay

000

Bela Bohlender @belabohlender.bsky.social · 27/02/2025

Link to try it yourself (Quest recommended): pmndrs.github.io/xr/examples/... Source Code: github.com/pmndrs/xr/bl...

110

Bela Bohlender @belabohlender.bsky.social · 27/02/2025

🎉 Super honoured to be nominated as "Developer of the Year 2024" by the Annual immersive Awards - The Polys Amazing how the nomination ended up in my garden 🪴 (🔊 for the full experience ) @threejs.org #r3f - demo link and code below 👇

2102

Bela Bohlender @belabohlender.bsky.social · 24/02/2025

the concept of dom-overlays is for screenspace overlays only applicable to handheld experiences. dom-overlays can not be used for positioning UIs in 3D and are in general not useable for stereographic experiences.

010

Reposted by Bela Bohlender

Kevin @webxr.bsky.social · 22/02/2025

Catch, Tame, Chill with butterfly boids in #WebXR in either #VR or #AR using Hands only interactions with custom Hand Pose Recognitions. (controllers can also be used) Live now here : 👉 ar-butterflies.vercel.app Meta link here : t.co/gbaGqlGpLW #r3f #boids #quest3 #xr #threeJS

0205

Reposted by Bela Bohlender

Kevin @webxr.bsky.social · 15/02/2025

Soon you can catch butterflies or shall I say butterboïds? #webxr #r3f #boids #quest3 #vr #ar #xr #threeJS

0114

Reposted by Bela Bohlender

Kevin @webxr.bsky.social · 16/02/2025

I managed to get the same look as meta’s default Quest3 hands.

091

Bela Bohlender @belabohlender.bsky.social · 10/02/2025

Building a react-three/xr app that is build for hand input and getting tired to always switch? Make hand input the primary mode for the emulator in your config.

000

Bela Bohlender @belabohlender.bsky.social · 10/02/2025

Go to: pmndrs.github.io/xr/examples/... Press: command + options + e (or windows + alt + e) Click any "Enter XR/VR/AR" button. Switch from controller input to hand input in the top command bar.

100

Bela Bohlender @belabohlender.bsky.social · 10/02/2025

Debugging hand input without headset has never been easier 👌 Congrats to @fez.bsky.social for bringing us proper hand tracking emulation in iwer with devui 1.1 🎉 Try it out yourself - instructions below 👇

192

Bela Bohlender @belabohlender.bsky.social · 01/02/2025

Background music by Rockot from Pixabay pixabay.com/users/rockot... Trying to make it a regular habit of donating to the musicians I use music from for my social media videos 💰

010

Bela Bohlender @belabohlender.bsky.social · 01/02/2025

Try it out yourself: pmndrs.github.io/xr/examples/... Source Code: github.com/pmndrs/xr/bl... What is uikit? pmndrs.github.io/uikit/docs/g... What is handle? pmndrs.github.io/xr/docs/hand... How is this running in XR? pmndrs.github.io/xr/docs/gett...

110

Bela Bohlender @belabohlender.bsky.social · 01/02/2025

Let’s build interactive @threejs.org 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 🧵)

24511

Bela Bohlender @belabohlender.bsky.social · 30/01/2025

Shout out to @sung-powley.bsky.social for building the ducks demo and pushing hit testing further.

200

Bela Bohlender @belabohlender.bsky.social · 30/01/2025

Want to try out the example with the emulator yourself? Open up pmndrs.github.io/xr/examples/... and press command + option + e or windows + alt + e, click on “Enter XR” and place your ducks!

110

Bela Bohlender @belabohlender.bsky.social · 30/01/2025

react-three/xr 6.6 just dropped 🎉 a very important step for building mixed reality apps with @react.dev #R3F and @threejs.org Learn more about IWER/SEM and IWER/DevUI in @fez.bsky.social's tweet 👇 bsky.app/profile/fez....

2245

Bela Bohlender @belabohlender.bsky.social · 25/01/2025

with react 19, this might be okay, since forwardRef isn't necassary anymore

010

Bela Bohlender @belabohlender.bsky.social · 25/01/2025

Unfortunately exposing more then 1 ref "upwards" is not really a thing in react. But, there's a hook (which is not exported) that would allow to consume the ref to the object3d through the context of the rigid body. So exporting that hook would make it less "hacky"

100

Bela Bohlender @belabohlender.bsky.social · 25/01/2025

Well I need a ref to the object3d of the rapier rigid body, which is not exposed, so I am getting the parent of the group. But since I have no clue when that is initialized I want to resolve the current value imperatively when its accessed through a proxy :)

110

Bela Bohlender @belabohlender.bsky.social · 25/01/2025

handle + rapier =👌 That's why I love the react-three ecosystem @pmnd.rs Link to code below 👇

172

Reposted by Bela Bohlender

Kevin @webxr.bsky.social · 23/01/2025

Testing different hand-only concepts #threejs #r3f #webxr #starwars style #MetaQuestVR

051

Reposted by Bela Bohlender

HotBloodedHeroine @hotbloodedheroine.petplay.fi · 18/01/2025

really comes alive on video

192

Bela Bohlender @belabohlender.bsky.social · 21/01/2025

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: discord.com/invite/poima...

discord.com

Join the Poimandres Discord Server!

Check out the Poimandres community on Discord - hang out with 10843 other members and enjoy free voice and text chat.

030

Bela Bohlender @belabohlender.bsky.social · 21/01/2025

Attributions: Music by Dmitrii from Pixabay pixabay.com/users/hot_do... Ships sounds by LXX.70 freesound.org/s/91072/ Door Model by witnessk sketchfab.com/witnessk Ship Model By Maksim Batyrev sketchfab.com/c3posw01 Spaceship Model By Comrade1280 sketchfab.com/comrade1280

100

Bela Bohlender @belabohlender.bsky.social · 21/01/2025

Learn more about react-three/handle here: pmndrs.github.io/xr/docs/hand... Learn more about building XR apps with react: pmndrs.github.io/xr/docs/gett... Check out the editor demo: pmndrs.github.io/xr/examples/...

100

Bela Bohlender @belabohlender.bsky.social · 21/01/2025

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 @threejs.org #WebXR

7399

Bela Bohlender @belabohlender.bsky.social · 19/01/2025

What do I mean with even better support? If you have build any VR web app with react-three/xr, its most likely already AVP compatible because react-three/xr support transient pointers and all interactions are build on the pointer-events concept making them multimodal by default

010

Bela Bohlender @belabohlender.bsky.social · 19/01/2025

Cross platform testing enabled ✅ Expect even better support for AVP in react-three/xr

171