Еще хотел натянуть на грани текстуры но у меня явно не тот подход к рисованию и я решил что лучше забить. Зато натянул на куб градиент:

Цацкайтесь на здоровье, пишите где мои проебы, как их поправить или просто пишите. Следующих версий ждать не стоит я скорее всего займусь чем-то на Java, или на YUI.

Из изменений: добавлина матрица граней, то есть порядок соединения вершин

this.G = [
	[0,1,2,3,4,5],
	[1,2,3,0,5,6],
	[2,6,7,4,1,2],
	[3,5,6,7,0,1],
]

и новый цикл для обхода матрицы

for(var i=0;i<6;i++){
	this.plot.beginPath();
	this.plot.fillStyle = "rgba("+(i<3?255:0)+","+((i<1||i>3)?255:0)+","+(i>2?255:0)+",0.5)";
	this.plot.moveTo(this.V2d[0][this.G[0][i]],this.V2d[1][this.G[0][i]]);
	this.plot.lineTo(this.V2d[0][this.G[1][i]],this.V2d[1][this.G[1][i]]);
	this.plot.lineTo(this.V2d[0][this.G[2][i]],this.V2d[1][this.G[2][i]]);
	this.plot.lineTo(this.V2d[0][this.G[3][i]],this.V2d[1][this.G[3][i]]);
	this.plot.closePath();
	this.plot.fill();
}

PS Пользователи IE идут на хуй, потому что он не поддерживает полупрозрачности фона rgba(255,255,255,0.5)

Вторая редакция кубика не имеет ничего общего с первой. Все полностью переделано. Теперь вместо того чтобы высчитывать углы наклонов и поворотов рёбер от угла поворота куба, я решил сделать так, как делается в нормальнйо трехмерной графике. Нарисовать сцену, положить в координаты [0,0,0] центр куба, по векторам высчитать вершины и нарисовать между ними линии. Что собственно с успехом и реализовал.

теперь как видите ничего нигде не точит и все прекрасно отображается. пришлось конешно пошаманить, прописать все углы, ребра и векторы но зато теперь все идеально. Куб можно изменять в размерах, отдалять и приближать "камеру", красить в произвольный цвет и все это при помощи настроек.

По просьбе Adw0rd'a выкладываю сырцы которые все это генерируют:

Cube = function(options){
	this.init(options);
}

Cube.prototype = {
	
	color : "#000000", // цвет граней
	plot : null, // 2d context
	size : 10, // размер куба
	focalLens : 0, // расстояние от центра куба до камеры
	theta : [0,0], // углы поворотов по осям в радианах
	V2d : [[],[]], // вектора в двухмерной проекции
	
	T : [], // Translation vector
	E : [[],[]], // Edges
	R : [[],[],[]], // Rotation matrix
	V : [[],[],[]], // Vertices

	init : function(options){
		
		for (var i in options)
			this[i] = options[i];
			
		if(!this.focalLens)
			this.focalLens = this.plot.canvas.width;
			
		var self = this;
		document.onmousemove = function(event){
			self.theta = [event.clientX / 100, event.clientY / 100];
			self.draw();
		}			
			
		this.createScene();
		this.draw();
	},
	
	createScene : function (){
		var s = this.size;
		
		this.V = [
			[-s, s, s,-s,-s, s, s,-s],
			[-s,-s, s, s,-s,-s, s, s],
			[-s,-s,-s,-s, s, s, s, s],
		];
		
		this.E = [
			[0,1,2,3,4,5,6,7,0,1,2,3],
			[1,2,3,0,5,6,7,4,4,5,6,7],
		];
		
		this.R = [
			[1,0,0],
			[0,1,0],
			[0,0,1],
		];
		
		this.T = [0,0,0];
	},

	updVertices : function (){
		var x, y, z;
		
		for(var i=0;i<8;i++){
			x=this.R[0][0]*this.V[0][i]+this.R[0][1]*this.V[1][i]+this.R[0][2]*this.V[2][i]+this.T[0];
			y=this.R[1][0]*this.V[0][i]+this.R[1][1]*this.V[1][i]+this.R[1][2]*this.V[2][i]+this.T[1];
			z=this.R[2][0]*this.V[0][i]+this.R[2][1]*this.V[1][i]+this.R[2][2]*this.V[2][i]+this.T[2];

			this.V2d[0][i]=this.plot.canvas.width/2+x*this.focalLens/z;
			this.V2d[1][i]=this.plot.canvas.height/2+y*this.focalLens/z;
		}
	},


	setTransformation : function (x, y, z, anglex, angley){
		var 
		sx = Math.sin(anglex),
		cx = Math.cos(anglex),
		sy = Math.sin(angley),
		cy = Math.cos(angley);
		
		this.R = [
			[ cx   , 0 ,  sx],
			[ sx*sy, cy, -cx*sy],
			[-sx*cy, sy,  cx*cy],
		];
		this.T = [x,y,z];
	},

	drawModel : function (){
		this.plot.beginPath();
		this.plot.strokeStyle=this.color;
		for(var i=0;i<12;i++){
			this.plot.moveTo(this.V2d[0][this.E[0][i]],this.V2d[1][this.E[0][i]]);
			this.plot.lineTo(this.V2d[0][this.E[1][i]],this.V2d[1][this.E[1][i]]);
			this.plot.stroke();
		}
	},
	
	drawCells : function(){
		this.plot.fillStyle="black";
		for(var i=100,l=this.plot.canvas.width;i<l;i+=100){
			this.plot.fillRect(0,i,l,1);
			this.plot.fillRect(i,0,1,l);
		}
	
	},

	draw : function (){
		var self = this;

		this.plot.clearRect(0,0,this.plot.canvas.width,this.plot.canvas.height);
		this.setTransformation(0.0, 0.0, 40.0, this.theta[0], this.theta[1]);
		this.updVertices();
		this.drawCells();
		this.drawModel();
	},
}


