Canvas 3D Cube

Criar um jogo 3D completo como o Minecraft diretamente no HTML5 Canvas é um projeto extremamente complexo que envolve muitos conceitos avançados como renderização 3D, geração procedural de mundo, gerenciamento de voxels e física. Podemos começar com um exemplo muito mais simples para ilustrar os princípios básicos da renderização 3D em um Canvas 2D: desenhar um cubo 3D giratório. Canvas 3D Cube

body { margin: 0; overflow: hidden; background-color: #222; display: flex; justify-content: center; align-items: center; min-height: 100vh; } canvas { border: 1px solid #fff; background-color: #000; } const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); // Canvas dimensions const width = canvas.width = 400; const height = canvas.height = 400; // Cube properties const cubeSize = 100; const halfSize = cubeSize / 2; // Define 3D vertices of the cube const vertices = [ { x: -halfSize, y: -halfSize, z: -halfSize }, // 0: Front-Bottom-Left { x: halfSize, y: -halfSize, z: -halfSize }, // 1: Front-Bottom-Right { x: halfSize, y: halfSize, z: -halfSize }, // 2: Front-Top-Right { x: -halfSize, y: halfSize, z: -halfSize }, // 3: Front-Top-Left { x: -halfSize, y: -halfSize, z: halfSize }, // 4: Back-Bottom-Left { x: halfSize, y: -halfSize, z: halfSize }, // 5: Back-Bottom-Right { x: halfSize, y: halfSize, z: halfSize }, // 6: Back-Top-Right { x: -halfSize, y: halfSize, z: halfSize } // 7: Back-Top-Left ]; // Define edges connecting vertices (pairs of vertex indices) const edges = [ [0, 1], [1, 2], [2, 3], [3, 0], // Front face [4, 5], [5, 6], [6, 7], [7, 4], // Back face [0, 4], [1, 5], [2, 6], [3, 7] // Connecting edges ]; let angleX = 0; let angleY = 0; let angleZ = 0; function project(vertex) { // Simple orthographic projection (ignore z for projection) // For perspective, you'd divide x and y by z (or a function of z) return { x: vertex.x + width / 2, y: vertex.y + height / 2 }; } function rotateX(vertex, angle) { const cos = Math.cos(angle); const sin = Math.sin(angle); const y = vertex.y * cos - vertex.z * sin; const z = vertex.y * sin + vertex.z * cos; return { x: vertex.x, y: y, z: z }; } function rotateY(vertex, angle) { const cos = Math.cos(angle); const sin = Math.sin(angle); const x = vertex.x * cos + vertex.z * sin; const z = -vertex.x * sin + vertex.z * cos; return { x: x, y: vertex.y, z: z }; } function rotateZ(vertex, angle) { const cos = Math.cos(angle); const sin = Math.sin(angle); const x = vertex.x * cos - vertex.y * sin; const y = vertex.x * sin + vertex.y * cos; return { x: x, y: y, z: vertex.z }; } function draw() { // Clear canvas ctx.fillStyle = '#000'; ctx.fillRect(0, 0, width, height); // Rotate and project vertices const projectedVertices = vertices.map(vertex => { let rotated = rotateX(vertex, angleX); rotated = rotateY(rotated, angleY); rotated = rotateZ(rotated, angleZ); return project(rotated); }); // Draw edges ctx.strokeStyle = '#0f0'; ctx.lineWidth = 2; edges.forEach(edge => { const start = projectedVertices[edge[0]]; const end = projectedVertices[edge[1]]; ctx.beginPath(); ctx.moveTo(start.x, start.y); ctx.lineTo(end.x, end.y); ctx.stroke(); }); // Draw vertices (optional) ctx.fillStyle = '#f00'; projectedVertices.forEach(p => { ctx.beginPath(); ctx.arc(p.x, p.y, 3, 0, Math.PI * 2); ctx.fill(); }); } function animate() { angleX += 0.01; angleY += 0.015; angleZ += 0.005; draw(); requestAnimationFrame(animate); } // Start animation animate(); Este código cria uma estrutura HTML básica, estiliza a página para centralizar o canvas e, no JavaScript: 1. Configura o canvas. 2. Define os 8 vértices (cantos) de um cubo no espaço 3D. 3. Define as 12 arestas (linhas) que conectam esses vértices. 4. Implementa funções básicas de rotação em torno dos eixos X, Y e Z. 5. Implementa uma função de projeção ortográfica simples (que mapeia coordenadas 3D para 2D, ignorando a profundidade para o dimensionamento). 6. Cria um loop de animação (`requestAnimationFrame`) que: * Incrementa os ângulos de rotação. * Limpa o canvas. * Aplica as rotações a cada vértice. * Projeta os vértices rotacionados para o espaço 2D do canvas. * Desenha as arestas conectando os vértices projetados. * (Opcional) Desenha os próprios vértices como pequenos pontos. Este é um ponto de partida muito básico. Um jogo como o Minecraft exigiria muito mais, incluindo projeção de perspectiva, texturas, gerenciamento de um grande número de cubos (voxels), colisões, interação e muito mais. Ferramentas como Three.js ou Babylon.js são geralmente usadas para facilitar a criação de gráficos 3D na web.