Guia para criar mecanismo 3D em HTML5

Você provavelmente já sabe que o HTML5 é uma mudança de jogo. Em particular, com o canvas HTML5, houve uma enxurrada de mecanismos JavaScript 3D HTML5, como três.js lançado para aprimorar a API HTML5 2D rudimentar. Afinal, gráficos 3D são muito mais legais que gráficos 2D, certo? Provavelmente seria justo dizer que se você criasse um mecanismo 3D completo – completo com transformações de matriz tridimensionais, objetos pontuais, objetos planos, sombreamento, traçado de raios e outros cálculos espaciais – seria bastante difícil. Mas e se quiséssemos criar um mecanismo JavaScript 3D básico e otimizado que suporta traduções e rotações? Quão difícil seria? E se eu disser que podemos criar nosso próprio mecanismo JavaScript 3D simples com apenas 40 linhas de código? Este guia fornecerá um mecanismo JavaScript simples e direto que permite renderizações 3D HTML5 que podem ser usadas em animações na web, jogos e assim por diante.

Compreendendo as projeções 3D

Antes de criarmos nosso próprio mecanismo 3D, devemos primeiro entender como a ilusão de espaço 3D é criada em uma tela 2D. Essas ilusões são chamadas Projeções 3D. As projeções 3D mapeiam pontos em um plano bidimensional. No nosso caso, os pontos tridimensionais definem um objeto que desejamos renderizar, e o plano bidimensional é a tela do computador. Como você pode ver na imagem a seguir, podemos criar uma projeção tridimensional de um cubo em um plano bidimensional desenhando três quadriláteros irregulares – os quadriláteros superior, esquerdo e frontal.

Projeções planas com elipses

Infelizmente, calcular projeções tridimensionais pode ser bastante complexo de codificar. Como podemos simplificá-lo? Imagine olhar para um plano retangular giratório. Seus quatro cantos estariam no contorno de um círculo perfeito, cujo raio é igual à metade da distância dos cantos opostos do retângulo. Agora imagine se inclinássemos o avião no espaço 3D. O que acontece? Este círculo imaginário torna-se subitamente uma elipse, cuja altura é menor que a sua largura. Isso significa que poderíamos criar uma projeção 3D simples criando planos cujos cantos residem ao longo das bordas de uma elipse. Se estivermos definindo a rotação do plano com um ângulo, thetaos cálculos da projeção 3D de repente se tornam bastante simples! Qualquer ponto em nosso plano tridimensional pode ser definido com as duas equações a seguir que descrevem um ponto ao longo das bordas de uma elipse:

x = A * cos(theta) y = B * sin(theta)

onde A é metade da largura da elipse e B é metade da altura da elipse.

Um mecanismo 3D simples

Se nosso mecanismo simplesmente criar planos no espaço 3D, poderemos construir vários planos transversais que enquadram um objeto 3D que desejamos renderizar.

Exemplo de renderização de objeto 3D

Diagrama de planos transversais

Veja a demonstração Esta forma 3D específica foi criada gerando três planos de seção transversal – o plano superior, central e inferior. Esses planos imaginários nos fornecem todos os pontos necessários para renderizar o objeto 3D usando a API HTML5 Canvas. Ao criar uma função simples que pode gerar, transladar e girar esses planos transversais, criamos efetivamente um mecanismo 3D simples. Aqui está o código para nosso mecanismo 3D HTML5:

// This simple 3D engine was provided by www.Html5CanvasTutorials.com // for the purpose of creating 3D HTML5 renderings function Plane(centerX,centerY, planeLength, planeWidth, planeTilt, planeTheta) { this.centerX = centerX; this.centerY = centerY; this.planeLength = planeLength; this.planeTheta = planeTheta; var lastPerspectiveX = null; var lastPerspectiveX2 = null; var planeNextCornerAngle = 2*Math.asin(planeWidth/planeLength); this.rotate = function(newTheta) { planeTheta = newTheta - planeNextCornerAngle/2; } this.translate = function(newCenterX, newCenterY) { centerX = newCenterX; centerY = newCenterY; } this.generate = function() { var ovalLength = planeLength; var ovalWidth = ovalLength * planeTilt; var perspectiveX = (ovalLength / 2) * Math.cos(planeTheta); var perspectiveY = (ovalWidth / 2) * Math.sin(planeTheta);             var perspectiveX2 = (ovalLength / 2) * Math.cos(planeTheta + planeNextCornerAngle); var perspectiveY2 = (ovalWidth / 2) * Math.sin(planeTheta + planeNextCornerAngle); this.topLeftX = (perspectiveX *1) + centerX; this.topLeftY = (perspectiveY * -1) + centerY; this.bottomRightX = (perspectiveX*-1) + centerX; this.bottomRightY = (perspectiveY*1) + centerY this.topRightX = (perspectiveX2 *1) + centerX; this.topRightY = (perspectiveY2 *-1) + centerY; this.bottomLeftX = (perspectiveX2 *-1) + centerX; this.bottomLeftY = (perspectiveY2 *1) + centerY; } }

Este mecanismo 3D simples é totalmente gratuito para usar e modificar, desde que você mantenha os créditos comentados em seu código. Aproveitar!

Conteúdo relacionado