Od jakiegoś czasu zajmuję się grafiką 3d z użyciem canvasa 2d w javascripcie. Na początek chcę tylko narysować kostkę w perspektywie. Mam już gotowe funkcje, które wyliczają perspektywę. (sprawdzałem ich działanie w konsoli i działają) Problem niestety jest taki, że nie pojawiają mi się ściany tej kostki. Co ciekawe, gdy próbuje je narysować ręcznie w konsoli to wszystko działa.
To jest fragment kodu w którym może występować problem:
let cube_size = 100;
let cube = new Object3D(
[
new Vertex(-1*cube_size, -1*cube_size, 1*cube_size),
new Vertex(-1*cube_size, 1*cube_size, 1*cube_size),
new Vertex( 1*cube_size, 1*cube_size, 1*cube_size),
new Vertex( 1*cube_size, -1*cube_size, 1*cube_size),
new Vertex(-1*cube_size, -1*cube_size, -1*cube_size),
new Vertex(-1*cube_size, 1*cube_size, -1*cube_size),
new Vertex( 1*cube_size, 1*cube_size, -1*cube_size),
new Vertex( 1*cube_size, -1*cube_size, -1*cube_size),
],
[
// FRONT
[0,1,2],
[0,3,2],
]
);
let loop = () => {
requestAnimationFrame(loop);
ctx.fillStyle = "#000";
ctx.fillRect(0,0,canvas.width,canvas.height);
project(cube).forEach(face => {
ctx.beginPath();
ctx.moveTo(face.face[0].x,face.face[0].y);
ctx.moveTo(face.face[1].x,face.face[1].y);
ctx.moveTo(face.face[2].x,face.face[2].y);
ctx.closePath();
ctx.fillStyle = face.color;
ctx.fill();
});
}; loop();
Obiekt cube jest odpowiedzialny za model kostki. Funkcja project oblicza wielokąty (zwraca tablicę), które pokażą się po wyrenderowaniu kostki. Potem "przeglądam" te wielokąty metodą forEach. Każdy wielokąt jest w postaci obiektu:
{ face: [tablica z punktami (każdy punkt to obiekt {x:x,y:y})], color: kolor wielokąta }
i na koniec te wielokąty (tak naprawdę trójkąty) rysuję na canvasie. Niestety właśnie one się nie pojawiają.
Nie mam pojęcia skąd to się bierze.
Byłbym wdzięczny za wszelką pomoc.