3.0.1 • Published 2 years ago
@michaelldev/ngx-profile-avatar v3.0.1
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
- Navigate to the following url: vr.readyplayer.me/avatar.
- Customize the look of your 3D avatar.
- When finished, copy the generated link to the file with extension
.glb
or download the file and add it to theassets
folder of your project inAngular
.
Install NgxProfileAvatar
- Install the library in your project with the command:
npm install @michaelldev/ngx-profile-avatar
. - Import
NgxProfileAvatarModule
in yourapp.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 { }
- 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';
}
- 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<ProgressEvent> | - |
Important
Preferably, define tracker as
cursor
. Theface
option is still experimental.