@flippit/visage v0.1.29
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
- relative
- Base64 strings
data:application/octet-stream;base64
data:model/gltf-binary;base64
- Binary input such as
model/gltf-binary
License
Visage is MIT licensed.
5 months ago
5 months ago
5 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago