← Back to Ships
Finanzas VR
WebXR financial literacy experience — walk through a virtual bank and learn money basics from an advisor
ReactThree.jsReact Three Fiber@react-three/xrTypeScriptViteWebXR
A WebXR demo built with React Three Fiber and @react-three/xr. The user
puts on a headset, stands inside a virtual bank, and walks up to a
financial advisor who guides them through a short dialog about saving,
spending, and basic money decisions.
What’s in it
- Room-scale VR scene with thumbstick locomotion (left stick moves, right stick as a fallback lateral control)
- Dialog-driven “advisor” NPC with phases: waiting → talking → choice → response → lesson → end
- 3D UI panels built from
dreiprimitives (RoundedBox,Text,Cylinder) so everything renders inside the headset - Zustand store for game state, keeping React re-renders out of the frame loop
Stack notes
Runs on Vite with @vitejs/plugin-basic-ssl because WebXR requires
HTTPS even in local dev.