Diseña tu entrada al Metaverso con WordPress (Parte 3/3)
En primer lugar, creamos un bloque y en un archivo de PHP le ponemos las variables que tendrá el elemento. En este caso voy a crear primero el primer elemento, un cubo y el cubo va a tener tres variables que van a ser la posición, la rotación y el color. Luego veremos que cada elemento tiene muchas más variables, pero con estas tres ya podríamos crear un cubo y darle algunas propiedades que luego vamos a cambiar.
Creando una escena básica
A la hora de crear el bloque, podemos poner los diferentes tipos de campos: un campo de texto o un campo de selector de color. Este bloque lo añadimos al contenido de una página como si fuera un bloque normal y ya pintaría el cubo dentro de la escena.
Vamos a ver otros elementos que podemos introducir en nuestra escena. Un cilindro, por ejemplo, que tiene otro tipo de propiedades como puede ser la longitud. También podríamos añadir diferentes propiedades en materiales: la reflexión, la rugosidad, etc.
También podemos crear una esfera. En este caso, por ejemplo, la rotación no tendría mucho sentido porque es una esfera de un color fijo, pero tenemos otras variables típicas de las esferas como el radio.
El suelo sería un plano que tiene ancho y largo. Como tenemos una variable que es la posición en los ejes X, Y, Z, podemos colocar ese plano en el lugar que queramos.
También podemos crear un cielo que sea de color fijo o podemos utilizar imágenes equirrectangulares que son como un mapa desplegado con el que podemos envolver una esfera que nos rodee. Estas imágenes se graban con cámaras 360º y hay muchas páginas donde se pueden descargar imágenes equirrectangulares de forma gratuita.
Con todo lo anterior, esto sería lo que se vería en nuestra página publicada:
Ya tenemos nuestro sistema con el que poder modificar estas propiedades de una forma rápida, como cualquier página de WordPress. Veamos otros elementos que podemos añadir en nuestras páginas tridimensionales:
<a-text>
Podemos introducir, por ejemplo, un texto que puede ser un titular o un párrafo con todas las propiedades típicas del texto su fuente, su alineación, su interlineado, etc. Debemos tener en cuenta que, como estamos en un espacio tridimensional, el texto puede estar colocado delante del espectador, o puede estar arriba, o puede estar incluso detrás.
<a-video>
También es posible meter texturas de vídeo, con autoplay y loop, que tenga X repeticiones, etc. La textura de vídeo se puede utilizar sobre un plano o como textura de un objeto.
<a-light>
Podemos añadir todas las luces que queramos en nuestra escena con diferentes propiedades. Por ejemplo, una luz de foco muy concentrada o una luz de ambiente que nos ilumine toda la escena.
Cada una de esos elementos tiene su intensidad, tiene su color y tiene otras propiedades que veremos más adelante, como pueden ser los reflejos o la sombra.
<a-gltf-model>
Aquí ya saltamos de las primitivas o de los objetos más básicos a cosas un poquito más complejas. Podemos meter modelos 3D creados por nosotros con un programa de modelado como puede ser Blender.
A mi me gusta utilizar este que se llama GLTF, al que muchos llaman el JPG de los modelos 3D, porque comprime mucho las mallas y además te permite meter en un solo archivo las texturas y la malla del objeto.
Por defecto, WordPress no admite modelos 3D. Para eso necesitamos otro plugin. Yo encontré este que se llama 3D Viewer y que funciona muy bien porque te permite subir archivos GLTF a la galería de medios. En general, los plugins de 3D en WordPress no están muy al día y hay algunos que no se actualizan de hace más de seis años y cuentan solamente con unas pocas instalaciones. La verdad es que esta parte del 3D todavía no está muy desarrollada en WordPress.
<a-link>
En este caso, un enlace que es como una especie de portal que nos permite saltar de una escena a otra. Los enlaces se pueden incorporar a un texto o a un objeto.
Sombras y reflejos
Tenemos la posibilidad de añadir sombras y los reflejos, lo que mejora considerablemente el realismo de nuestro mundo inmersivo.
Animaciones
Podemos añadir animaciones preprogramadas o que puedan ejecutarse en cualquier momento con una serie de activadores.
Controles de movimiento
Los controles de movimiento se incorporan a la escena simplemente añadiendo una etiqueta. Se ejecuta una llamada a la librería y nos inserta esos controles de mandos que cuentan incluso con reconocimiento gestual.
Y esta sería la página del editor de Gutenberg, que visualmente no parece gran cosa. Es básicamente un esquema donde podemos modificar las propiedades de los elementos, guardando y publicando cuantas veces queramos.
Hay muchos otros elementos que podemos incorporar a nuestras escenas, como cámaras y efectos de sonido. Te recomiendo que veas la documentación completa de A-Frame para ver todas las posibilidades.
Con todos estos elementos ya puedes empezar a diseñar tus mundo virtuales utilizando WordPress y A-Frame. En el futuro, intentaré seguir desarrollando el tema WPVR para que incorpore todos estos elementos y otras funcionalidades que faciliten la creación de estos entornos.