Three.js Tween Overview animation options

There is a very good illustration of the kinds of animation (Tweens) in Three.js: (see very good image in the comments)

To incorporate the very helpful: Tutorial Tween three.js


A small example of a tween:

new TWEEN.Tween( cube.rotation )
        .to( { y: (cube.rotation.y + Math.PI/2)}, 1500 )
        .easing( TWEEN.Easing.Back.EaseInOut).start();

HTML5 Canvas Canvas write text on real line break

If you want to write some text on a canvas and it will determine, when a text has to be wrapped, You can use the following function, the making of a text array in a function of the Canvas.


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);
            textWidth = context.measureText(fragment).width;
            if(textWidth > maxWidth)
                //console.log("max width reched");
                fragment  = text.substring (lastCutPostion, lastPossibleCutPosition);
                charCounter = -1 + (position - lastPossibleCutPosition);
                lastCutPostion = lastPossibleCutPosition + 1;
            lastPossibleCutPosition = position;
    //do not forget the last Word
    if(charCounter > 0)
        fragment  = text.substring(lastCutPostion, text.length);
        textWidth = context.measureText(fragment).width;
        if(textWidth > maxWidth)
            fragment  = text.substring (lastCutPostion, lastPossibleCutPosition);
            lastCutPostion = lastPossibleCutPosition + 1;
            fragment  = text.substring(lastCutPostion, text.length);
    return textArr;

Um rotieren Canvas 180 Degree

To rotate a canvas at about the midpoint 180 or 90 Degree, can use the following function.

90 = Degree turn to the right

180 Degree = upside

270 Degree / -90 = Degree turn to the left


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;

Arranging WebGL 3D objects with 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 );

 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 );


Result (Perspective has been changed):

WebGL Tutorial mit three.js

Using WebGL 3D animation can be, Games and websites in full 3D without Plugin (As with Flash) realize. WebGL is only supported by a few browsers, which is the main disadvantage is:

  • Firefox ab 4.0
  • Chrome ab 9.0
  • Safari (OS X) from 5.1 (is disabled by default)
  • Opera, nur Beta-Builds
  • Internet Explorer, from “Safety” probably never
  • Android Standard Browser, a great many
  • iOS, Theoretically yes from iOS5.0, but in practice only for iAds for sending advertising (typisch Apple, The main thing money)

As for development, test browser Chrome is recommended due to the speed and the excellent support. Google's push very hard on WebGL and provides a suitable site very good Overview of interesting projects.

From standard ago based on OpenGL ES2.0 WebGL, optimized for mobile applications and their low efficiency.

WebGL mit three.js

To 3D programming in the browser using WebGL you should definitely be using a powerful framework. I chose three.js decided, because the z.Z. popular with most tutorials and extensions. According to the developers, it is also the simplest 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.”

All feature it here.

A few very intreressante demos: Skin, Field, Text, Collection of all demos.

License: MIT License

Documentation (Version 49): Doku, generally, the document is still scalable and contains only Todos and no real help. A thick disadvantage. It is often recommended to familiarize yourself using the included samples in the required methods and properties, what works well.

A Overview of all WebGL Frameworks you can find here (z.Z. as. 30 Piece). The hosting of this site BTW is the developer of the Khronos WebGL standards. more…