@inworld/web-threejs
TypeScript icon, indicating that this package has built-in type declarations

1.6.0 • Public • Published

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:

Innequin

Ready Player Me:

RPM


Table of Contents


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.

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.

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.

Innequin


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.

RPM


Ready Player Me Character Rreation

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

Package Sidebar

Install

npm i @inworld/web-threejs

Weekly Downloads

4

Version

1.6.0

License

SEE LICENSE IN LICENSE.md

Unpacked Size

533 kB

Total Files

99

Last publish

Collaborators

  • tshashkova_inworld
  • ilyaplatonov_inworldai