directory : /web/canvas/ : wireframe-cube.html

Directory path . web , canvas .
HTML Document File : wireframe-cube.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rotating Cube with Checkerboard</title>
    <style>
        body {
            margin: 0;
            overflow: auto;
        }

        canvas {
            display: block;
        }
    </style>
</head>

<body>
    <canvas id="canvas"></canvas>
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        // Cube vertices and edges
        const 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],
        ];
        const 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],
        ];

        // Perspective projection
        function project([x, y, z]) {
            const scale = 400 / (z + 4);
            return [
                canvas.width / 2 + x * scale,
                canvas.height / 2 - y * scale
            ];
        }

        // Draw checkerboard floor
        function drawCheckerboard() {
            const size = 40;
            for (let x = -10; x <= 10; x++) {
                for (let z = -10; z <= 10; z++) {
                    const screenX1 = canvas.width / 2 + x * size;
                    const screenZ1 = canvas.height / 2 + z * size;
                    ctx.fillStyle = (x + z) % 2 === 0 ? '#444' : '#888';
                    ctx.fillRect(screenX1, screenZ1, size, size);
                }
            }
        }

        // Draw the cube
        function drawCube(rot) {
            const rotated = vertices.map(([x, y, z]) => {
                const cosY = Math.cos(rot.y), sinY = Math.sin(rot.y);
                const cosX = Math.cos(rot.x), sinX = Math.sin(rot.x);

                // Rotate around Y-axis
                let dx = cosY * x - sinY * z;
                let dz = sinY * x + cosY * z;

                // Rotate around X-axis
                let dy = cosX * y - sinX * dz;
                dz = sinX * y + cosX * dz;

                return [dx, dy, dz];
            });

            edges.forEach(([a, b]) => {
                const [x1, y1] = project(rotated[a]);
                const [x2, y2] = project(rotated[b]);
                ctx.beginPath();
                ctx.moveTo(x1, y1);
                ctx.lineTo(x2, y2);
                ctx.strokeStyle = '#fff';
                ctx.stroke();
            });
        }

        // Animation loop
        let rotation = { x: 0, y: 0 };
        function animate() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            drawCheckerboard();
            drawCube(rotation);

            rotation.x += 0.01;
            rotation.y += 0.01;

            requestAnimationFrame(animate);
        }
        animate();
    </script>
    <script src="show-source.js"></script>
</body>

</html>