https://github.com/zetaphor/webxr-controller-helper

Automatically setup models and input mappings for WebXR controllers
https://github.com/zetaphor/webxr-controller-helper

threejs webxr webxr-controllers

Last synced: 25 days ago
JSON representation

Automatically setup models and input mappings for WebXR controllers

• Host: GitHub
• URL: https://github.com/zetaphor/webxr-controller-helper
• Owner: Zetaphor
• License: mit
• Created: 2020-06-22T23:34:12.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T09:38:00.000Z (about 2 years ago)
• Last Synced: 2024-11-13T12:14:30.523Z (about 2 months ago)
• Topics: threejs, webxr, webxr-controllers
• Language: JavaScript
• Homepage:
• Size: 3.04 MB
• Stars: 0
• Watchers: 2
• Forks: 2
• Open Issues: 25
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# webxr-controller-helper

Automatically setup models and input mappings for WebXR controllers

### Usage

Install

```bash

$ npm install --save webxr-controller-helper

```

```js

  import { controllerHelper } from 'webxr-controller-helper';

  function onSessionStarted(session) {

    renderer.xr.setSession(session);

    renderer.setAnimationLoop(render);

    controllerHelper.setupControllers(renderer);

  }

  document.addEventListener('controllerHelperReady', function (ev) {

    controllers = ev.detail;

    console.log(`Found ${Object.keys(controllers.hands).length} ${controllers.type} controller(s)`);

    for (const hand in controllers.hands) {

      if (!controllers.hands.hasOwnProperty(hand)) continue;

      console.log(`Setup ${hand} hand controller`);

      playerRig.add(controllers.hands[hand].model);

      playerRig.add(controllers.hands[hand].grip);

    }

  });

  document.addEventListener('controllerHelperStateChange', function (ev) {

    console.log('Controller State Changed:', ev.detail);

  });

  document.addEventListener('controllerHelperValueChange', function (ev) {

    console.log('Controller Value Changed:', ev.detail);

  });

  document.addEventListener('controllerHelperAxisChange', function (ev) {

    console.log('Controller Axis Changed:', ev.detail);

  });

  document.addEventListener('controllerHelperChange', function () {

    console.log('Controller Changed:', ControllerHelper.state);

  });

```