Kategorie: HTML5
-
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:
-
Arial kostenlos als Webfont einbinden auf einer Webseite
Wenn man gern Arial als Schriftart auf seiner Webseite einbinden will und möchte, dass auch alle Besucher diese Schriftart verwenden sollen, auch die, die es nicht installiert haben, muss man den Font als Webfont einbinden. Das Problem ist, dass Arial nicht frei verfügbar ist, sondern eine Lizenz dafür erworben werden muss: kostenpflichtiger Download. Wenn man…
-
HTML5 Datenbank mit persistence.js Tutorial
Mit persistence.js lässt sich eine lokale Datenbank mit Javascript erstellen ohne einen Datenbank-Server und eine Internet Verbindung. Unterstütze mobile OS von persistence.js: Android Browser (getestet auf 1.6 und 2.x) iPhone Browser (iPhone OS 3+) Moderne Webkit Browser (Google Chrome und Safari) Firefox (über Google Gears oder In-Memory Database und LocalStorage Fallback) Opera Palm WebOS (getestet…
-
Vortrag über HTML5
Hier ein Präsentation über HTML5 und die Möglichkeiten/Grenzen der Technologie in englischer Sprache. Gliederung: HTML & HTML5 Basics Facts Flash vs. HTML5 HTML5 – the new features Download Link: html5_presentation.ppt
-
Flash vs HTML5 Trendanalyse
Es gibt unzählige Diskussionen über die Vorteile von HTML5 und dem Ende von Adobe Flash, aber der Hauptindikator ist immer noch, wieviele Leute sich mit dem jeweiligen Thema beschäftigen und z.B. Artikel schrieben oder Programme entwickeln. Mit Hilfe von Google Trends lässt sich ein interessanter Überblick über das Interesse an den beiden Thema gewinnen, der…
-
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):