3d cube not showing perfectly

Question

I trying to make a pure 3d cube, using my vectors. I thought it was perfect at once, but when rotate it, I can see some lines are not drawn correctly and it is not perfect.

I can't find why it is not perfect. Is some of my vectors wrong?

I'm using p5.js to draw it. I know they have methods of 3d rotation and some 3d primitives. But I don't want to use them. I want to draw my own 3d cube.

Here's the code I used as reference: https://github.com/OneLoneCoder/videos/blob/master/OneLoneCoder_olcEngine3D_Part1.cpp

const xIndex = 0;
const yIndex = 1;
const zIndex = 2;

const triSides = 3;
const ratio = 110;

const framesPerSecond = 30;

const screenWidth = 600;
const screenHeight = 600;

const fntSize = 20;

var vertices = [
  // South
  [
    [-1.0, -1.0, -1.0], [-1.0, 1.0, -1.0],  [1.0, 1.0, -1.0]
  ],
  [
    [-1.0, -1.0, -1.0], [1.0, 1.0, -1.0],  [1.0, -1.0, -1.0]
  ],
  // Top
  [
    [-1.0, 1.0, -1.0], [-1.0, 1.0, 1.0],  [1.0, 1.0, 1.0]
  ],
  [
    [-1.0, 1.0, -1.0], [1.0, 1.0, 1.0],  [1.0, 1.0, -1.0]
  ],
  // West
  [
    [-1.0, -1.0, 1.0], [-1.0, 1.0, 1.0], [-1.0, 1.0, -1.0],
  ],
  [
    [-1.0, -1.0, 1.0], [-1.0, 1.0, -1.0], [-1.0, -1.0, -1.0]
  ],
  // East
  [
    [1.0, -1.0, -1.0], [1.0, 1.0, -1.0], [1.0, 1.0, 1.0]
  ],
  [
    [1.0, -1.0, -1.0], [1.0, 1.0, 1.0], [1.0, -1.0, 1.0]
  ],
  // Bottom
  [
    [1.0, -1.0, 1.0], [-1.0, -1.0, 1.0], [-1.0, -1.0, -1.0]
  ],
  [
    [1.0, -1.0, 1.0], [-1.0, -1.0, -1.0], [1.0, -1.0, -1.0]
  ],
  // North
  [
    [1.0, -1.0, 1.0], [1.0, 1.0, 1.0], [-1.0, 1.0, 1.0]
  ],
  [
    [1.0, -1.0, 1.0], [-1.0, 1.0, 1.0], [-1.0, -1.0, 1.0]
  ],
];

//let myFont;

//function preload() {
//  myFont = loadFont('assets/Roboto-Black.ttf');
//}

function setup() {
  createCanvas(screenWidth, screenHeight, WEBGL);
  strokeWeight(1);
  frameRate(framesPerSecond);
  //textFont(myFont, fntSize);
  stroke(0, 0, 0);
}

function draw() {
  background(220);
  
  for (let i = 0; i < vertices.length; i++) {
    var tri = vertices[i];
    
    let originPoint = {
      x: tri[0][xIndex] * ratio,
      y: tri[0][yIndex] * ratio,
      z: tri[0][zIndex] * ratio
    }
    
    let point2 = {
      x: tri[1][xIndex] * ratio,
      y: tri[1][yIndex] * ratio,
      z: tri[1][zIndex] * ratio
    }
    
    let point3 = {
      x: tri[2][xIndex] * ratio,
      y: tri[2][yIndex] * ratio,
      z: tri[2][zIndex] * ratio
    }
    
    switch (i) {
      case 0:
      case 1:
        // Red
        fill(255, 100, 100, 100);
        break;
      case 2:
      case 3:
        // Yellow
        fill(255, 255, 100, 100);
        break;
      case 4:
      case 5:
        // Blue
        fill(100, 255, 255, 100);
        break;
      case 6:
      case 7:
        // Purple
        fill(100, 100, 255, 100);
        break;
      case 8:
      case 9:
        // White
        fill(255, 255, 255, 100);
        break;
      case 10:
      case 11:
        // Black
        fill(0, 0, 0, 100);
    }
    
    beginShape();
    vertex(originPoint.x, originPoint.y, originPoint.z);
    vertex(point2.x, point2.y, point2.z);
    vertex(point3.x, point3.y, point3.z);
    endShape();
  }
}

// Eixo Z
function rotateZ3D(obj, angleRotation) {
  let angleCos = cos(angleRotation);
  let angleSin = sin(angleRotation);

  rotatedX = (obj[xIndex] * angleCos) - (obj[yIndex] * angleSin);
  rotatedY = (obj[xIndex] * angleSin) + (obj[yIndex] * angleCos);
  rotatedZ = obj[zIndex];

  return [rotatedX, rotatedY, rotatedZ];
}
  
// Eixo Y
function rotateY3D(obj, angleRotation) {
  let angleCos = cos(angleRotation);
  let angleSin = sin(angleRotation);

  rotatedX = (obj[xIndex] * angleCos) + (obj[zIndex] * angleSin);
  rotatedY = obj[yIndex];
  rotatedZ = (obj[xIndex] * -angleSin) + (obj[zIndex] * angleCos);

  return [rotatedX, rotatedY, rotatedZ];
}
  
// Eixo X
function rotateX3D(obj, angleRotation) {
  let angleCos = cos(angleRotation);
  let angleSin = sin(angleRotation);

  rotatedX = obj[xIndex];
  rotatedY = (obj[yIndex] * angleCos) + (obj[zIndex] * -angleSin);
  rotatedZ = (obj[yIndex] * angleSin) + (obj[zIndex] * angleCos);

  return [rotatedX, rotatedY, rotatedZ];
}

function mouseDragged() {
  if (mouseX < screenWidth && mouseY < screenHeight) {
    let currentX = (mouseX / (framesPerSecond * 1000)) * movedX;
    let currentY = -(mouseY / (framesPerSecond * 1000)) * movedY;

    for (let i = 0; i < vertices.length; i++) {
      for (let j = 0; j < 3; j++) {
        let currVertices = vertices[i][j];
        let xRotatedVer = rotateX3D(currVertices, currentY);
        let yRotatedVer = rotateY3D(xRotatedVer, currentX);

        vertices[i][j] = yRotatedVer;
      }
    }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js"></script>

Answer 1

You need to close the outline around the triangles:

beginShape();
vertex(originPoint.x, originPoint.y, originPoint.z);
vertex(point2.x, point2.y, point2.z);
vertex(point3.x, point3.y, point3.z);
vertex(originPoint.x, originPoint.y, originPoint.z); // <- this is missing
endShape();