Usando Glitch, la Escuela te dará ejercicios paso a paso ¡Para ayudarte a saltar en WebVR! La Escuela tiene secciones yendo ← y → pero también subsecciones yendo ↑ y ↓:
Navegar ↓
- Revisa la documentación y preguntas frecuentes
- Obten ayuda de devotos en Slack
- Haz preguntas en Stack Overflow
- Si estás prescenciando un taller ¡Levanta tu mano si tienes una pregunta!
Navegar →
La Escuela usa Glitch como entorno de aprendizaje y desarrollo para A-Frame.
- Glitch te permite programar en el navegador sin tener que configurar algo
- Glitch te permite remezclar proyectos para usar proyectos existentes de A-Frame existentes como punto de inicio
- Glitch publica instantáneamente y almacena tu sitio con una URL (p.ej.,
https://aframe.glitch.me) - Glitch actualiza tu sitio en vivo en cada cambio de código
- Glitch permite que varias personas programen al mismo tiempo
Si estás interesado(a) en configurar un entorno de desarrollo local, sigue adelante ↓
Glitch te permite remezclar o hacer un fork de un proyecto existente y usarlo como base para tu nuevo proyecto. Antes de empezar, te recomendamos enlazar Glitch a una cuenta de GitHub. Después de remezclar, Glitch te dará un proyecto aleatorio y una URL, que puedes cambiar.
Remezclar A-Frame en Glitch para iniciar
Una vez que has remezclado A-Frame en Glitch, revisa en dónde editarás tu código. Asómate y mira que incluso puedes editar el código de servidor backend, subir assets, crear nuevos archivos, o ¡Invitar a otros a editar contigo!
Después que te has asomado por el editor, mira el proyecto en vivo.
En cualquier momento, si quieres descargar tu proyecto o exportarlo a Github mira el menú Advanced Options. La descargar te dará un archivo
.tgzque puedes descomprimir. Para proyectos A-Frame, importa lo que está en la carpetapublic/, e ignora todo el código del lado del servidor.
Si descargas un proyecto, puede Que estés interesado(a) en configurar un entorno de desarrollo web en la siguiente sección ↓. Sino ¡Sigue adelante → para empezar con A-Frame!
Puedes configurar un entorno de desarrollo web completo en un máquina locl, en lugar de usar el entorno de desarrollo en línea de Glitch.
- Obtener un editor de texto: Atom es uno bueno con el cual empezar
- Configurar un servidor local: Descarga y ejecuta Mongoose
Server o ejecuta
python -m SimpleHTTPServeren una terminal - Crea un archivo
index.htmly copia el código de A-Frame de los ejemplos de Glitch - Ejecuta un servidor local en el mismo directorio en el que está el archivo HTML
- Abre la URL del servidor local en tu navegador (p.ej.,
http://localhost:8000) - Haz cambios a tu archivo HTML y refresca tu navegador para ver los cambios
- Opcional: Revisa ngrok para permitir que cualquier dispositivo tenga acceso a tu servidor local
Atom es un buen editor de texto para empezar si no tienes uno. Otra opciones populares son Notepad++, Sublime, Brackets, o vim.
Necesitas un servidor HTTP local para servir tus archivos al navegador.
Opcionalmente, puedes usar ngrok para ayudar a desarrollar tu proyecto A-Frame en un smartphone sin tener que tener una IP local.
- Descarga y descomprime ngrok en cualquier lugar
- Ejecuta ngrok, proporcionandole el número de puerto de tu servidor local
(
./ngrok http 8080) - En la terminal, ngrok te dará una URL con un montón de letras y números
(p.ej.,
https://abcdef123456.ngrok.io) - Abre esa URL en otro dispositivo en cualquier red (como un smartphone u otra computadora)
Juega con los ejemplos en tu escritorio o smartphone desde la página de A-Frame, el Blog de A-Frame, o awesome-aframe. Mira webvr.rocks para información o configurar WebVR con un visor si tienes uno.
A-Frame provee elementos HTML fáciles de usar para principiantes llamados primitives. En las siguientes secciones, modificaremos los cosas básicas a través de atributos HTML (p.ej., cambiar colores, posiciones, rotaciones, escala) y tener una idea del flujo de trabajo.
La posición define en dónde están los objetos en el espacio 3D (X, Y, Z) en metros. Cambia la
posiciónde los objetos a traves los valores del atributo HTMLposition. Lee sobre posiciones.
Remezclar la Lección en Glitch
- Mover el cilindro hacia la izquierda reduciendo el valor X de
position - Mueve la caja hacia arriba aumentando el valor Y de
position - Mueve la esfera hacia atrás reduciendo el valor Z de
position - Crédito adicional: Agregar
<a-ring>dentro de<a-sphere>y dale una posición para ver las posiciones relativas
La rotación define la orientación de los objetos en el espacio 3D (sobre lo ejes X, Y, Z) een grados. Usa regla de la derecha para visualizar parcialmente la rotación. Lee sobre rotaciones.
Remezclar la Lección en Glitch
- Gira el cilindro al rededor del eje X para ver el fondo
- Gira la caja al rededor del eje Y para que la caja esté mirando hacia arriba
- Crédito adicional: Envuelve el contenido de la escena con
<a-entity>(como un<div>) y date una rotación para ver las rotaciones relativas
Agregar primitivos a la escena agregando elementos HTML debajo de
<a-scene>- Lee sobre primitivos.
Remezclar la Lección en Glitch
- Agrega
<a-torus-knot>a la izquierda - Agrega
<a-dodecahedron>a la derecha - Agrega
<a-text>alineado en el centro
Agregaremos texturas de imagen para combinar para más apariencia que un color plano. Encuentra tus propias imágnes en línea, y súbelas a través de la sección de recursos en Glitch o a través del cargador en cdn.aframe.io. En donde sea que subas, asegúrate que está siendo servidos con CORS y sobre HTTPS.
En el siguiente Glitch ↓, algunos recursos ya estarán disponibles en la sección de recursos (imagen arriba).
Llena los atributos HTML
srccon las URL de las imágenes. Lee sobre cómo aplicar una textura de imagen.
Remezclar la Lección en Glitch
- Agregar una textura de imagen al suelo,
<a-plane> - Agrega texturas de imagen a las cajas,
<a-box> - Agrega una textura de imagen a la esfera,
<a-sphere> - Agrega una textura de imagen al cono,
<a-cone> - Agrega una textura de imagen al fondo,
<a-sky>. Encuentra Imágenes de 360° desde FLickr
Presiona
<ctrl> + <alt> + ien cualquier escena A-Frame para abrir un editor visual ¡Como las Herramientas de Desarrollador de tu navegador! Prueba el Inspector en algunos de los ejemplos de la página principal. Lee sobre el Inspector.
Modifica una entidad cambiando sus componentes en el panel de la derecha. El Inspector sabe sobre todos los componentes de A-Frame, incluyendo los componentes de la comunidad. Este ejemplo incluye un componente
text-geometryexterno, que el Inspector puede modificar los valores en vivo.
- Selecciona una de las entidades con texto en el ejemplo
- Cambia la propiedad
valuedel componentetext-geometry
Usa componentes de física del Registro para agregar gravedad y colisiones. El Registro es una colección limpia de componeentes de A-Frame. Y el Inspector está enganchado al Registro, así que podemos agregar componentes desde el Registro en el panel de entidad.
- Agrega el componente
static-bodya la grilla del piso - Agrega el componente
dynamic-bodyal nudo del toro (la rosca púrpura de atrás) - Incrementa la posición Y del nudo del toro para hacerlo más alto
- Salir del Inspector
Detrás de los elementos fáciles de usar, A-Frame está basado en una arquitectura entidad-componente. Descomponer los elementos primitivos en el ejemplo Hello, WebVR a elementos
<a-entity>con sus componentes fundamentales.
Remezclar la Lección en Glitch
- Convierte
<a-box>a<a-entity>con el componente geometry y el componente material. Configura el componente geometry para que seaprimitive: box - Convierte
<a-sphere>a<a-entity>con los componentes geometry y material. Configura el componeente geometry para que seaprimitive: sphere - Convierte
<a-cylinder>a<a-entity>con los componentes geometry y material. Configura el componente geometry para que seaprimitive: cylinder - Convierte
<a-plane>a<a-entity>con los componentes geometry y material. Configura el componente geometry para que seaprimitive: plane - Convierte
<a-sky>a<a-entity>con los componentes geometry y material. Configura el componente geometry para que seaprimitive: spherecon un granradius: 3000, y configura el componente material para que seashader: flatasí no necesitamos hacer cálculos pesados para la luz cuando sólo necesitamos un color plano
Usa el patrón entidad-componente para agregar una esfera que también actúe como un punto de fuente de luz. Mezcla juntos los componente, geometry, material, y luz para componer este tipo de objeto.
- Busca
<a-entity id="lightSphere"> - Adjunta el componente geometry configurado para usar
primitive: spherea la entidad - Adjunta el componente material configurado para usar
color: #FFFyshader: flata la entidad - Adjunta el componente light configurado para usar
type: pointa la entidad - Crédito adicional: Agrega el componente animation del Registro a través de la etiqueta
<script>. Adjunta la animación configurada para usarproperty: positionydir: alternateyloop: truey proporcionar un valor de posición parato: <POSITION>
Remezclar la Lección en Glitch
>
El Registro es un gran lugar para consegur componentes frescos que la comunidad ha agregado a A-Frame. Algo como complementos de terceros. Encuentra componentes de la comunidad desde el Registro, copia sus enlaces JS, inclúyelos con una etiqueta
<script>, y úsalos directamente desde HTML.
- Inclye el Particle System. Adjunta
los
<a-entity>con componentesparticle-systemconfigurados apreset: defaultypreset: snow¡Abre el Inspector para jugar con los valores! - Incluye Animation. Adjunta la
animación a la esfera para hacer palpitar su escala configurando el componente
animationconproperty: scale,loop: true, yto: 1.1 1.1 1.1 - Incluye Outline Effect. Ponlo en el
<script>y adjunta el componenteoutlinea la escena
Remezclar la Lección en Glitch
Usa JavaScript y las API del DOM para modificar programáticamente la escena y sus entidades. A-Frame no sólo es HTML; A-Frame provee acceso a JavaScript, Las API de DOM, y three.js debajo de todo para un completo control. Lee sobre cómo Usar JavaScript y las APIs de DOM con A-Frame.
Remezclar la Lección en Glitch
Para ver los logs de JavaScript, podemos abrir la consola de desarrollo del navegador haciendo clic derecho en la página, hacer clic en el Inspector o Inspector de Elementos, y luego clic en la pestaña Consola. Cuando vemos la solución, podemos ver los resultados a través de la consola del navegador.
Usa
document.querySelector()ydocument.querySelectorAll()para obtener una referencia a la escena y sus entidades. Lee sobre cómo consultar las entidades.
Remezclar la Lección en Glitch
- Obtén una referencia al elemento
<a-scene>usandovar sceneEl = document.querySelector('a-scene'); - Obtén una referencia a todos los elementos
<a-entity>usandosceneEl.querySelectorAll('a-entity'); - Obtén una referencia a la entidad de la caja usando
sceneEl.querySelector('#box'); - Obtén una referencia a las entidades de la esfera y el cilindro en una llamada a
.querySelectorAll()usando un selector multielemento. Obtén una referencia a las entidades de la esfera y el cilindro en una llamada a.querySelectorAll()agregando y seleccionando clases HTML
Usa
Entity.setAttribute()para modificar entidades después de obtener del ejercicio anterior. Lee sobre cómo modificar entidades.
- Cambia el componente
rotationde la entidad de la caja - Cambia la propiedad
heightdel componentegeometryde la entidad del cilindro - Cambia la propiedad
metalnessdel componentematerialde la entidad de la esfera
Usa
document.createElement()para crear entidades,.setAttribute()para configurarlas, y.appendChild()para agregarlas a la escena. Lee sobre cómo crear entidades.
Remezclar la Lección en Glitch
- Un bucle
forde JavaScript, crea y agrega 50<a-box>elementos con posiciones y escalas aleatorias (usaMath.random())
Usa
.addEventListener()para registrar una función que será llamada cuando un evento sea emitido. Luego manualmente emite ese evento para que que la función se ejeute. Después podemos usar las escucha de eventos para cambiar la escena basada en las entradas de usuario u otras eventos. Lee sobre los eventos y escuchas de eventos con A-Frame.
Remezclar la Lección en Glitch
- Registra una escucha de evento en la caja para escuchar al evento
foo. En la función, cambia el color de la caja - Emite el evento
fooconEntity.emit()y el cambio de color de la caja
Usa el componente
cursorbasada en la mirada para proveer la posibilidad de interactuar con entidades (principalmente para smartphones). Lee sobre cómo desarrollar una galería de imágenes 360°.
Remezclar la Lección en Glitch
Esta lección tiene todos las escucha de eventos ya conectadas. Sólo necesitamos
agregar una entidad con el componente cursor, el cual provee aquellos eventos basados
en entradas de usuario. Ten en cuenta que estos eventos no son proporcionados por
el navegador, sino a través de A-Frame.
- Agrega una entidad
<a-camera>. Anteriormente A-Frame estuvo proporcionando una cámara predeterminada - Agrga una entida
<a-cursor>como una entidad hijo dentro de la entidad de la cámara - Arrastra la cámara alrededor del click en los paneles en escritorio. En smartphones, mira fíjamente los paneles para lanzar los clicks (por esos son, basado en la mirada)
Usa los eventos
click,mouseenter,mouseleaveproporcionados por el componentecursorbasado en la mirada para cambiar las propiedades de un objeto.
El código en Glitch tendrá la estructura del proyecto preparada. Podemos agregar código
JavaScript dentro del componente handle-events, marcado por los comentarios de código.
Remezclar la Lección en Glitch
- Adjunta nuestro
controller-event-handlera los cubos. Podemos adjuntarlo a todo de una vez a través del mixin - Agrega una escucha de evento para cambiar el color de la caja con el evento
mouseenter - Agrega una escucha de evento para restaurar el color de caja en el evento
mouseleave
Los modelos 3D son como imágenes de aplicaciones 3D y VR, aunque un poco más pesadas. Un modelo 3D es creado de antemano en un programa de modelado 3D como Blender y consta de vértices, texturas, materiales. Recomendamos usar glTF, un nuevo formato de archivo 3D estándar adaptado para la web. glTF es como el JPG de los modelos 3D.
Remezclar la Lección en Glitch
- Agrega el archivo
https://cdn.aframe.io/test-models/models/virtualcity/VC.gltfal atributosrcdel elemento<a-asset-item id="cityModel">para precargar el modelo - Agrega
#cityModelal atributosrcdel elemento<a-gltf-model>para establecer y agregar el modelo
Los modelos pueden venir con animaciones. El modelo proporcionado anteriormente tiene muchas animaciones de vehículos cruzando la ciudad. En el anterior Glitch, tenemos proporcionado un simple componente
play-all-model-animationsque podemos adjuntar a nuestro modelo para reproducir sus animaciones. Coninúa trabajando desde tu Glitch actual.
- Inclute el componente
animation-mixera través de un<script>dentro de<head>después del script de A-Frame. Este componente está actualmente en el Registro, y puede que algún día se incluya con A-Frame.https://unpkg.com/[email protected]/dist/aframe-extras.animation-mixer.js - Adjunta el componente
animation-mixeral<a-gltf-model>configurándolo a través de un atributoanimation-mixer. Por defecto, esto reproducirá todas las animaciones del modelo a la vez.
Si tienes un modelo propio, puede ser complicado subirlo a una CDN ya que esto consiste en múltiples archivos que se referencian los unos a otros. Así que la manera más fácil que hemos encontrado es ponerlos en un repositorio de GitHub, publica la rama master del repositorio a GitHub Pages, y usa
rawgit.compara servirlos. Alternativamente, configura Amazon S3. Hay más por venir.
El seguimiento de controles de mano provee inmersión and interactividad con controles de mano. En el siguiente Glitch, tenemos movimientos pre-grabados de controles de mano y botones con A-Frame Motion Capture. Ahora sólo tenemos que agregar las manos y manejar los eventos de interacción.
Remezclar la Lección en Glitch
- Encuentra
<a-entity id="left">y agrega el componente hand-controls configurado para la mano izquierda (hand-controls="left") - Encuentra
<a-entity id="right">y agrega el componente hand-controls confiurado para la mano derecha (hand-controls="right") - Mira el resultado y observa las manos moviéndose con movimientos pre-grabados
Hay muchos componentes para agregar interactividad con controles de mano. controller-cursor, aabb-collider + grab, super-hands. Para esta lección, usaremos controller-cursor que actúa como un puntero laser para cada mano. Continua desde tu anterior Glitch.
- Agrega el componente
controller-cursora ambas manos - En el componente
controller-event-handler, cambia el color de las cajas cuando las manos pasen sobre cada una con el eventomouseenter, y restaura el color con el eventomouseleave
Están graduados de la Escuela A-Frame y ahora tienen una licenciatura no certificada en WebVR.
Revisa la documentación para más guías para convertirte en un maestro.