Merhaba arkadaşlar Cross product,Rotation matrices, Perspective projection diagram, linklerinden aldığım bilgiler ile basit bir küp oluşturmaya calısıyorum. Hata gözükmüyor fakat kod çalışmıyor. Yardımcı olabilecek varmı?

class Vector {
  constructor(x, y, z) {
    this.x = x
    this.y = y
    this.z = z
  }
  cross(other) {
    return new Vector(
      this.y * other.z - this.z * other.y,
      this.x * other.z - this.z * other.x,
      this.x * other.y - this.y * other.x
    )
  }
  add(other) {
    return new Vector(
      this.x + other.x,
      this.y + other.y,
      this.z + other.z
    )
  }
  scale(scalar) {
    return new Vector(
      scalar * this.x,
      scalar * this.y,
      scalar * this.z
    )
  }
  ccw(other) {
    return this.cross(other.z) > 0
  }
  rotateX(theta) {
    let {x, y, z} = this;
    return new Vector(
      Math.cos(theta) * x - Math.sin(theta) * z,
      y,
      Math.sin(theta) * x + Math.cos(theta) * z
    )
  }

  rotateY(theta) {
    let {x, y, z} = this;
    return new Vector(
      x,
      Math.cos(theta) * y - Math.sin(theta) * z,
      Math.sin(theta) * y + Math.cos(theta) * z,
    )
  }
  substract(other) {
    other = new Vector(other)
    return new Vector(
      this.x - other.x,
      this.y - other.y,
      this.z - other.z
    )
  }
}
let W = 600, H = 600
let canvas = document.getElementById('canvas'),
  ctx = canvas.getContext('2d');
ctx.lineWidth = 4;
let MODEL_MIN_X = -2, MODEL_MAX_X = 2
let points = [];
let triangles = [];
let SIZE = 0.5;
let colors = [
  'red','green','blue','white',
  'orange','purple','cyan','gray'
]

function makeTriangle(a,b,c,dimension,side) {
    if( Math.sign(b.substract(a).cross(c.substract(a))[dimension]) == Math.sign(side)) { return {a,b,c}}
    return {a,c,b}

  
}

function initGeometry() {
  for (let x = -1; x <= 1; x += 2) {
    for (let y = -1; y <= 1; y += 2) {
      for (let z = -1; z <= 1; z += 2) {
        points.push(new Vector(x,y,z))
      }
    }
  }
  for (let dimension = 0; dimension < 3; dimension++) {
    for (let side = -1; dimension <= 1; side += 2) {
      let sidePoints = points.filter(point => {
          return point['xyz'[dimension]] == side
      })
      console.log(sidePoints)
      let a = sidePoints[0],
      b = sidePoints[1],
      c = sidePoints[2],
      d = sidePoints[3];
      if (dimension == 1) {
        triangles.push(makeTriangle(a,b,c,dimension,side))
        triangles.push(makeTriangle(d,b,c,dimension,side))
      } else {
        triangles.push(makeTriangle(a,b,c,dimension,-1 * side))
        triangles.push(makeTriangle(d,b,c,dimension,-1 * side))
      }
    }
  }
}
function perspectiveProject(point) {
  let {x, y, z} = point
  return new Vector(x / (z + 4),y / (z + 4),z)
}
function project(point) {
  let {x,y,z} = perspectiveProject(point)
  return [
    W * (x - MODEL_MIN_X) / (MODEL_MAX_X - MODEL_MIN_X),
    H * ( 1 - (y - MODEL_MIN_X)) / (MODEL_MAX_X - MODEL_MIN_X)
  ];
}

function renderPoint(point) {
  let [x, y] = project(point);

  ctx.beginPath();
  ctx.moveTo(x, y);
  ctx.lineTo(x + 1, y + 1);
  ctx.strokeStyle = "white"
  ctx.stroke();
}

function renderTriangle(triangle,color) {
  let [a,b,c] = triangle.map(project);
  let side1 = substract(b,a),
      side2 = substract(c,a)
  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.strokeStyle = 'black';
  ctx.fillStyle = color;
  ctx.stroke();
  ctx.fill();
}



let theta = 0;
let dtheta = 0.025;

function render() {
  ctx.fillStyle = "#000";
  ctx.fillRect(0, 0, W, H);
  theta += dtheta
  triangles.map((triangle,idx) => {
    var rotatedTriangle = triangle.map(point => {
      return point.rotateX(point.rotateY(point,theta),0.43 * theta)
    })
    var color = colors[Math.floor(idx / 2)]
    renderTriangle(rotatedTriangle)
  })

  requestAnimationFrame(render);
}

initGeometry()
render()