Inworld AI Web SDK | Three.js Module

The Inworld AI Web SDK | Three.js Module is a Node.js/Typescript based module for the Inworld Web SDK designed to simplify the process of loading and adding an Inworld supported 3D avatar to your Three.js project. Currently the module supports Inworld's mascot Innequin and Ready Player Me avatar characters.

Note: Example source assets for the models, animations and *textures ( *Innequin Only ), are downloaded automatically as explained in the instructions below.

We recommend you review our React based Example Projects for both Innequin and Ready Player Me, as demostrations of how to integrate the avatars into your own projects.

Innequin:

Ready Player Me:

Table of Contents

• Installing the Module
  • Innequin Specific Setup
  • RPM Specific Setup
• Asset Loading Process
  • Innequin
  • RPM
• Example Projects
  • Innequin React
  • RPM React

Installing the Module

The following are NPM and Yarn command line

• NPM version npm install @inworld/web-threejs

• Yarn version yarn add @inworld/web-threejs

Innequin Specific Setup

This project requires you to host the assets files, consisting of JSON configuration, 3D model, animations and textures. These assets are automatically downloaded and installed as apart of the yarn install process in the postinstall phase. These assets are version controlled via the version.json.

Here is the link to manually download the source files.

• innequin-assets-v5.zip - Contains all Innequin asset files and config.json.

The files can be hosted locally by downloading the file and extract it's contents into a folder accessable by a running webserver. For example the assets for the Innequin React Example we recommend placing them in the /public/assets/v5/ folder within that example. The version.json file contained within the assets zip should be installed to the root at /public/assets/.

Note: If you wish to change the recommended location of the assets for our Innequin example project, you will need to update the environment variables REACT_APP_INNEQUIN_BASE_URI and REACT_APP_INNEQUIN_CONFIG_URI located in the .env file you create during the setup of the examples.

Example asset folder structure:

/public/assets/v5/  - The base folder for all following Innequin assets.
    images/         - The background images used in our Studio Avatar Creator.
    models/         - The animation and mesh model files in GLB format.
    textures/       - The textures used for the mesh and facial animations.
    config.json     - The file that defines the settings for a Innequin avatar.

RPM Specific Setup

This project requires you to host the assets files, consisting of JSON configuration, 3D model, animations and textures. These assets are automatically downloaded and installed as apart of the yarn install process in the postinstall phase. These assets are version controlled via the version.json.

Here is the link to manually download the source files.

• rpm-assets-v3.zip - Contains all RPM asset files and config.json.

The files can be hosted locally by downloading the file and extract it's contents into a folder accessable by a running webserver. For example the assets for the RPM React Example we recommend placing them in the /public/assets/v3/ folder within that example. The version.json file contained within the assets zip should be installed to the root at /public/assets/.

Note: If you wish to change the recommended location of the assets for our Ready Player Me Example Project, you will need to update the environment variables REACT_APP_RPM_BASE_URI and REACT_APP_RPM_CONFIG_URI located in the .env file you create during the setup of the examples.

Example asset folder structure:

/public/assets/v3/  - The base folder for all following Ready Player Me assets.
    animations/     - The Three.js based JSON animation files.
    models/         - The animation and mesh model files in GLB format.
    config.json     - The file that defines the settings for a Innequin avatar.

Innequin Asset Loading Process

The following diagram explains the loading process of both the configuration file and 3D asset files for a Innequin avatar.

Ready Player Me Asset Loading Process

The following diagram explains the loading process of both the configuration file and 3D asset files for a Ready Player Me avatar.

Ready Player Me Character Rreation

https://models.readyplayer.me/65ca3211555ef713271e81dd.glb