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
For implementation in existing Projects, follow the steps in: .../three-animation/README.md
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); } }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
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
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
This project was generated with Angular CLI version 9.0.5.
Run npm install -g @angular/cli to install Angular CLI. Run npm install to install dependencies.
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.
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.
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.
Run ng test to execute the unit tests via Karma.
Run ng e2e to execute the end-to-end tests via Protractor.
To get more help on the Angular CLI use ng help or go check out the Angular CLI README.