Created
January 23, 2020 18:36
-
-
Save toji/662019cb78228668a94d736a02bf6276 to your computer and use it in GitHub Desktop.
Using motion-controllers.modules.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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. | |
} | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment