A-Frame es un marco WebVR para crear experiencias de realidad virtual (VR)
con HTML. Podemos construir escenas de RV que funcionen en teléfonos inteligentes (con o
sin el visor cardboard), en ordenadores de sobremesa (con navegadores habilitados para VR)
o en el Oculus Rift.
Movimiento en A-Frame
Puedes mirar alrededor agarrando la pantalla con el ratón y girando tu
perspectiva.
También puedes "caminar" por el mundo utilizando las teclas WASD. Utiliza W para caminar
hacia delante, S para caminar hacia atrás, y A y D para deslizarte a izquierda y derecha
respectivamente.
Coordenadas XYZ
Como A-Frame es un mundo 3D, necesitamos utilizar coordenadas x, y, y z. En
A-Frame, el eje x positivo está a la derecha, el eje y positivo está arriba y el
el eje z positivo está fuera de la pantalla. Mira el eje de abajo como referencia:
Los puntos del mundo se pueden definir por sus coordenadas (x, y, z).
(0, 0, 0) sería el centro del mundo.
(1, 3, -2) sería un punto 1 metro en la dirección x (hacia la derecha), 3 en la y (hacia arriba) y -2 en la z (hacia el interior de la pantalla).
El mundo A-Frame utiliza los metros como unidades. Una caja de 100 metros de tamaño puede ampliarse para que parezca normal en la pantalla de un ordenador, pero si se coloca en un entorno de VR, ¡parecerá enorme!
Todos los puntos del mundo A-Frame se definirán por sus coordenadas xyz, separadas por espacios, por ejemplo:
"0 0 0"
"1 3.5 -2.1"
Plantilla de inicio
Este es un sencillo esqueleto de archivo a-frame que puedes utilizar para empezar un proyecto.
<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/1.0.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
¡Pon aquí tu código de la escena a!
</a-scene>
</body>
</html>
Añadir una esfera
Todos los objetos deben añadirse dentro del elemento <a-scene>.
Se puede añadir una esfera utilizando la etiqueta <a-sphere>. Para crear una esfera utilizando valores por defecto para cosas como el color, el radio, etc., sólo tienes que añadir una etiqueta de esfera vacía de esta forma
<a-esfera></a-esfera>
Sin embargo, al menos debes establecer el radio, la posición y el color de la esfera especificando esos atributos en la etiqueta de apertura:
Puedes añadir diversos atributos a la etiqueta de apertura de cualquier objeto, pero los más comunes serán el color, la posición, el tamaño y la rotación. El tamaño y la rotación se definen por sus tres valores x y z separados por espacios, como "0 2 -5"
Lista completa de atributos que puedes modificar
Añadir un plano
Se puede añadir un plano utilizando la etiqueta Para crear un plano utilizando valores predeterminados para cosas como el color, la rotación, etc., sólo tienes que añadir una etiqueta de plano vacía de la siguiente manera:
<a-plane></a-plane>
Sin embargo, al menos debes establecer la rotación, la posición y el color del plano especificando esos atributos en la etiqueta de apertura:
Se puede crear un cono utilizando sólo los valores predeterminados, pero al menos debes establecer la posición, el radio inferior, el radio superior, la altura y el color:
El elemento cielo es una forma de dar a la escena un fondo diferente al blanco por defecto. El cielo puede ser de color o una imagen. Si se utiliza una imagen, debe usarse una imagen de 360º para obtener el mejor efecto.
Un nombre de color válido, como "Blue" o "DarkGreen"
Un valor RGB, como "rgb(255, 0, 0)"
Un código de color HEX, como "#68ff00"
Nombres de colores
Nombres de colores comunes:
red
orange
yellow
green
blue
cyan
indigo
black
white
Los nombres no distinguen entre mayúsculas y minúsculas. "RED" es lo mismo que "red".
Hay 140 nombres de color válidos. Consulta una lista completa de todos los nombres aquí
Ejemplo:
p {
color: blue;
}
Resultado:
Hola
Colores RGB
HTML y CSS representan los colores con el sistema de codificación de colores RGB (Red, Green, Blue).
Cada color se puede hacer simplemente mezclando diferentes cantidades de rojo, verde y azul.
Los valores de color RGB se pueden especificar en CSS utilizando "rgb(rojo, verde, azul)"
Cada valor puede estar comprendido entre 0 y 255, ambos inclusive.
rgb(255, 0, 0) sería rojo
rgb(255, 255, 255) sería el blanco
rgb(0, 0, 0) sería negro
.
Ejemplo:
p {
color: rgb(255, 0, 0);
}
Resultado:
Hola
Valores hexadecimales del color
También podemos representar los colores RGB mediante valores hexadecimales. 6 dígitos hexadecimales componen un color:
Los dos primeros dígitos hexadecimales especifican la cantidad de ROJO en el color
Los dos dígitos hexadecimales siguientes especifican la cantidad de VERDE en el color
Los dos últimos dígitos hexadecimales especifican la cantidad de AZUL en el color
Cada dígito puede ser un valor de 0 a F, siendo 0 el menor y F el mayor
.
"#ff0000" sería rojo
"#ffffff" sería blanco
"#000000" sería negro
.
Ejemplo:
p {
color: #0000ff;
}
Resultado:
Hola
Seleccionador de colores
Utiliza este selector de color para encontrar el color exacto que deseas para tu página web:
Más características del A-Frame
Texturas / Imágenes
Puedes añadir texturas a los objetos para que su superficie parezca una imagen, en lugar de un color, utilizando el atributo src. Sólo tienes que establecer que el src sea la url de la imagen que quieras utilizar:
También puedes interactuar con objetos del mundo. En primer lugar, añade un cursor a la cámara, esto añadirá una "cruz" a la cámara mostrando hacia dónde está mirando el usuario
<a-camera>
<a-cursor></a-cursor>
</a-camera>
Configura tu animación para que sólo comience al hacer clic añadiendo begin="clic" como atributo en la animación.
Ahora la animación se activará siempre que el usuario esté mirando el objeto Y se haga clic con el ratón.
Ejemplo
Interacción basada en la mirada
En un teléfono o en un occulus, no hay ratones para hacer clic. Así que, en su lugar, activamos animaciones mirando a un objeto durante un cierto tiempo. Para ello, añade un fusible y un tiempo de espera al cursor.
El fusible activa un evento de clic tras milisegundos de fuse-timeout. Así, en el ejemplo anterior, si un usuario mira un objeto durante 1000 milisegundos (1 segundo), es como si hubiera hecho clic en el objeto. Entonces comenzaría cualquier animación basada en clics sobre ese objeto.
Ejemplo