window.onload=function(){
	var plot = document.getElementById("cube").getContext("2d"),
	
	cube = new Cube({plot:plot,color:"#00FF00",size:10});
}

И еще три строчки HTML:

<script type="text/javascript" src="/content/source/cube-0.2.js"></script>
<script type="text/javascript" src="/content/source/excanvas.js"></script>
<div style="text-align:center;"><canvas  id="cube" width="500" height="500"/></div>

но это не конец, в следующей версии планируется натяжка текстур на грани и добавление света, или раскраска сторон с добавлением полупрозрачности, я еще не решил что буду делать.

После записи о вращении квадрата я немного полистал учебники по геометрии, и даже "основы учебного академического рисунка", и поднабрался знаний по поводу того что и как должно быть. И вот пришло время поделится этим с вами.

Я решил что до того как рисовать красивые полупрозрачные грани неплохо было бы научится вращать вершины. Чем собственно и занялся. Четыре точки вращаются в трех плоскостях. Но там немного хитро по оси OX вращение происходит при передвижении мышки вперед назад, а по оси OY и/или OZ происходит при передвижении мышки из стороны в сторону и зависит от того на какой грани лежит куб.

Развлекаемся:

Весь код показывать не буду, если захотите посмотрите, но главную функцию, которая рассчитывает позиции вершин обязательно надо показать.

function(){
	var data = [],
	dim = this.dimension,
	o = this.theta;
	for (var x = -dim; x <= dim; x += 2 * dim)
		for (var y = -dim; y <= dim; y += 2 * dim)
			for (var z = -dim; z <= dim; z += 2 * dim){
				var 
				a = x * Math.cos(o.x) - y * Math.sin(o.x),
				b = x * Math.sin(o.x) + y * Math.cos(o.x),
				c = b * Math.cos(o.y) - z * Math.sin(o.y),
				d = b * Math.sin(o.y) + z * Math.cos(o.y);
				data.push({
					left : 250 + a * (d + 2) * 50,
					top  : 250 + c * (d + 2) * 50,
				});
			}
	return data;
}

Единственным недостатком такого способа расчета координат есть то, что если поставить куб так чтобы взгляд шел сразу по двум граням, то дальняя вершина, которая должна сливаться с передней (то есть взгляд должен идти по ребру) сильно выходит за рамки куба. Но я так понял что я не первый кто пользуется этим способом, так что думаю что ничего страшного.

В планах на ближайшее будущее новый куб у которого ничего никуда не вылазит.