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:46704

←

Prev Next

→

Draw a cube 3d with black wireframe in a 500 x 500..ALL
Developer User20131｜Date and time 24/2/25 20:36:28
Build time 13.357 sec｜Game capacity 4.277KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Gioco del Cubo 3D</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="500" height="500"></canvas>
    <script>
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');

let angleX = 0;
        let angleY = 0;

const cube = {
            vertices: [
                [-1, -1, -1],
                [1, -1, -1],
                [1, 1, -1],
                [-1, 1, -1],
                [-1, -1, 1],
                [1, -1, 1],
                [1, 1, 1],
                [-1, 1, 1]
            ],
            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]
            ]
        };

function rotateX(angle) {
            return [
                [1, 0, 0],
                [0, Math.cos(angle), -Math.sin(angle)],
                [0, Math.sin(angle), Math.cos(angle)]
            ];
        }

function rotateY(angle) {
            return [
                [Math.cos(angle), 0, Math.sin(angle)],
                [0, 1, 0],
                [-Math.sin(angle), 0, Math.cos(angle)]
            ];
        }

function drawCube() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

const halfWidth = canvas.width / 2;
            const halfHeight = canvas.height / 2;

const transformedVertices = cube.vertices.map(vertex => {
                let rotated = vertex.slice(); // Copy the vertex array

// Rotate along X axis
                rotated = rotateX(angleX)[0].map((_, i) => rotated[i] * rotateX(angleX)[0][0] + rotated[i] * rotateX(angleX)[1][i] + rotated[i] * rotateX(angleX)[2][i]);
                rotated = rotateX(angleX)[1].map((_, i) => rotated[i] * rotateX(angleX)[0][1] + rotated[i] * rotateX(angleX)[1][1] + rotated[i] * rotateX(angleX)[2][i]);
                rotated = rotateX(angleX)[2].map((_, i) => rotated[i] * rotateX(angleX)[0][2] + rotated[i] * rotateX(angleX)[1][2] + rotated[i] * rotateX(angleX)[2][i]);

// Rotate along Y axis
                rotated = rotateY(angleY)[0].map((_, i) => rotated[i] * rotateY(angleY)[0][0] + rotated[i] * rotateY(angleY)[1][i] + rotated[i] * rotateY(angleY)[2][i]);
                rotated = rotateY(angleY)[1].map((_, i) => rotated[i] * rotateY(angleY)[0][1] + rotated[i] * rotateY(angleY)[1][1] + rotated[i] * rotateY(angleY)[2][i]);
                rotated = rotateY(angleY)[2].map((_, i) => rotated[i] * rotateY(angleY)[0][2] + rotated[i] * rotateY(angleY)[1][2] + rotated[i] * rotateY(angleY)[2][i]);

// Project the points onto 2D canvas
                const scale = 100;
                const x = rotated[0] * scale + halfWidth;
                const y = rotated[1] * scale + halfHeight;
                
                return [x, y];
            });

cube.edges.forEach(edge => {
                const v1 = transformedVertices[edge[0]];
                const v2 = transformedVertices[edge[1]];

ctx.beginPath();
                ctx.moveTo(v1[0], v1[1]);
                ctx.lineTo(v2[0], v2[1]);
                ctx.stroke();
            });
        }

function animate() {
            drawCube();
            requestAnimationFrame(animate);
        }

animate();

window.addEventListener('keydown', (event) => {
            switch (event.key) {
                case 'ArrowRight':
                    angleY += 0.05;
                    break;
                case 'ArrowLeft':
                    angleY -= 0.05;
                    break;
                case 'ArrowUp':
                    angleX += 0.05;
                    break;
                case 'ArrowDown':
                    angleX -= 0.05;
                    break;
            }
        });
    </script>
</body>
</html>