Полигоны искажаются по холсту при перемещении вокруг наблюдателя (в 3D)

Question

Я начал писать простой трехмерный движок для игры в 3d лабиринт от первого лица (карта будет двухмерной), и для проверки моего текущего кода я написал симуляцию, в которой самолет вращается вокруг наблюдателя. Когда самолет почти позади наблюдателя (все еще видимый на краю), он искажается по всему холсту. (Пример здесь: https://jsfiddle.net/fh74wjnr) Как мне это исправить? Моя текущая функция проверки видимости выглядит следующим образом:

function inScreen(p2d) {

  return p2d.x >= 0 && p2d.y >= 0 && p2d.x < width && p2d.y < height;
}

function visible(obj) {
  return  inScreen(obj.verti[0].to2D()) ||
          inScreen(obj.verti[1].to2D()) ||
          inScreen(obj.verti[2].to2D()) ||
          inScreen(obj.verti[3].to2D());
}

, а моя функция рисования плоскости и преобразование 3D в 2d точки выглядят так:

class Point3D {

  constructor(x, y, z) {

    this.x = x;

    this.y = y;

    this.z = z;

    this.to2D = function() { // <-- 3d to 2d point conversion

      var d = 200 / this.z;

      return new Point2D(width / 2 + this.x * d, height / 2 + this.y * d);
    }
  }
}


function drawpoly(p1, p2, p3, p4, color) {
  ctx.fillStyle = color;
  ctx.beginPath();
  ctx.moveTo(p1.x, p1.y);
  ctx.lineTo(p3.x, p3.y);
  ctx.lineTo(p4.x, p4.y);
  ctx.lineTo(p2.x, p2.y);
  ctx.closePath();
  ctx.fill();
}