Ngx Profile Avatar

Interactive 3D Avatar Profile Viewer generated in Ready Player Me

Demo

• You can see a live demo here

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.
2. Customize the look of your 3D avatar.
3. 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.
2. Import NgxProfileAvatarModule in your app.module.

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:

<ngx-profile-avatar 
    [url]="url" 
    [tracker]="tracker" 
    [enableRotate]="true" 
    [enableZoom]="true" 
    (loading)="onLoadingAvatar($event)" 
    style="position: fixed;inset: 0;width: 50%;height: 100%;">
</ngx-profile-avatar>

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

Important

Preferably, define tracker as cursor . The face option is still experimental.