ca c'est joli !

<script>
mouse_x=mouse_y=0
function cursorPos(e) {
if (window.Event) {mouse_x=e.pageX,mouse_y=e.pageY;}// Navigator 4.0x
else {mouse_x=(event.clientX ),mouse_y=(event.clientY );}// Internet Explorer 4.0x
}
document.onmousemove=cursorPos

points=[-15,-15,-15,-15,+15,-15,-15,-15,+15,-15,+15,+15,+15,-15,+15,+15,+15,+15,+15,-15,-15,+15,+15,-15,+15,-15,+15,-15,-15,+15,-15,+15,+15,+15,+15,+15]
faces=[0,2,3,3,1,0,2,4,5,5,3,2,4,6,7,7,5,4,6,0,1,1,7,6,0,6,8,8,9,0,7,1,10,10,11,7]
uu=[0,0,1,1,0,0,1,1,1,0,0,1]
vv=[1,0,1,0,1,0,1,0,0,0,1,1]

buffer=[]
fz=[] // profondeur de la face en z
tri=[] // tableau des faces triées selon leur profondeur en z
fcolor=[] // couleur de la face en hexa
fnx=[], fny=[], fnz=[] // normales des facettes
fnx2=[], fny2=[], fnz2=[] // normales des facettes apres rotation
Sin=[], Cos=[], camera=[], fnorme=[] // tableau de sin/cos, position de la cam et norme de la face
xa=ya=za=0
for(i=0;i<360;i++){Sin.push(Math.sin(i*3.1415927/180)), Cos.push(Math.cos(i*3.1415927/180))}// precalcul tables of sine and cosine
/****************************************************************************/
/* FixerLumiere() : initialise le vecteur lumineux.                        */
/****************************************************************************/
var normelumiere
function FixerLumiere(x,y,z){
normelumiere=Math.sqrt(x*x + y*y + z*z)
lumx=-x*80, lumy=-y*80, lumz=-z*80} // precalcul pour le flat-shading
FixerLumiere(0,10,-10) // place la lumière

//réalise quelques precalculs
   for(i=0;i<=(faces.length/3);i++){
   var tmp1=faces[i*3]*3, tmp2=faces[i*3+1]*3, tmp3=faces[i*3+2]*3
    var a0=points[tmp1] - points[tmp2] , a1=points[tmp1+1]-points[tmp2+1] , a2=points[tmp1+2]-points[tmp2+2]
    var b0=points[tmp1] - points[tmp3] , b1=points[tmp1+1]-points[tmp3+1] , b2=points[tmp1+2]-points[tmp3+2]
   // produit vectoriel => normale … la face
    fnx.push(a1*b2-a2*b1)
   fny.push(a2*b0-a0*b2)
   fnz.push(a0*b1-a1*b0)
    fnorme.push(normelumiere*Math.sqrt(fnx[i]*fnx[i]+fny[i]*fny[i]+fnz[i]*fnz[i]))}
/****************************************************************************/
/* Rotation() : effectue la rotation des points Sommet -> Point3D         */
/* plus d'infos sur http://membres.multimania.fr/heulin/3D/Main3D.html         */
/****************************************************************************/
function Rotation(Xa,Ya,Za){
var C=[]//-->pt_3D_z
var f3=Cos[za]*Sin[ya], f4=Sin[za]*Sin[ya]
var m1=Cos[za]*Cos[ya], m2=Sin[za]*Cos[ya], m3=-Sin[ya]
var m4=f3*Sin[xa]-Sin[za]*Cos[xa], m5=f4*Sin[xa]+Cos[xa]*Cos[za], m6=Sin[xa]*Cos[ya]
var m7=f3*Cos[xa]+Sin[za]*Sin[xa], m8=f4*Cos[xa]-Cos[za]*Sin[xa], m9=Cos[xa]*Cos[ya]
var f0=-(m4*m1), f1=-(m5*m2), f2=-(m6*m3)
for(i=0;i<=(points.length)/3;i++){ // Rotation des sommets
   var y=i*3,py=points[y],py1=points[y+1],py2=points[y+2], xy=-py*py1
   var A=(m4+py)*(m1+py1)+f0+xy+m7*py2      //-->pt_3D_x
   var B=(m5+py)*(m2+py1)+f1+xy+m8*py2      //-->pt_3D_y
  C.push(((m6+py)*(m3+py1)+f2+xy+m9*py2))//-->pt_3D_z, mais comme on en a besoin par la suite, je le mets dans un tableau
//projection des points 3D en 2D
   var zoom=camera[2]/(C[i]-view_z) // grossissement
   Pt2D_x.push(parseInt(camera[0]+A*zoom+view_x))   // view_x
   Pt2D_y.push(parseInt(camera[1]+B*zoom+view_y))}   // view_y
for(i=0;i<=(faces.length)/3;i++){
   if(!Visible(i)){
      var fnxx=fnx[i],fnyy=fny[i],fnzz=fnz[i]
      fnx2[i]=(m1*fnxx+m2*fnyy+m3*fnzz);// Rotation des "normales des facettes" pour le flat
      fny2[i]=(m4*fnxx+m5*fnyy+m6*fnzz);
      fnz2[i]=(m7*fnxx+m8*fnyy+m9*fnzz);
      y=i*3
      fz[i]=C[faces[y]]+C[faces[y+1]]+C[faces[y+2]]
      tri.push(i)}}}// rempli le tableau tri[] avec les facettes visibles
