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