Draw a cube 3d with black wireframe in a 500 x 500 canvas Mak the cube rotateable with arrow keys's game

Click here for free DL of the app version that can save data.

No:46705

←

Prev Next

→

Draw a cube 3d with black wireframe in a 500 x 500..ALL
Developer User20131｜Date and time 24/2/25 20:37:51
Build time 9.679 sec｜Game capacity 2.737KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
    <title>Cubo 3D Rotante</title>
</head>
<body>
    <canvas id="myCanvas" width="500" height="500" style="border:1px solid black;"></canvas>

const cube = {
            vertices: [
                [100,100,100],
                [100,200,100],
                [200,200,100],
                [200,100,100],
                [100,100,200],
                [100,200,200],
                [200,200,200],
                [200,100,200]
            ],
            edges: [
                [0,1],
                [1,2],
                [2,3],
                [3,0],
                [4,5],
                [5,6],
                [6,7],
                [7,4],
                [0,4],
                [1,5],
                [2,6],
                [3,7]
            ]
        };

let angleX = 0;
        let angleY = 0;

function drawCube() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            for(let edge of cube.edges) {
                const v1 = rotate(cube.vertices[edge[0]], angleX, angleY);
                const v2 = rotate(cube.vertices[edge[1]], angleX, angleY);
                ctx.beginPath();
                ctx.moveTo(v1[0], v1[1]);
                ctx.lineTo(v2[0], v2[1]);
                ctx.stroke();
            }
        }

function rotate(vertex, angleX, angleY) {
            const x = vertex[0];
            const y = vertex[1];
            const z = vertex[2];

const sinX = Math.sin(angleX);
            const cosX = Math.cos(angleX);
            const sinY = Math.sin(angleY);
            const cosY = Math.cos(angleY);

const xRotated = x * cosY - z * sinY;
            const yRotated = x * sinY * sinX + y * cosX - z * sinX * cosY;
            const zRotated = x * sinY * cosX + y * sinX + z * cosX * cosY;

const scale = 2; // Zoom factor
            const depth = 500;
            const xProjected = (xRotated * scale) / (zRotated + depth) + canvas.width / 2;
            const yProjected = (yRotated * scale) / (zRotated + depth) + canvas.height / 2;

return [xProjected, yProjected];
        }

drawCube();

</script>
</body>
</html>