Angular Animation Framework

Demo Animations: 3d.html5-apps.com

• implementation as Angular module
• easy create, animate and do interactions on 3D objects with TypeScript
• attributes based on THREE.js library (docs)
• tweening methods based on TWEEN.js library (website)
• audio analyzer with dynamic frequency data
• 360 Videos
• VR/AR support (still in development)

Frameworks		Links
Angular CLI	Client Side TypeScript App	WEBSITE README
Three-js	3D Graphic API	WEBSITE README
TWEEN.js (github.com)	Tweening library	WEBSITE README

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

© 2020 - Moritz Petzka - petzka.com

For commercial use, contact: info@petzka.com

Main Component:

• /src/
  • /app/..
    • /three-animation/

---

For implementation in existing Projects, follow the steps in: .../three-animation/README.md

Example

create THREE.js mesh with MeshBasicMaterial and BoxGeometry and let it move:

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);
    }
}

Documentation

Create THREE.js mesh object

Example:

const box = this.animation.createObject('mesh', {
    material: {
       // properties for THREE.js material (more infos below)
       type: 'MeshBasicMaterial',
       color: '#ff00ec',
       transparent: true,
       opacity: .25
    },
    geometry: {
       // properties for THREE.js geometry (examples below)
       type: 'BoxGeometry',
       width: 5,
       height: 5,
       depth: 5,
    },
    mesh: {
       // properties for THREE.js mesh object
       receiveShadow: true,
       castShadow: true,
    }
});

More infos about THREE.js mesh: https://threejs.org/docs/#api/en/objects/Mesh

AnimationObject (main functions)

/* set attributes directly */

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

box.setRotation({x:0, y:(Math.PI / 2), z:0});

box.setScale({x:1, y:1, z:1});

box.lookAt({x:0, y:0, z:0});


/* tween attributes */

box.moveTo({x:0, y:0, z:50}, 5000, ()=>{
    // stuff after tween ended
}, 'Linear.None');

box.rotateTo({x:0, y:(Math.PI / 2), z:0}, 5000, ()=>{
    // stuff after tween ended
}, 'Linear.None');

box.scaleTo({x:0, y:(Math.PI / 2), z:0}, 5000, ()=>{
    // stuff after tween ended
}, 'Linear.None');


/* more stuff */

box.show(); 
box.hide();
box.remove();

// clone box
const boxClone = box.clone();

// append clone to scene
boxClone.appendTo(this.scene);
 


/* mouse events */

box.on('mousemove', (event)=>{});
box.on('mouseover', (event)=>{});
box.on('mouseout', (event)=>{});
box.on('mousedown', (event)=>{});
box.on('mouseup', (event)=>{});


/* collision detection */

box.on('collide', (collisionObject)=>{});

box.on('leave', (collisionObject)=>{});

Easing Types ('Linear.None' is default)

• Linear.None
• Quadratic.In
• Quadratic.Out
• Quadratic.InOut
• Cubic.In
• Cubic.Out
• Cubic.InOut
• Quartic.In
• Quartic.Out
• Quartic.InOut
• Quintic.In
• Quintic.Out
• Quintic.InOut
• Sinusoidal.In
• Sinusoidal.Out
• Sinusoidal.InOut
• Exponential.In
• Exponential.Out
• Exponential.InOut
• Back.In
• Back.Out
• Back.InOut
• Bounce.In
• Bounce.Out
• Bounce.InOut

more infos: https://sole.github.io/tween.js/examples/03_graphs.html

Available materials

Example:

