cube_animation.js

var three = THREE;

makeFrame = function(rotation) {
    var width = 200;
    var height = 150;
    var scene = new three.Scene();
    var camera = new three.PerspectiveCamera(30, width/height, 0.1, 500);
    var renderer = new three.WebGLRenderer();
    renderer.setSize(width, height);

    var group = new THREE.Group();
    group.rotation.x = Math.PI/3.3; //(1/Math.sqrt(3));
    group.rotation.y = Math.PI/4;

    var geometry = new three.BoxGeometry(1, 1, 1);
       var faceMaterial = new three.MeshBasicMaterial({
      color: 0x555555,
      transparent: true,
      opacity: 0.6
    });
    var material = new three.MeshFaceMaterial([
        faceMaterial,
        faceMaterial,
        faceMaterial,
        faceMaterial,
        faceMaterial,
        faceMaterial
    ]);
    var cube = new three.Mesh(geometry, material);
    group.add(cube);

    var geometry2 = new three.CylinderGeometry( .05, .05, 1, 32 );
    var material2 = new three.MeshBasicMaterial( {color: 0xffffff} );
    var cylinder = new three.Mesh( geometry2, material2 );
    cylinder.translateX(-0.5)
    cylinder.translateZ(-0.5)
    sides = new THREE.Group();
    sides.add(cylinder);
    sides.add(cylinder.clone().translateX(1));
    sides.add(cylinder.clone().translateZ(1));
    sides.add(cylinder.clone().translateX(1).translateZ(1));
    group.add(sides);
    group.add(sides.clone().rotateX(Math.PI/2));
    group.add(sides.clone().rotateZ(Math.PI/2));

    deltaRotationQuaternion = new three.Quaternion()
        .setFromEuler(new three.Euler(
            0,
            rotation,
            0,
            'XYZ'
        ));

    group.quaternion.multiplyQuaternions(deltaRotationQuaternion, group.quaternion);

    scene.add( group );
    camera.position.z = 3.4;
    renderer.render(scene, camera);
    document.body.appendChild(renderer.domElement);
}

var frames = 16;
var totalRotation = -Math.PI*2/3
var increment = totalRotation/frames;
var angle = 0;

for(var i = 0; i < frames; i++) {
    makeFrame(angle);
  angle += increment;
}