Image As Particles

Angular library to show images as particles with using three.js

This library is based on the great work and code of Bruno Imbrizi and brought to Angular.

A description and a tutorial how the project was created can be found on https://tympanus.net/codrops/2019/01/17/interactive-particles-with-three-js/

Original image	Image as interactive particles

Demo

Showcase

ng-image-as-particles used on a homepage on welcome page: https://lenny-the-samoyed.firebaseapp.com/

Dependencies

• Angular (requires Angular 10+ )
• three.js (requires threejs 0.123.0 )

Installation

1. Install version 0.123.0 of three.js via npm:

npm install three@0.123.0

2. Install ng-image-as-particles via npm:

npm install ng-image-as-particles

Once installed you need to import the main module:

import { NgImageAsParticlesModule } from 'ng-image-as-particles';

@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgImageAsParticlesModule],  
  bootstrap: [AppComponent]
})
export class AppModule {
}

Usage

<lib-image-as-particles [imageUrl]="selectedUrl" touchAction="none"
            imageWidth="90%" imageHeight="90%" backgroundColor="#222222"
            horizontalAlignment="center" verticalAlignment="center">
</lib-image-as-particles>

API