Using motion-controllers.modules.js

motion-controllers-example.js

// A barebones example of how to use the motion-controllers library and assets repository to load controller models in yor WebXR app
// This gist will not go into the details of how to set up a WebXR app (See https://immersive-web.github.io/webxr-samples/ for that)
// but will instead focus on the parts needed to find and load the appropriate controller.

// The motion-controllers library is small enough that it can easily be dropped into your own codebase if you wish, but loading it
// directly from a CDN like jsdelivr is an even easier route to getting up and running.
import { fetchProfile } from 'https://cdn.jsdelivr.net/npm/@webxr-input-profiles/[email protected]/dist/motion-controllers.module.js';

// The assets package (https://www.npmjs.com/package/@webxr-input-profiles/assets) is larger, about 67Mb at time of writing,
// so it may be more beneficial to always use a CDN for it, especially since that will enable your app to pick up new controllers
// as they're added with zero effort on your part. You can still host it on your own server if preferred, though.
const ROOT_ASSETS_PATH = 'https://cdn.jsdelivr.net/npm/@webxr-input-profiles/[email protected]/dist/profiles';

// Do all your usual WebXR app setup here. We'll assume you have an XRSession available.
 
// The models can be queried at any time with any XRInputSource, but one of the best places to do so is when the input sources
// are first added, which can be detected with the 'inputsourceschange' event.
xrSession.addEventListener('inputsourceschange', async (event) => {
  for (xrInputSource of event.added) {
    try {
      // fetchProfile will look at the 'profiles' array reported by the xrInputSource, match that with the available assets,
      // and return the registered profile that best matches the xrInputSource and a URL for the controller asset.
      let { profile, assetPath } = await fetchProfile(xrInputSource, ROOT_ASSETS_PATH);
      
      // The assetPath points to a binary glTF file (*.glb). This is an increasingly common format that's easy to parse on
      // the web, so there's a good chance that your rendering library already has a way of loading them. If you don't care
      // about animating the controller to show things like button presses then all you have to do is load the controller
      // and transform it to match the XRInputSource's gripSpace pose every frame. Tada! You're now showing the user's controllers!
      yourRenderingLibrary.loadGLTF(assetPath);
    } catch (err) {
      // No appropriate assets found for the xrInputSource.
    }
  }
});