/****************************************************************************/
/* Quick_Sort() : tri le tableau des facettes visibles                      */
/****************************************************************************/
function Quick_Sort(deb,fin){
var i=deb, j=fin, milieu=fz[tri[(deb+fin)>>1]]
while(i<=j){
    while(fz[tri[i]] > milieu) i++
    while(fz[tri[j]] < milieu) j--
    if(i<=j) {var temp=tri[i]; tri[i]=tri[j]; tri[j]=temp; i++; j--}}
if(i<fin) Quick_Sort(i,fin)
if(deb<j) Quick_Sort(deb,j)}
/****************************************************************************/
/* Visible() : determine si une face est cachée ou non.                    */
/****************************************************************************/
function Visible(i){var f=i*3
return ((Pt2D_x[f0=faces[f]]-Pt2D_x[faces[f+1]])*(Pt2D_y[f2=faces[f+2]]-Pt2D_y[faces[f+1]])- (Pt2D_y[f0=faces[f]]-Pt2D_y[faces[f+1]])*(Pt2D_x[f2=faces[f+2]]-Pt2D_x[faces[f+1]])<0)}
/****************************************************************************/
/***    Partie pour le remplissage de polygones avec Texture            ***/
/****************************************************************************/
var R= [255,255,255,255,255,0,0,0,0,0,255,255,255,255,255,255,255,255,255,0,0,62,58,51,44,36,0,0,255,255,255,255,255,255,0,72,74,72,72,58,49,40,31,21,0,255,255,255,255,0,72,80,0,0,72,62,52,0,0,23,13,0,255,255,255,0,74,0,89,83,0,64,0,44,34,0,14,0,255,255,0,62,72,80,83,80,72,62,52,43,34,23,13,5,0,255,0,58,0,0,0,0,0,0,0,0,0,0,0,4,0,255,0,51,0,255,208,0,255,255,208,0,255,208,0,2,0,255,0,44,0,255,208,0,255,255,208,0,255,208,0,0,0,255,0,36,0,255,208,0,255,255,208,0,255,208,0,0,0,255,255,0,31,0,208,0,255,255,208,0,255,0,0,0,255,255,255,0,21,23,0,0,255,255,208,0,0,0,0,0,255,255,255,255,0,13,14,0,0,0,0,0,0,0,0,255,255,255,255,255,255,0,0,5,4,2,0,0,0,0,255,255,255,255,255,255,255,255,255,0,0,0,0,0,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255]
var G= [255,255,255,255,255,0,0,0,0,0,255,255,255,255,255,255,255,255,255,0,0,216,209,200,189,178,0,0,255,255,255,255,255,255,0,230,233,230,230,209,197,184,170,156,0,255,255,255,255,0,230,241,0,0,230,216,202,0,0,159,144,0,255,255,255,0,233,0,255,246,0,219,0,189,175,0,145,0,255,255,0,216,230,241,246,241,230,216,202,188,175,159,144,132,0,255,0,209,0,0,0,0,0,0,0,0,0,0,0,131,0,255,0,200,0,255,236,0,255,255,236,0,255,236,0,128,0,255,0,189,0,255,236,0,255,255,236,0,255,236,0,125,0,255,0,178,0,255,236,0,255,255,236,0,255,236,0,125,0,255,255,0,170,0,236,0,255,255,236,0,255,0,125,0,255,255,255,0,156,159,0,0,255,255,236,0,0,125,125,0,255,255,255,255,0,144,145,0,0,0,0,0,125,125,0,255,255,255,255,255,255,0,0,132,131,128,125,125,0,0,255,255,255,255,255,255,255,255,255,0,0,0,0,0,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255]
var B= [255,255,255,255,255,0,0,0,0,0,255,255,255,255,255,255,255,255,255,0,0,173,168,161,154,146,0,0,255,255,255,255,255,255,0,183,185,183,183,168,159,150,141,130,0,255,255,255,255,0,183,190,0,0,183,173,163,0,0,133,123,0,255,255,255,0,185,0,200,194,0,175,0,154,144,0,123,0,255,255,0,173,183,190,194,190,183,173,163,153,144,133,123,114,0,255,0,168,0,0,0,0,0,0,0,0,0,0,0,113,0,255,0,161,0,255,252,0,255,255,252,0,255,252,0,111,0,255,0,154,0,255,252,0,255,255,252,0,255,252,0,109,0,255,0,146,0,255,252,0,255,255,252,0,255,252,0,109,0,255,255,0,141,0,252,0,255,255,252,0,255,0,109,0,255,255,255,0,130,133,0,0,255,255,252,0,0,109,109,0,255,255,255,255,0,123,123,0,0,0,0,0,109,109,0,255,255,255,255,255,255,0,0,114,113,111,109,109,0,0,255,255,255,255,255,255,255,255,255,0,0,0,0,0,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255]
var texturesize=16;
var pix=2// taille du pixel
camera=[1,0,300]
view_x=50,view_y=50, view_z=-350;   //viewport
startx=[],endx=[]
tpoint_x1=[],tpoint_y1=[],tpoint_x2=[],tpoint_y2=[]// tableau debut et fin de ligne texturée
xa=0, ya=0,za=0
/****************************************************************************/
/* HlineTexture() : trace une ligne horizontale à partir d'une texture      */
/*                  par interpolation lineaire                            */
/****************************************************************************/
function RGB(x){if (x>=255) x='255';if (x<=0) x='0';return Math.ceil(x)}
function HlineTexture(H1,H2,y,lux){
lux=lux*1.5+10//evite un bug
if(H1[0]>H2[0]){var temp=H1; H1=H2; H2=temp}
 var longueur=H2[0]-H1[0]+1;
  if(longueur>0){
    var xincr = ((H2[1]-H1[1]+1)<<8)/longueur;
    var yincr = ((H2[2]-H1[2]+1)<<8)/longueur;
    var xpos = H1[1]<<8;
    var ypos = H1[2]<<8;
    for(x=H1[0];x<=H2[0];x++){
   var src = ((ypos>>8)*texturesize) + (xpos>>8);
   buffer.push("<div style='position:absolute;left:"+x*pix+"px;top:"+y*pix+"px;width:"+pix+"px;height:"+pix+"px;overflow:hidden;background-color:rgb("+RGB(R[src]-lux/2)+","+RGB(G[src]-lux/2)+","+RGB(B[src]-lux/2)+")'></div>")
   xpos+=xincr;
   ypos+=yincr;}}
}
/****************************************************************************/
/* InitSegmentTexture() : Initialise le remplissage de polygone avec texture*/
/****************************************************************************/
function InitSegmentTexture(p1,p2){
if(Pt2D_y[p2]!=Pt2D_y[p1]){
   if(Pt2D_y[p2] < Pt2D_y[p1]){var temp=p1; p1=p2; p2=temp;}
   var p1x=Pt2D_x[p1], p1y=Pt2D_y[p1], p1u=uu[p1]*(texturesize-1), p1v=vv[p1]*(texturesize-2)
   var p2x=Pt2D_x[p2], p2y=Pt2D_y[p2], p2u=uu[p2]*(texturesize-1), p2v=vv[p2]*(texturesize-2)
    var xstep = ((p2x-p1x))/((p2y-p1y));
    var ustep = ((p2u-p1u))/((p2y-p1y));
    var vstep = ((p2v-p1v))/((p2y-p1y));
    var x = p1x;
    var u = p1u;
    var v = p1v;
   p1y++
    x+=xstep;
   u+=ustep;
   v+=vstep;
    for(y=p1y;y<=p2y;y++){
   if(!startx[y]){
     startx[y]    = x;
     tpoint_x1[y] = u;
     tpoint_y1[y] = v;}
   else{
     endx[y]      = x;
     tpoint_x2[y] = u;
     tpoint_y2[y] = v;}
      x+=xstep;
      u+=ustep;
      v+=vstep;}}
}
/****************************************************************************/
/* trace                                                   */
/****************************************************************************/
function trace(p1,p2,p3,lux){
startx=[],endx=[]
   InitSegmentTexture(p1, p2);
   InitSegmentTexture(p2, p3);
   InitSegmentTexture(p3, p1);
for(i in startx)HlineTexture([startx[i],tpoint_x1[i],tpoint_y1[i]],[endx[i],tpoint_x2[i],tpoint_y2[i]],i,lux)}
/****************************************************************************/
/* ecran                                                   */
/****************************************************************************/
function main(){
   var xx=Math.floor(mouse_y%360), yy=Math.floor(mouse_x%360)
   if(xx!=xa || yy!=ya) {// si deplacement de la souris
      xa=xx, ya=yy
      buffer=[],tri=[],Pt2D_x=[],Pt2D_y=[] // efface le contenu du buffer, le tableau des faces trié en z et celui des projections
      Rotation(xa,ya,1) // applique la rotation dans les trois axes &  projette en 2D
      Quick_Sort(0,tri.length-1);// tris selon la profondeur en Z
   for(c in tri){
   var j=tri[c], f=j*3, p1=faces[f], p2=faces[f+1], p3=faces[f+2]
var lux=parseInt(80-(fnx2[j]*lumx+fny2[j]*lumy+fnz2[j]*lumz)/fnorme[j]) // calcul l'intensité lumineuse appliquée à la face
   if(!Visible(j)) trace(p1,p2,p3,lux)}
   document.getElementById('ecran').innerHTML=buffer.join('')}
   setTimeout(main,0)}
main()
</script>