@sarge/avatar-view
v0.3.4-rc.0
Published
[![Twitter](https://img.shields.io/twitter/url/https/twitter.com/sgt3v.svg?style=social&label=Follow%20%40sgt3v)](https://twitter.com/sgt3v) [![npm version](https://badge.fury.io/js/%40sarge%2Favatar-view.svg)](https://badge.fury.io/js/%40sarge%2Favatar-
Downloads
33
Readme
3D Profile Avatars
Add your website a 3D Profile Avatar using Ready Player Me with a single line of code!
Test it on CodeSandbox: https://codesandbox.io/s/avatar-view-wrn2u
Install
- Run
npm i @sarge/avatar-view
Example
First visit https://readyplayer.me and create a half-body avatar.
Copy the url of the .glb file of the avatar you created.
Import
AvatarView
to your file.Add
<AvatarView type={type} url={url}/>
component yo your return content
import { AvatarView } from "@sarge/avatar-view";
const type = "3D";
const url = "https://models.readyplayer.me/62ea7bc28a6d28ec134bbcce.glb";
export default function App()
{
return <AvatarView type={type} url={url}/>
}
If you are using Next.js
make sure to import the component dynamically using ssr: false
parameter.
const AvatarView = dynamic(async () => (await import('@sarge/avatar-view')).AvatarView, { ssr: false })
Parameters of AvatarView
type ("2D" | "3D"):
Type of the avatar 2D image or 3D model avatar.
url (string):
Url of the Ready Player Me avatar to load. This parameter is mandatory.
style (React.CSSProperties) [optional]:
Style of the avatar view canvas. Here you can change the border style, background color or image, width, height and other style options.
options2D (Options2D) [optional]:
Options for
type
"2D" avatar.scale (Vector2) [optional]:
Scale of the 2D avatar image.
position (Vector2) [optional]:
Position of the 2D avatar in pixels.
options3D (Options3D) [optional]:
Options for
type
"3D" avatar.quality (Quality) [optional]:
Avatar quality option to help reduce the size of the 3D model. Can be
High
,Medium
orLow
.camera (CameraOptions) [optional]:
Ortographic camera options.
transform (Transform) [optional]:
Position, rotation and scale of the 3D avatar.
blinkEyes (boolean) [optional]:
Enables eye blinking in random intervals.
followCursor (boolean) [optional]:
When enabled, head and eyes of the avatar will follow of the cursor. Cursor must be moving on the 3D canvas. When cursor is out of the canvas, avatar goes back to initial stance.
orbitControl (boolean) [optional]:
Enables use of orbit controls for the 3D scene, which helps you rotate the avatar via mouse drag.
onLoaded (void) [optional]:
Callback method get notified when 2D or 3D avatar is loaded.
onFailed (void) [optional]:
Callback method get notified when 2D or 3D avatar is failed to load.
fallback (React.ReactNode) [optional]:
Fallback content to display if avatar fails to load.