Sebastian ViereckHier 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();
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;
}
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;
}
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
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):
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:
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.
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.