![header image](./images/header.jpg)

[![Version](https://img.shields.io/npm/v/@coconut-xr/xinteraction?style=flat-square)](https://npmjs.com/package/@coconut-xr/xinteraction)
[![License](https://img.shields.io/github/license/coconut-xr/xinteraction.svg?style=flat-square)](https://github.com/coconut-xr/xinteraction/blob/master/LICENSE)
[![Twitter](https://img.shields.io/twitter/follow/coconut_xr?style=flat-square)](https://twitter.com/coconut_xr)
[![Discord](https://img.shields.io/discord/1087727032240185424?style=flat-square&label=discord)](https://discord.gg/RbyaXJJaJM)

_**interaction** on the 3D web for any (**x**) input device_

---

**xinteraction** translates events from input devices (e.g., Mouse, 6DOF Controller, Hand) into events on 3D Objects in a Three.js Scene.


**xinteraction** can be combined with **[natuerlich](https://github.com/coconut-xr/natuerlich)** for **WebXR** use cases.

<span style="font-size: 2rem">⤷ [Getting start with **xinteraction** + **natuerlich**](https://coconut-xr.github.io/natuerlich/#/./custom-input)</span>

---

## [Documentation](https://coconut-xr.github.io/xinteraction)

* [Introduction](https://coconut-xr.github.io/xinteraction/#/introduction.md) Explains the xinteraction concept and use
* [Pointing Input Devices](https://coconut-xr.github.io/xinteraction/#/pointing.md) Explains pointing interactions based straight rays
* [Curved Pointing Input Devices](https://coconut-xr.github.io/xinteraction/#/curved.md) Explains interactions using a curved line
* [Distance Based Input Device](https://coconut-xr.github.io/xinteraction/#/distance.md) Explains interactions like touching or grabbing
* [Event Capture](https://coconut-xr.github.io/xinteraction/#/event-capture.md) Explains event capture for dragging
* [Event Forwarding](https://coconut-xr.github.io/xinteraction/#/forwarding.md) Explains event forwarding for portals