A-Frame Exokit Avatars

This A-Frame component provides an easy way to integrate a full-body IK avatar in WebXR through my fork of the Exokit Avatars system.

Usage

The following is the most basic scene setup that will load in an avatar:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    <title>A-Frame Exokit Avatars</title>
  </head>
  <body>
    <a-scene>
      <a-assets>
        <a-asset-item id="model" src="./dan.glb"></a-asset-item>
      </a-assets>
      <a-plane id="ground" rotation="-90 0 0" color="green" height="10" width="10"></a-plane>
      <a-light type="directional" intensity="0.5"></a-light>
      <a-light type="ambient" intensity="0.5"></a-light>
      <a-sky color="blue"></a-sky>
      <a-entity avatar="model: #model"></a-entity>
      <a-entity id="player">
        <a-camera id="head" near="0.1" wasd-controls look-controls></a-camera>
        <a-entity id="leftHand" tracked-controls="hand: left"></a-entity>
        <a-entity id="rightHand" tracked-controls="hand: right"></a-entity>
      </a-entity>
    </a-scene>
  </body>
</html>

Considerations

If implementing some form of touchpad or thumbstick movement, ensure your avatar is not parented under the player/camera rig object, as this will prevent the leg IK from functioning properly.
By default, the tracked-controls component in A-Frame reports controller pose based on target ray space by default instead of grip space (refer to the WebXR Device API for more details). It's more than likely there might be some noticeable offset in the hand positions from where your controllers are. There is currently an open PR to let grip space be used for pose reporting, but in the meantime you may want to apply some manual offset to your controller pose to compensate.

Schema

Property	Type	Description	Default Value
model	model	A selector or path to an avatar model
thirdPerson	boolean	Whether this is an avatar for a different player than the user	false
player	selector	An element representing the player/camera rig	#player
head	selector	An element representing the main camera of the scene	#head
leftHand	selector	An element representing the tracked left hand	#leftHand
rightHand	selector	An element representing the tracked right hand	#rightHand
fingers	bool	Whether or not to animate finger poses (point, grip)	true
hair	bool	Whether or not to animate hair	true
decapitate	bool	Whether or not to remove the head of the model	false
visemes	bool	Whether or not to animate visemes on the model (mouth, blinking)	true
muted	bool	Whether or not to passthrough mic audio into the page.	true
debug	bool	Whether or not to render debug meshes.	false

ReferenceError: window is not defined

After cloning project and running npm install, I received:

topher@matrix aframe-exokit-avatars % node index.js
node:internal/errors:464
ErrorCaptureStackTrace(err);
^

Error [ERR_MODULE_NOT_FOUND]: Cannot find package '/Users/topher/Projects/aframe-exokit-avatars/node_modules/exokit-avatars/' imported from /Users/topher/Projects/aframe-exokit-avatars/index.js
at new NodeError (node:internal/errors:371:5)
at legacyMainResolve (node:internal/modules/esm/resolve:335:9)
at packageResolve (node:internal/modules/esm/resolve:877:14)
at moduleResolve (node:internal/modules/esm/resolve:929:18)
at defaultResolve (node:internal/modules/esm/resolve:1044:11)
at ESMLoader.resolve (node:internal/modules/esm/loader:422:30)
at ESMLoader.getModuleJob (node:internal/modules/esm/loader:222:40)
at ModuleWrap. (node:internal/modules/esm/module_job:76:40)
at link (node:internal/modules/esm/module_job:75:36) {
code: 'ERR_MODULE_NOT_FOUND'
}

So I ran npm install exokit-avatars followed by an npm run build which cleared the above error but now I'm getting the following window error:

node index.js
file:///Users/topher/Projects/aframe-exokit-avatars/node_modules/exokit-avatars/dist/avatars.module.js:1868
window.Avatar = Avatar;
^

ReferenceError: window is not defined
at file:///Users/topher/Projects/aframe-exokit-avatars/node_modules/exokit-avatars/dist/avatars.module.js:1868:1
at ModuleJob.run (node:internal/modules/esm/module_job:185:25)
at async Promise.all (index 0)
at async ESMLoader.import (node:internal/modules/esm/loader:281:24)
at async loadESM (node:internal/process/esm_loader:88:5)
at async handleMainPromise (node:internal/modules/run_main:65:12)

Any help would be greatly appreciated! Thanks!

msub2 / aframe-exokit-avatars Goto Github PK