@flippit/visage

Visage ·

Visage is a collection of components for showcasing Ready Player Me avatars and 3D on the web!

Built with three.js, react-three-fiber, drei, three-stdlib and react.

Installation

Visage is available as an npm package.

npm install @readyplayerme/visage

Make sure to install peer-dependencies if your project doesn't already include them:

npm install @react-three/drei@9.79.3 @react-three/fiber@8.13.5 @react-three/postprocessing@2.15.0 three@0.154.0 three-stdlib@2.23.13 suspend-react@0.1.3 postprocessing@6.32.2

Documentation & examples

You can find all code examples of the components and their documentation on our GitHub page.

Here is the first one to get you started:

import React from 'react';
import ReactDOM from 'react-dom';
import { Avatar } from '@readyplayerme/visage';

const modelSrc = 'https://readyplayerme.github.io/visage/male.glb';

function App() {
  return (
    <Avatar modelSrc={modelSrc} />
  );
}

ReactDOM.render(<App />, document.querySelector('#app'));

Validation

Props such as modelSrc, animationSrc and poseSrc are validated before rendering on the scene.

Supported resource formats are:

• URL resources
  • relative /headwear.glb
  • absolute https://readyplayerme.github.io/visage/male.glb?queryParams=allowed
• Base64 strings
  • data:application/octet-stream;base64
  • data:model/gltf-binary;base64
• Binary input such as model/gltf-binary

License

Visage is MIT licensed.