Bela Bohlender

Join React Advanced! reactadvanced.com

🕹️ 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!

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

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)

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

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!

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

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
❤️

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 ❤️

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 ⟁

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 🤡

Hope to see you in London! reactadvanced.com

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!

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

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

Peak XR development - modifications in headset 🥽

<Handle scale={{ uniform: false -> true }} >...</Handle>

Recorded by @acrilique.bsky.social 🙏🏼

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 !

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.

🚨 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

💌 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

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

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

Source Code:
github.com/pmndrs/xr/bl...

🎉 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 👇

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.

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

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

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

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.

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.

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 👇

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 💰

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...