Skip to main content

Three.js Module

The Inworld Web SDK | Three.js Module is a Typescript based module for the Inworld Web SDK designed to allow you to easily integrate Inworld supported 3D characters into your React, Typescript and Javascript based projects. The goal is to simplify the process of loading and adding a Three.js avatar to your web 3D project.

You can start your experience from the provided React Examples and then create your own one using any JavaScript (TypeScript) library. Currently the module supports Inworld's 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:

Innequin

Ready Player Me:

RPM


Table of Contents​


Installing the Module ​

  • NPM version
    npm install @inworld/inworld-web-sdk
  • Yarn version
    yarn add @inworld/inworld-web-sdk
  • Include the library
    `import { Innequin } from "@inworld/inworld-web-sdk";`

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.

The files can be hosted locally by downloading the file and extracting it's contents into a folder accessible 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, which consists of JSON configurations, 3D models, 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.

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/v1/ 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/v1/  - 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 the configuration file and assets for Innequin.

Innequin


Ready Player Me Asset Loading Process ​

The following diagram explains the loading process of the configuration file and assets for RPM.

RPM