@coconut-xr/natuerlich

WebXR Interaction for Three.js

This library builds on Three.js (open-source WebGL library) and WebXR (Web Standard for Augmented and Virtual Reality) to deliver composable and extensible interactions for immersive experiences .

We provide bindings to react-three/fiber, enabling a familiar Developer Experience for react developers.

npm install @coconut-xr/natuerlich

Check out the Getting Started

Examples

Spatial UI with Koestlich	Placing Objects - 3D Models from Quaternius
Rag Doll Physics - based on R3F Example	Auto Demo - VR Drift Racing
Klettern Demo - VR Climbing	Gamepad Example

Documentation

Getting Started - barebones WebXR, Hands, and Controllers	Interaction with Objects - build interactions with objects
Interaction with Koestlich - build interactive 3D UIs	Teleport - building a teleport interaction
Poses - detecting and generating hand poses	Layers - high quality content using WebXR layers
Anchors - spatial anchors using WebXR anchors	Tracked Planes - tracked room planes using WebXR planes
Head Up Display - placing content in front of the user's camera	Custom Input Sources - building custom interactive hands and controllers
Tracked Images - image marker tracking using WebXR Image Tracking	Guards - conditional rendering using guards
Use XR - accessing the raw XR state	Configuration - configuring foveation, frameRate, referenceSpace, and frameBufferScaling

---

• All Components - API Documentation for all available components

• All Hooks - API Documentation for all available hooks

Acknowledgements

This library is only possible because of the great efforts from the Immersive Web Community Group and Immersive Web Working Group at the W3C, the Three.js team, and the react-three-fiber team. This work is inspired by existing libraries, such as react-xr and handy-work.

natuerlich is funded by Coconut Capital