@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

⤷ Getting Started

Examples

• Spatial UI with Koestlich

  

• Placing Objects - 3D Models from Quaternius

  

• Rag Doll Physics - based on R3F 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 - configurating foveation, frameRate, referenceSpace, and frameBufferScaling

---

• All Components - API Documentation for all available components
• All Hooks - API Documentation for all available hooks

Ecosystem

• User Interfaces - @coconut-xr/koestlich
• Pre-designed UI Components - @coconut-xr/apfel-kruemel

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