Estoy tratando de rotar un cubo alrededor de sus propios 3 ejes, así como hacerlo orbitar el centro de la pantalla. Ambas transformaciones funcionan individualmente, pero cuando las ejecuto juntas, el cubo se traduce lentamente fuera de la pantalla.

 function loop(timeNow) { //calculate time difference timeDelta = timeNow - timeLast; timeLast = timeNow; // background ctx.fillRect(0, 0, w, h); // c is the centre of the cube // rotate along z axis let angle = timeDelta * 0.001 * SPEED_Z * Math.PI * 2; for (let v of vertices) { let dx = vx - cx; let dy = vy - cy; let x = dx * Math.cos(angle) - dy * Math.sin(angle); let y = dx * Math.sin(angle) + dy * Math.cos(angle); vx = x + cx; vy = y + cy; } // rotate along x axis angle = timeDelta * 0.001 * SPEED_X * Math.PI * 2; for (let v of vertices) { let dz = vz - cz; let dy = vy - cy; let z = dy * Math.sin(angle) + dz * Math.cos(angle); let y = dy * Math.cos(angle) - dz * Math.sin(angle); vz = z + cz; vy = y + cy; } // rotate along y axis angle = timeDelta * 0.001 * SPEED_Y * Math.PI * 2; for (let v of vertices) { let dz = vz - cz; let dx = vx - cx; let z = dz * Math.cos(angle) - dx * Math.sin(angle); let x = dz * Math.sin(angle) + dx * Math.cos(angle); vz = z + cz; vx = x + cx; } // centre is the centre of the page // rotating around the centre of the page let theta = Math.PI * 2 * timeDelta * 0.001 * 0.5; for (let v of vertices) { let dx = vx - centre.x; let dy = vy - centre.y; let x = dx * Math.cos(theta) - dy * Math.sin(theta); let y = dx * Math.sin(theta) + dy * Math.cos(theta); vx = centre.x + x; vy = centre.y + y; } // draw each edge for (let edge of edges) { ctx.beginPath(); ctx.moveTo(vertices[edge[0]].x, vertices[edge[0]].y); ctx.lineTo(vertices[edge[1]].x, vertices[edge[1]].y); ctx.stroke(); } // call next frame requestAnimationFrame(loop); }

He intentado leer sobre transformaciones afines y combinarlas, pero tengo problemas para traducir la teoría a este código. Cualquier ayuda sería apreciada.