i thought yesterdays demo was useful so i've put some more effort in. never really showed how webgl feeds into an actual react app. added a shared state model (zustand), ui controls toggling views (mantine), media queries, and still just ~130 loc.
https://codesandbox.io/s/view-skissor-forked-r9w2ob?file=/src/App.js…
Now, signal() with zustand-signal (internally create-react-signals) supports react-three-fiber!
It updates the position of cube without React rendering. Would be good for game-like apps.
Demo: https://codesandbox.io/s/gifted-water-n0m5tu?file=/src/App.js…
Note: This project is still experimental and includes hacks.
We are thrilled to introduce Docker support in CodeSandbox 🎉🆕 Code in new languages
🌐 Work with servers & databases
#️⃣ Get root access
✨ Play with our
Your location and orientation is now synced to the URL bar, allowing you to bookmark or share special places as you explore.
Share the cozy places or nice views that you find :)
I've been porting the cannon.js RaycastVehicle to rapier. Some decent progress has been made!
live: https://sketches.isaacmason.com/#/sketch/Rapier-RaycastVehicle…
source: https://github.com/isaac-mason/sketches/tree/main/src/sketches/sketch-Rapier-RaycastVehicle…#threejs#r3f
I'll release this as a lib for vanilla rapier + rt/rapier at some point.
There are a few hacks in the controller code, and fixing them might need some extra things exposed in the rapier3d javascript bindings.
But even with the hacks, the car feels pretty good!
Update, sound on 🔊! Here I talk through:
🔎 Focusing scene objects [f]
🕋 Transforming scene objects [t,r,s]
🎯 Focus mode [shift + f]
This is all to make my life easier when making my game with R3F. Think they'll be useful for you too? Let me know in the comments! 👇
🚀 Before Twitter dies – To anyone interested in learning 3D Game Development using JS / React / Three.js, I've started writing a free guide on https://webgamedev.com (work in progress!) and you can join the Discord using the button in the header!