旋转立方角90度JS webgl p5

Question

我在JS中做了一个3d立方体，如：

function Cube(x,y,z,L,col) {
    this.x = (x);
    this.y = (y);
    this.z = (z);
    this.L = (L);
    this.color = col;



    this.show = function() {
        stroke(this.color);
        this.A = new ThreeDpoint(this.x,          this.y,         this.z       );
        this.B = new ThreeDpoint(this.x,          this.y+this.L,  this.z       );
        this.C = new ThreeDpoint(this.x+this.L,   this.y+this.L,  this.z       );
        this.D = new ThreeDpoint(this.x+this.L,   this.y,         this.z       );
        this.E = new ThreeDpoint(this.x,          this.y,         this.z-this.L);
        this.F = new ThreeDpoint(this.x,          this.y+this.L,  this.z-this.L);
        this.G = new ThreeDpoint(this.x+this.L,   this.y+this.L,  this.z-this.L);
        this.H = new ThreeDpoint(this.x+this.L,   this.y,         this.z-this.L);
        line(this.A.x,this.A.y,this.A.z,  this.B.x,this.B.y,this.B.z);
        line(this.A.x,this.A.y,this.A.z,  this.D.x,this.D.y,this.D.z);
        line(this.A.x,this.A.y,this.A.z,  this.E.x,this.E.y,this.E.z);
        line(this.B.x,this.B.y,this.B.z,  this.F.x,this.F.y,this.F.z);
        line(this.B.x,this.B.y,this.B.z,  this.C.x,this.C.y,this.C.z);
        line(this.C.x,this.C.y,this.C.z,  this.G.x,this.G.y,this.G.z);
        line(this.C.x,this.C.y,this.C.z,  this.D.x,this.D.y,this.D.z);
        line(this.D.x,this.D.y,this.D.z,  this.H.x,this.H.y,this.H.z);
        line(this.E.x,this.E.y,this.E.z,  this.F.x,this.F.y,this.F.z);
        line(this.E.x,this.E.y,this.E.z,  this.H.x,this.H.y,this.H.z);
        line(this.F.x,this.F.y,this.F.z,  this.G.x,this.G.y,this.G.z);
        line(this.G.x,this.G.y,this.E.z,  this.H.x,this.H.y,this.H.z);
    }

    this.rotate = function (an) {
        a = 0;
        rotateXMatrix =[
            1,       0,        0,     0,
            0,  cos(a),  -sin(a),     0,
            0,  sin(a),   cos(a),     0

        ];
        while (a++ < an){
            xp = this.x*rotateXMatrix[0] + this.y*rotateXMatrix[1] + this.z*rotateXMatrix[2];
            yp = this.x*rotateXMatrix[3] + this.y*rotateXMatrix[4] + this.z*rotateXMatrix[5];
            zp = this.x*rotateXMatrix[6] + this.y*rotateXMatrix[7] + this.z*rotateXMatrix[8];
            this.x = xp;
            this.y = yp;
            this.z = zp;
            this.show();
        }
    }



    this.proyection = function(factor,col){
        f = parseFloat(factor);
        nL = (this.L*f);
        gap = this.L - ((nL)/2);
        nx = this.x + gap;
        ny = this.y + gap;
        nz = this.z + gap;

        return new Cube(nx,ny,nz,nL,col);
    }
}

但旋转方法和投影无效 Current results image

C1（黄色） C2（红） C3（蓝色）

它应该创建一个立方体（c1），然后创建一个大小为一半（c2）的中心克隆，然后创建一个2x的c1副本并将其轴旋转90度