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();