https://github.com/gitchaell/ngx-profile-avatar
Interactive 3D Avatar Profile Viewer generated in Ready Player Me
https://github.com/gitchaell/ngx-profile-avatar
3d-models angular avatar avatars component-library profile ready-player-me threejs
Last synced: 2 months ago
JSON representation
Interactive 3D Avatar Profile Viewer generated in Ready Player Me
- Host: GitHub
- URL: https://github.com/gitchaell/ngx-profile-avatar
- Owner: gitchaell
- License: mit
- Created: 2022-07-07T23:06:29.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2022-08-27T21:17:49.000Z (about 3 years ago)
- Last Synced: 2025-06-13T21:44:32.936Z (4 months ago)
- Topics: 3d-models, angular, avatar, avatars, component-library, profile, ready-player-me, threejs
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@michaelldev/ngx-profile-avatar
- Size: 44.1 MB
- Stars: 10
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Ngx Profile Avatar
Interactive 3D Avatar Profile Viewer generated in Ready Player Me
## Demo
- You can see a live demo [here](https://gitchaell.github.io/ngx-profile-avatar)
### Cursor Tracker
> The rotation of the model, head, eyes and neck will react to the movement of the cursor.
### Face Tracker
> Model rotation, head, neck and facial animations will react to your expressions and movements detected by the camera.
## Generate your 3D Avatar
1. Navigate to the following url: [vr.readyplayer.me/avatar](https://vr.readyplayer.me/avatar).
1. Customize the look of your 3D avatar.
1. When finished, copy the generated link to the file with extension `.glb` or download the file and add it to the `assets` folder of your project in `Angular`.
## Install NgxProfileAvatar
1. Install the library in your project with the command: `npm install @michaelldev/ngx-profile-avatar`.
1. Import `NgxProfileAvatarModule` in your `app.module`.
```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NgxProfileAvatarModule } from '@michaelldev/ngx-profile-avatar';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
AppRoutingModule,
//...
NgxProfileAvatarModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
```
1. Use the `ngx-profile-avatar` component as the example below:
```html
```
```typescript
import { Tracker } from '@michaelldev/ngx-profile-avatar/lib';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
url: string = 'assets/avatar.glb';
tracker: Tracker = 'cursor';
}
```
1. Component documentation
| Input | Description | Type | Default |
|:--------------|:------------|:-----|:--------|
| `[url]` | Public or local location of the `.glb` file containing the 3d model of your avatar. | `string` | `null` |
| `[tracker]` | Reaction method of your model.| `'cursor' 'face'` | `'cursor'` |
| `[enableRotate]` | Enable mouse interaction to rotate the model.| `boolean` | `true'` |
| `[enableZoom]` | Enables mouse interaction to zoom in and out of the model.| `boolean` | `true` |
| `(loading)` | Emitter of `.glb` file loading progress event or of the Facial Tracker initialization progress event.| `EventEmitter` | `-` |
> **Important**
>
> Preferably, define tracker as `cursor` . The `face` option is still experimental.