README.md

Three Animation Component

Demo Animations: 3d.html5-apps.com

This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License.

© 2020 - Moritz Petzka - petzka.com

Installation _{^{(to existing Angular project)}}

clone project to any temporary folder
git clone https://github.com/jodermo/angular-animation-framework

move or copy the whole component folder src/app/three-animation to your project

Install dependencies:

npm install three --save
npm install stats-js --save
npm install @tweenjs/tween.js --save
npm install physijs-webpack --save
npm install camera-controls --save
npm install three-orbitcontrols-ts --save

add to app.module.ts

    import { ThreeAnimationModule } from './three-animation/three-animation.component';

   @NgModule({
     imports: [
       ThreeAnimationModule,
     ],
    ...

Create animations _{^{(with Angular CLI)}}:

To create a new animation, you have to generate a new component:

Run ng generate component my-animation

edit the component.ts file:

imports:

import { Component, ElementRef, Renderer2 } from '@angular/core';
import { ThreeAnimationComponent } from '../three-animation/three-animation.component';
import { AnimationObject, AnimationObjectOptions } from '../three-animation/classes/animation-object';

change tamplateUrl and styleUrls :

@Component({
    selector: 'my-animation',
    templateUrl: '../three-animation/three-animation.component.html',
    styleUrls: ['../three-animation/three-animation.component.css']
})

set component as ThreeAnimationComponent :

export class MyAnimationComponent extends ThreeAnimationComponent {
  
}

add constructor :

export class MyAnimationComponent extends ThreeAnimationComponent {

    constructor(public elementRef: ElementRef, public _renderer: Renderer2) {
      super(elementRef, _renderer);
    }

}

add main functions :

export class MyAnimationComponent extends ThreeAnimationComponent {

    constructor(public elementRef: ElementRef, public _renderer: Renderer2) {
      super(elementRef, _renderer);
    }
    
    start(){
        // stuff after three scene is created
    }
    
    animateFrame(){
        // stuff when frame updates...
    }   

}

the whole file:

import { Component, ElementRef, Renderer2 } from '@angular/core';
import { ThreeAnimationComponent } from '../three-animation/three-animation.component';
import { AnimationObject, AnimationObjectOptions } from '../three-animation/classes/animation-object';


@Component({
    selector: 'my-animation',
    templateUrl: '../three-animation/three-animation.component.html',
    styleUrls: ['../three-animation/three-animation.component.css']
})
export class MyAnimationComponent extends ThreeAnimationComponent {

    constructor(public elementRef: ElementRef, public _renderer: Renderer2) {
      super(elementRef, _renderer);
    }
    
    start(){
            // stuff after three scene is created
    }
        
    animateFrame(){
            // stuff when frame updates...
    }   
}

Example

create object and let it move on start:

create mesh object (THREE.js BoxGeometry & MeshBasicMaterial):

        const box: AnimationObject = this.animation.createObject('mesh', {
            material: {
                type: 'MeshBasicMaterial',
                color: '#ff00ec',
                transparent: true,
                opacity: .25
            },
            geometry: {
                type: 'BoxGeometry',
                width: 5,
                height: 5,
                depth: 5,
            },
            mesh: {
                receiveShadow: true,
                castShadow: true
            },
            position: {
                x: 10,
                y: 0,
                z: 0
            }
        } as AnimationObjectOptions, ()=>{
            // stuff after object is successful created
        });

let the box move to position X:0, y:0, z:50 in 5 seconds:

        box.moveTo({x:0, y:0, z:50}, 5000);

the whole file:

import { Component, ElementRef, Renderer2 } from '@angular/core';
import { ThreeAnimationComponent } from '../three-animation/three-animation.component';
import { AnimationObject, AnimationObjectOptions } from '../three-animation/classes/animation-object';


@Component({
    selector: 'my-animation',
    templateUrl: '../three-animation/three-animation.component.html',
    styleUrls: ['../three-animation/three-animation.component.css']
})
export class MyAnimationComponent extends ThreeAnimationComponent {

    constructor(public elementRef: ElementRef, public _renderer: Renderer2) {
      super(elementRef, _renderer);
    }
    
    start(){

        const box: AnimationObject = this.animation.createObject('mesh', {
            material: {
                type: 'MeshBasicMaterial',
                color: '#ff00ec',
                transparent: true,
                opacity: .25
            },
            geometry: {
                type: 'BoxGeometry',
                width: 5,
                height: 5,
                depth: 5,
            },
            mesh: {
                receiveShadow: true,
                castShadow: true
            },
            position: {
                x: 10,
                y: 0,
                z: 0
            }
        } as AnimationObjectOptions, ()=>{
            // stuff after object is successful created
        });
        
        box.moveTo({x:0, y:0, z:50}, 5000);
    }
}