Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/srcnalt/3d-profile-avatars
Add your website a 3D Profile Avatar using Ready Player Me with a single line of code!
https://github.com/srcnalt/3d-profile-avatars
avatar gravatar metaverse node-package ready-player-me
Last synced: 17 days ago
JSON representation
Add your website a 3D Profile Avatar using Ready Player Me with a single line of code!
- Host: GitHub
- URL: https://github.com/srcnalt/3d-profile-avatars
- Owner: srcnalt
- Created: 2021-07-31T10:00:06.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-07-10T08:16:06.000Z (over 1 year ago)
- Last Synced: 2024-10-10T19:25:13.750Z (about 1 month ago)
- Topics: avatar, gravatar, metaverse, node-package, ready-player-me
- Language: TypeScript
- Homepage:
- Size: 86.6 MB
- Stars: 108
- Watchers: 4
- Forks: 27
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://twitter.com/sgt3v)
[](https://badge.fury.io/js/%40sarge%2Favatar-view)
# 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 `` component yo your return content
```tsx
import { AvatarView } from "@sarge/avatar-view";
const type = "3D";
const url = "https://models.readyplayer.me/62ea7bc28a6d28ec134bbcce.glb";
export default function App()
{
return
}
```
If you are using `Next.js` make sure to import the component dynamically using `ssr: false` parameter.
```tsx
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` or `Low`.
- **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.