this.animation.createObject('mesh', {
    ...
    material: {
        // properties for THREE.js material (more infos below)
        type: 'MeshBasicMaterial',
        color: '#ff00ec',
        transparent: true,
        opacity: .25
    },
    ...

For more information about material properties, visit: https://threejs.org/docs/#api/en/materials/Material

• MeshBasicMaterial
• MeshStandardMaterial
• MeshLambertMaterial
• MeshPhongMaterial
• MeshToonMaterial
• MeshNormalMaterial
• MeshDepthMaterial
• MeshDistanceMaterial
• MeshMatcapMaterial
• MeshPhysicalMaterial

Available geometries

More infos: https://threejs.org/docs/#api/en/core/Geometry

Example:

this.animation.createObject('mesh', { 
    ...,
    geometry: {
        type: 'BoxGeometry',
        width: 5,
        height: 5,
        depth: 5,
    },
    ...

BoxGeometry

geometry: {
    type: 'BoxGeometry',
    width: 1,
    height: 1,
    depth: 1,
    widthSegments: 1,
    heightSegments: 1,
    depthSegments: 1
}

More infos: https://threejs.org/docs/#api/en/geometries/BoxGeometry

CircleGeometry

geometry: {
    type: 'CircleGeometry',
    radius: 1,
    segments: 8,
    thetaStart: 0,
    thetaLength: (Math.PI * 2)
}

More infos: https://threejs.org/docs/#api/en/geometries/CircleGeometry

ConeGeometry

geometry: {
    type: 'ConeGeometry',
    radius: 1,
    height: 1,
    radialSegments: 8,
    heightSegments: 1,
    openEnded: false,
    thetaStart: 0,
    thetaLength: (Math.PI * 2)
}

More infos: https://threejs.org/docs/#api/en/geometries/ConeGeometry

CylinderGeometry

geometry: {
    type: 'CylinderGeometry',
    radiusTop: 1,
    radiusBottom: 1,
    height: 1,
    radialSegments: 8,
    heightSegments: 1,
    openEnded: false,
    thetaStart: 0,
    thetaLength: (Math.PI * 2)
}

More infos: https://threejs.org/docs/#api/en/geometries/CylinderGeometry

DodecahedronGeometry

geometry: {
    type: 'DodecahedronGeometry',
    radius: 1,
    detail: 0
}

More infos: https://threejs.org/docs/#api/en/geometries/DodecahedronGeometry

IcosahedronGeometry

geometry: {
    type: 'IcosahedronGeometry',
    radius: 1,
    detail: 0
}

More infos: https://threejs.org/docs/#api/en/geometries/IcosahedronGeometry

IcosahedronGeometry

geometry: {
    type: 'LatheGeometry',
    points: [],
    segments: 12,
    phiStart: 0,
    phiLength: (Math.PI * 2)
}

More infos: https://threejs.org/docs/#api/en/geometries/LatheGeometry

OctahedronGeometry

geometry: {
    type: 'OctahedronGeometry',
    radius: 1,
    detail: 0
}

More infos: https://threejs.org/docs/#api/en/geometries/OctahedronGeometry

ParametricGeometry

geometry: {
    type: 'ParametricGeometry',
    func: () => {
    },
    slices: 25,
    stacks: 25,
} 

More infos: https://threejs.org/docs/#api/en/geometries/ParametricGeometry

PlaneGeometry

geometry: {
    type: 'PlaneGeometry',
    width: 1,
    height: 1,
    widthSegments: 1,
    heightSegments: 1
}

More infos: https://threejs.org/docs/#api/en/geometries/PlaneGeometry

PolyhedronGeometry

geometry: {
    type: 'PolyhedronGeometry',
    vertices: [
      -1, -1, -1, 1, -1, -1, 1, 1, -1, -1, 1, -1,
      -1, -1, 1, 1, -1, 1, 1, 1, 1, -1, 1, 1,
    ],
    indices: [
      2, 1, 0, 0, 3, 2,
      0, 4, 7, 7, 3, 0,
      0, 1, 5, 5, 4, 0,
      1, 2, 6, 6, 5, 1,
      2, 3, 7, 7, 6, 2,
      4, 5, 6, 6, 7, 4
    ],
    radius: 1,
    detail: 1
}

More infos: https://threejs.org/docs/#api/en/geometries/PolyhedronGeometry

RingGeometry

geometry: {
    type: 'RingGeometry',
    innerRadius: 0.5,
    outerRadius: 1,
    thetaSegments: 8,
    phiSegments: 8,
    thetaStart: 0,
    thetaLength: (Math.PI * 2)
}

More infos: https://threejs.org/docs/#api/en/geometries/RingGeometry

SphereGeometry

geometry: {
    type: 'SphereGeometry',
    radius: 1,
    widthSegments: 8,
    heightSegments: 6,
    phiStart: 0,
    phiLength: (Math.PI * 2),
    thetaStart: 0,
    thetaLength: (Math.PI)
}

More infos: https://threejs.org/docs/#api/en/geometries/SphereGeometry

TetrahedronGeometry

geometry: {
    type: 'TetrahedronGeometry',
    radius: 1,
    detail: 1
}

More infos: https://threejs.org/docs/#api/en/geometries/TetrahedronGeometry

TextGeometry

geometry: {
    type: 'TextGeometry',
    text: 'Text',
    parameters: {
      font: null,
      size: 80,
      height: 5,
      curveSegments: 12,
      bevelEnabled: true,
      bevelThickness: 10,
      bevelSize: 8,
      bevelOffset: 0,
      bevelSegments: 5
    }
}

More infos: https://threejs.org/docs/#api/en/geometries/TextGeometry

TorusGeometry

geometry: {
    type: 'TorusGeometry',
    radius: 1,
    tube: .4,
    radialSegments: 8,
    tubularSegments: 6,
    arc: (Math.PI * 2)
}

More infos: https://threejs.org/docs/#api/en/geometries/TorusGeometry

TorusKnotGeometry

geometry: {
    type: 'TorusKnotGeometry',
    radius: 1,
    tube: .4,
    tubularSegments: 64,
    radialSegments: 8,
    p: 2,
    q: 3
}

More infos: https://threejs.org/docs/#api/en/geometries/TorusKnotGeometry

TubeGeometry

geometry: {
    type: 'TubeGeometry',
    path: null,
    tubularSegments: 64,
    radius: 1,
    radialSegments: 8,
    closed: false
}

More infos: https://threejs.org/docs/#api/en/geometries/TubeGeometry

Angular Project

This project was generated with Angular CLI version 9.0.5.

Installation

Run npm install -g @angular/cli to install Angular CLI. Run npm install to install dependencies.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.