I'm trying make render 3d rotating cube but cube has weird shape, I can't find the bug/glitch.

I'm following this tutorial on youtube. I think I made something wrong on my code but everything seems good to me and I checked values on chrome debugging mode.

But when I following the tutorial I make some personal change but i'm sure this changes doesn't effect code working and make optimization on working.

Thanks.

const canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d');
const W = 600, H = 600;
const MODEL_MAX_X = 2, MODEL_MIN_X = -2, MODEL_MAX_Y = 2, MODEL_MIN_Y = -2, STEP = 0.5;
var points = [], triangles = [];

for (let x = -1; x <= 1; x += STEP)
    for (let y = -1; y <= 1; y += STEP)
        for (let z = -1; z <= 1; z += STEP)
            points.push([x, y, z]);

    for (let dimension = 0; dimension <= 2; ++dimension)
        for (let side = -1; side <= 1; side += 2) {
            var sidePoints = points.filter(point => point[dimension] == side).slice(0,3);
            triangles.push([...sidePoints]);
        }



function persvectiveProjection([x, y, z]) {
    return [x / (z + 4), y / (z + 4)];
}

function project(point) {
    const [x, y] = persvectiveProjection(point);
    return [
        W * (x - MODEL_MIN_X) / (MODEL_MAX_X - MODEL_MIN_X),
        H * (1 - y - MODEL_MIN_Y) / (MODEL_MAX_Y - MODEL_MIN_Y)
    ];
}


ctx.lineWidth = 4;
ctx.strokeStyle = '#000';

function renderPoint(point) {
    const [x, y] = project(point);
    ctx.beginPath();
    ctx.moveTo(x, y);
    ctx.lineTo(x + 1, y + 1);
    ctx.stroke();
}

function renderTriangle (triangle) {
    const projectedTriangle = triangle.map(project);
    const [a, b, c] = projectedTriangle;

    ctx.beginPath();
    ctx.moveTo(a[0], a[1]);
    ctx.lineTo(b[0], b[1]);
    ctx.lineTo(c[0], c[1]);
    ctx.lineTo(a[0], a[1]);
    ctx.stroke();
}

function rotateY(point, theta) {
    const [x, y, z] = point;
    return [
        Math.cos(theta) * x - Math.sin(theta) * z,
        y,
        Math.sin(theta) * x + Math.cos(theta) * z
    ]
}
function rotateX(point, theta) {
    const [x, y, z] = point;
    return [
        x,
        Math.cos(theta) * y - Math.sin(theta) * z,
        Math.sin(theta) * y + Math.cos(theta) * z
    ]
}

var theta = 0;
var dtheta = 0.01;
function render() {
    ctx.clearRect(0, 0, W, H);
    theta += dtheta;
    triangles.forEach(triangle => {
        var rotatedTriangle = triangle.map(point => rotateX(rotateY(point, theta), 0.43 * theta));
        renderTriangle(rotatedTriangle);
    })
    requestAnimationFrame(render);
}
render();