0.0.6 • Public • Published


About the project

A collection of components to integrate Backpack into your A-Frame project. Backpack is an open-source, virtual backpack for the Metaverse.

Getting started


  • npm

    Install npm as this project uses npm as a package manager. NOTE: This installation command requires brew and only runs on Mac.

    $ brew install node


  1. Clone the repo
    $ git clone https://github.com/Metaverse-Backpack/backpack-aframe-client-sdk.git
  2. Install NPM packages
    $ npm install


Integrate in your existing A-Frame project

To integrate the Backpack A-Frame components into your existing project, add the following dependencies in your <head> tag underneath your A-Frame import.

<script src="https://cdn.jsdelivr.net/npm/@metaverse-backpack/backpack-aframe-client-sdk/dist/backpack-aframe-client-sdk.min.js"></script>

There are various A-Frame components with different purposes:

Component Purpose Status
backpack-avatar-selector Automatically creates a room with all your avatars and provides a selection mechanism Draft, Tied to Meditation PoC demonstrator
backpack-portal Portal that automatically listens to the events from backpack-avatar-selector and takes the selected avatar as query parameter to the portal link Draft, Tied to Meditation PoC demonstrator
backpack-avatar Component that automatically loads an avatar from the backpack by providing the backpack item ID Draft, Tied to Meditation PoC demonstrator

Directly use this project


For development, the Backpack A-Frame components can be seen in various examples by starting a local webserver:

# Start development webserver in watch mode (automatically reload if files change)
$ npm run start

Navigate to http://localhost:9000 to choose one of the examples.

  1. Basic example of an avatar selection room based on Backpack
  2. Basic example of loading an avatar from the Backpack


For production, the Backpack A-Frame components can be built and minified with the following command:

# Build component in production
$ npm run dist

It builds the components for production to the dist folder. It contains a minified and non-minified version.

Custom provider modules

Each avatar provider can provide a custom module to extend the generalized functionality of the backpack-avatar component. E.g., use different rigging for different providers as their bone structure differs from each other. Feel free to contribute your very own provider module, please check Contributing for further instructions. A provider module is a function that receives the Avatar element avatarEl as a parameter and additionally gets access to the context of the component bind to this, specifically to this.data. To illustrate, here is an example adding a custom idle animation to ReadyPlayerMe avatars by using the rig-animation component:

  "ready-player-me": function (avatarEl) {
    avatarEl.setAttribute("rig-animation", {
        this.data.metadata.outfitGender === "masculine"
          ? "animated-m"
          : "animated-f",
      clip: "IDLE",
      loop: "repeat",
      crossFadeDuration: 0,


Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/amazing-feature)
  3. Commit your Changes (git commit -m 'add some amazing feature')
  4. Push to the Branch (git push origin feature/amazing-feature)
  5. Open a Pull Request


Distributed under the MIT License. See LICENSE.txt for more information.

Related projects


Benedikt Wölk - @web3woelk - benedikt.woelk@protocol.ai

Tobias Petrasch - @TPetrasch - tobias.petrasch@protocol.ai


Package Sidebar


npm i @metaverse-backpack/backpack-aframe-client-sdk

Weekly Downloads






Unpacked Size

660 kB

Total Files


Last publish


  • pl-tobias-petrasch