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 = "30px arial";
textArr  = textToArray ("Wordpress eigene Farben und CSS Klassen in den Editor einbauen", 300, context);
//textArr enhält ["Wordpress Plugin"] und ["selber erstellen Tutorial"]
textToArray = function(text, maxWidth, context){
    var textArr = new Array();
    var fragment = "";
    var lastCutPostion = 0;
    var lastPossibleCutPosition = 0;
    var charCounter = 0;
    var position = 0;
    $j.each(text, function(index, char) {
        if(char == " " && charCounter != 0)
        {
            fragment  = text.substring (lastCutPostion, position);
            //console.log(fragment);
            textWidth = context.measureText(fragment).width;
            //console.log(textWidth);
            if(textWidth > maxWidth)
            {
                //console.log("max width reched");
                fragment  = text.substring (lastCutPostion, lastPossibleCutPosition);
                //console.log(fragment);
                textArr.push(fragment);
                charCounter = -1 + (position - lastPossibleCutPosition);
                lastCutPostion = lastPossibleCutPosition + 1;
            }
            lastPossibleCutPosition = position;
        }
        position++;
        charCounter++;
    });
    //do not forget the last Word
    if(charCounter > 0)
    {
        fragment  = text.substring(lastCutPostion, text.length);
        textWidth = context.measureText(fragment).width;
        //console.log(textWidth);
        if(textWidth > maxWidth)
        {
            fragment  = text.substring (lastCutPostion, lastPossibleCutPosition);
            lastCutPostion = lastPossibleCutPosition + 1;
            textArr.push(fragment);
            fragment  = text.substring(lastCutPostion, text.length);
        }
        textArr.push(fragment);
    }
    return textArr;
}

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)
{
    context.translate( canvasWidth, canvasHeight);
    context.rotate(degree* Math.PI / 180);
    context.translate(0, 0);
    return context;
}

Anordnen von WebGl 3D Objekten mit three.js

var pageRotation = 0.9; 
var pageHeight = 300; 
var pageWidth = 200; 
var pageLength = 20; 

bookPageContainer = new THREE.Object3D(); 
bookPageContainer.rotation.x = pageRotation;

//linkes Buchhälfte
 leftPageContainer = new THREE.Object3D();
 leftPageContainer.position.set( -pageLength/2, 0, 0 );
 leftPageContainer.rotation.z = -Math.PI * 0.5;
 leftPageCon = new THREE.CubeGeometry( pageWidth, pageLength, pageHeight, 1,1,1, loadLeftPageTextures());
 leftPage = new THREE.Mesh(leftPageCon, new THREE.MeshFaceMaterial());
 leftPage.position.set( -100, 0, 0 );
 leftPageContainer.add( leftPage );
 bookPageContainer.add( leftPageContainer );

//Buchrücken
 bookSideCon = new THREE.CubeGeometry( pageHeight, 1, 2* pageLength, 1,1,1, getBookSideTextureWithText("Buchrücken"));
 bookSide = new THREE.Mesh(bookSideCon, new THREE.MeshFaceMaterial());
 bookSide.position.set( 0, -pageLength/2 , 0 );
 bookSide.rotation.y = -Math.PI/2;
 bookPageContainer.add( bookSide );

//rechte Buchhälfte
 rightPageContainer = new THREE.Object3D();
 rightPageContainer.position.set( pageLength/2, 0, 0 );
 rightPageContainer.rotation.z = Math.PI * 0.5;
 rightPageCon = new THREE.CubeGeometry( pageWidth, pageLength, pageHeight, 1, 1, 1 , new THREE.MeshLambertMaterial( { color: 0x00ff00, wireframe: false, needsUpdate: true } )) ;
 rightPage = new THREE.Mesh(rightPageCon, new THREE.MeshFaceMaterial());
 rightPage.position.set( 100, 0, 0 );
 rightPageContainer.add( rightPage );
 bookPageContainer.add( rightPageContainer );

scene.add(bookPageContainer);

Ergebnis (Perspektive ist geändert worden):

WebGL Tutorial mit three.js

Mit Hilfe von WebGL lassen sich 3D Animation, Spiele und Webseiten komplett in 3D ohne Plugin (wie bei Flash) realisieren. WebGL wird erst von wenigen Browser unterstützt, was der Hauptnachteil ist:

  • Firefox ab 4.0
  • Chrome ab 9.0
  • Safari (OS X) ab 5.1 (ist aber standardmäßig deaktiviert)
  • Opera, nur Beta-Builds
  • Internet Explorer, aus “Sicherheitsgründen” wahrscheinlich nie
  • Android Standard Browser, sehr viele
  • iOS, theoretisch ja ab iOS5.0, aber praktisch nur für iAds für schicke Werbung (typisch Apple, Hauptsache Geld verdienen)

Als Testbrowser zur Entwicklung empfiehlt sich Chrome aufgrund der Geschwindigkeit und der sehr guten Unterstützung. Google ist sehr bemüht WebGL voranzutreiben und bietet auf einer eignen Webseite eine sehr gute Übersicht über interessante Projekte.

Vom Standard her basiert WebGL auf OpenGL ES2.0, optimiert für mobil Anwendungen und deren niedrige Leistungsfähigkeit.

WebGL mit three.js

Zur 3D Programmierung im Browser mit WebGL sollten man auf jeden Fall ein leistungsstarkes Framework benutzen. Ich habe mich für three.js entschieden, da es das z.Z. populärste mit den meisten Tutorials und Erweiterungen ist. Laut Aussage der Entwickler ist es auch das einfachste Framework:

“The aim of the project is to create a lightweight 3D library with a very low level of complexity — in other words, for dummies.”

Alle Feature gibt es hier.

Ein paar sehr intreressante Demos: Skin, Terrain, Text, Sammlung alles Demos.

Lizenz: MIT License

Dokumentation (Version 49): Doku, allgemein ist die Doku noch ausbaufähig und enthält nur Todos und keine richtige Hilfe. Ein dicker Nachteil. Es wird oft empfohlen sich anhand der mitgelieferten Samples in die benötigten Methoden und Objekte einzuarbeiten, was auch gut funktioniert.

Eine Übersicht über alle WebGL Frameworks findet man hier (z.Z. ca. 30 Stück). Der Hoster dieser Seite Khronos ist übrigends der Entwickler des WebGL Standards. weiterlesen…