Demo (Retro Audio Visualisation): 3d.mucke.online
• implementation as Angular component
• 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
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.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); } }/* 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.appendTo(<THREE.js Object>); /* 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)=>{});- Linear.None (default)
- 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
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.