Nota: El siguiente producto te va a ayudar con: Cómo hacer un motor 3D HTML5
Probablemente ahora sepa que HTML5 cambia las reglas del juego.
Para el cuadro HTML5 en particular, ha habido una avalancha de motores HTML5 3D JavaScript como three.js lanzados para mejorar la Interfaz de programación de aplicaciones 2D HTML5 subyacente.
Tras todo, los gráficos en 3D son mucho más geniales que los gráficos en 2D, ¿verdad?
seguramente sea seguro decir que si tuviese que crear un motor 3D terminado, terminado con transformaciones de matriz 3D, peculiaridades puntuales, peculiaridades planas, sombreado, trazado de rayos y otros cálculos espaciales, sería bastante bien difícil.
Pero, ¿qué ocurriría si quisiéramos hacer un motor de JavaScript 3D básico y mejorado que acepte traducciones y rotaciones? ¿Qué tan bien difícil podría ser?
¿Qué ocurriría si te dijera que podemos crear nuestro propio motor JavaScript 3D simple con solo ? Esta guía dará un motor de JavaScript fácil y directo que permite la representación 3D de HTML5 que se puede usar en animaciones web, juegos, etcétera.
Entender la proyección 3D
Antes de crear nuestro motor 3D, primero debemos comprender de qué manera se crea la ilusión del espacio 3D en una pantalla 2D.
Estas ilusiones se los conoce como Proyecciones 3D. Las proyecciones 3D mapean puntos en un plano bidimensional.
En nuestro caso, los puntos tridimensionales definen el objeto que deseamos renderizar, y el chato bidimensional es la pantalla de la PC.
Como puede ver en la imagen ahora, podemos crear una proyección 3D de un cubo en un chato 2D dibujando tres cuadriláteros irregulares: superior, izquierdo y de adelante.
Proyecciones lisas con elipses
Desafortunadamente, calcular proyecciones 3D puede ser bastante complicado en el código.
¿De qué forma tenemos la posibilidad de simplificarlo? Imagina que estás mirando hacia abajo a un plano cuadrado giratorio.
Sus 4 esquinas estarían en el contorno de un círculo perfecto cuyo radio es media distancia desde las esquinas opuestas del rectángulo.
En este momento imagina que inclinamos el avión en el espacio 3D.
¿Qué está sucediendo?
Este círculo imaginario de repente se convierte en una elipse cuya altura es menor que su ancho.
Esto significa que podríamos hacer una representación 3D simple creando planos cuyas esquinas estén durante los bordes de la elipse.
Si definimos una rotación del chato por el ángulo theta, ¡los cálculos de proyección 3D de súbito se vuelven bastante sencillos!
Cualquier punto en nuestro chato tridimensional se puede definir mediante las próximas dos ecuaciones que describen un punto a lo largo del borde de una elipse:
x = A * cos(theta) y = B * sin(theta)
donde A es la mitad del ancho de la elipse y B es media altura de la elipse.
Motor 3D sencillo
Si nuestro motor solo crea planos en el espacio 3D, tenemos la posibilidad de crear múltiples planos transversales que cubren el objeto 3D que queremos renderizar.
Ejemplo de representación de objetos 3D
Esquema de planos de sección transversal.
Ver demostración Esta forma 3D particularmente se creó generando tres planos transversales: los planos superior, medio e inferior.
Estos planos imaginarios nos dan todos y cada uno de los puntos que necesitamos para renderizar un elemento 3D utilizando la Interfaz de programación de aplicaciones Canvas de HTML5.
Al crear una función simple que puede producir, trasladar y girar estos planos de sección, hemos creado un motor 3D simple.
Aquí está el código de nuestro motor HTML5 3D:
// Este motor 3D fácil es proporcionado por www.Html5CanvasTutorials.com // para hacer representaciones HTML5 3D función Chato(centroX,centroY,longitud del plano,ancho del plano,inclinación del plano,chato Theta) this.centerX = centerX; this.midY = midY; this.planeLength = planeLength; ta.planeTheta = planeTheta; var últimaPerspectivaX = nulo; var últimaPerspectivaX2 = nulo; var planeNextCornerAngle = 2*Math.asin(ancho del chato/longitud del chato); this.rotate = function(newTheta) planeTheta = newTheta – planeNextCornerAngle/2; this.translate = function(nuevoCentroX, nuevoCentroY) centroX = nuevoCentroX; centro Y = nuevo centro Y; this.generate = function() var oval length = face length; var ancho del óvalo = largo del óvalo * inclinación del plano; var perspectivaX = (longitud del óvalo / 2) * Math.cos(planeTheta); var visión Y = (ancho del óvalo / 2) * Math.sin(planeTheta); var perspectivaX2 = (longitud del óvalo / 2) * Math.cos(planeTheta + planeNextCornerAngle); var perspectivaY2 = (ancho del óvalo / 2) * Math.sin(planeTheta + planeNextCornerAngle); this.topLeftX = (perspectivaX *1) + centroX; this.topLeftY = (perspectiveY * -1) + middleY; this.bottomRightX = (perspectivaX*-1) + centroX; this.bottomRightY = (perspectiveY*1) + centerY this.topRightX = (perspectiveX2 *1) + centerX; this.topRightY = (perspectiveY2 *-1) + centerY; this.bottomLeftX = (perspectivaX2 *-1) + centroX; this.bottomLeftY = (perspectiveY2 *1) + middleY;
Este motor 3D fácil es absolutamente libre de utilizar y modificar siempre que mantenga los comentarios en el código.
¡Gozar!
contenido relacionado
~~~~~~~~📱~~~~~~~~
Fikiri.net es el sitio perfecto para encontrar las últimas novedades y comentarios sobre dispositivos y apps tecnológicas, de esta manera como para conseguir consejos y trucos para sacar el máximo partido de tu tecnología.
