Kategorie: WebGL
-
Angular three.js Demo
Mit den folgenden Schritten kann man eine webgl three.js Komponenete in Angular erstellen: Installiere Three.js als Abhängigkeit: 2. Installiere die Three.js-Typdefinitionen, um die Typüberprüfung und Code-Intelligenz in deinem Angular-Projekt zu verbessern. Führe den folgenden Befehl aus: 3. Erstelle einer Angular Komponente Ergebnis:
-
Three.js Tween Übersicht Animationen Möglichkeiten
Hier gibt es eine sehr gut Abbildung der möglichen Animation (Tweens) in Three.js: http://www.grasshopper3d.com/profiles/blogs/port-of-robert-penner-s-easing-equations?xg_source=activity (siehe sehr gute Abbildung in den Kommentaren) Zum Einbinden ist das sehr hilfreich: Tutorial Tween three.js Ein kleines Beispiel für einen Tween: new TWEEN.Tween( cube.rotation ) .to( { y: (cube.rotation.y + Math.PI/2)}, 1500 ) .easing( TWEEN.Easing.Back.EaseInOut).start();
-
HTML5 Canvas Text auf Canvas schreiben richtiger Zeilenumbruch
Wenn man einen bestimmten Text auf einen Canvas schreiben will und dafür bestimmen will, wann ein Text umgebrochen werden muss, kann man die folgende Funktion benutzen, die aus einem Text in Array macht in Abhängigkeit des Canvas. Bsp: var canvas = document.createElement(„canvas“); var context = canvas.getContext(„2d“); //vorher muss Schriftgröße des Canvas gesetzt werden context.font =…
-
Canvas rotieren um 180 Grad
Zum rotieren eines Canvas um den Mittelpunkt um 180 oder 90 Grad, kann man folgende Funktion benutzen. 90 Grad = nach rechts drehen 180 Grad = auf den Kopf stellen 270 Grad/ -90 Grad = nach Links drehen var x = document.createElement(„canvas“); var context = x.getContext(„2d“); rotateCanvas(180, context) rotateCanvas= function(degree, context) { …
-
Three.js Camerasteuerung mit der Tastatur
Um mit der Tastatur (a,w,s,d und q,e und t,g,f,h) in einem three.js 3D-Projekt die Kamera zu bewegen, sind ein paar einfach Schritte nötig. in der init-Methode document.addEventListener( ‚keypress‘, onDocumentKeyPress, false ); und eine einfache Methode
-
Anordnen von WebGl 3D Objekten mit three.js
Ergebnis (Perspektive ist geändert worden):