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 ↓
Navegar →
La Escuela usa Glitch como entorno de aprendizaje y desarrollo para A-Frame.
https://aframe.glitch.me)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.
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.
python -m
SimpleHTTPServer en una terminalindex.html y copia el código de A-Frame de los ejemplos
de Glitchhttp://localhost:8000)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.
./ngrok http 8080)https://abcdef123456.ngrok.io)
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
positionpositionposition<a-ring> dentro de <a-sphere> y dale una
posición para ver las posiciones relativasLa 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
<a-entity>
(como un <div>) y date una rotación para ver las rotaciones relativasAgregar primitivos a la escena agregando elementos HTML debajo de
<a-scene>- Lee sobre primitivos.
Remezclar la Lección en Glitch
<a-torus-knot> a la izquierda<a-dodecahedron> a la derecha<a-text> alineado en el centroAgregaremos 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
<a-plane><a-box><a-sphere><a-cone><a-sky>. Encuentra Imágenes de 360° desde FLickrPresiona
<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.
value del componente text-geometryUsa 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.
static-body a la grilla del pisodynamic-body al nudo del toro (la rosca púrpura de atrás)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
<a-box> a <a-entity> con el componente geometry y el componente material. Configura el componente geometry para que sea primitive: box<a-sphere> a <a-entity> con los componentes geometry y material. Configura el componeente geometry para que sea primitive: sphere<a-cylinder> a <a-entity> con los componentes geometry y material. Configura el componente geometry para que sea primitive: cylinder<a-plane> a <a-entity> con los componentes geometry y material. Configura el componente geometry para que sea primitive: plane<a-sky> a <a-entity> con los componentes geometry y material. Configura el componente geometry para que sea primitive: sphere con un gran radius: 3000, y configura el componente material para que sea shader: flat así no necesitamos hacer cálculos pesados para la luz cuando sólo necesitamos un color planoUsa 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.
<a-entity id="lightSphere">primitive: sphere a la entidadcolor: #FFF y shader: flat a la entidadtype: point a la entidad<script>. Adjunta la animación configurada para usar property: position y dir: alternate y loop: true y proporcionar un valor de posición para to: <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.
<a-entity> con componentes particle-system configurados a preset: default
y preset: snow ¡Abre el Inspector para jugar con los valores!animation
con property: scale, loop: true, y to: 1.1 1.1 1.1<script> y adjunta el componente outline a la escenaRemezclar 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
<a-scene> usando var sceneEl = document.querySelector('a-scene');<a-entity> usando sceneEl.querySelectorAll('a-entity');sceneEl.querySelector('#box');.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 HTMLUsa
Entity.setAttribute()para modificar entidades después de obtener del ejercicio anterior. Lee sobre cómo modificar entidades.
rotation de la entidad de la cajaheight del componente geometry de la entidad del cilindrometalness del componente material de la entidad de la esferaUsa
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
for de JavaScript, crea y agrega 50 <a-box> elementos con
posiciones y escalas aleatorias (usa Math.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
foo. En la
función, cambia el color de la cajafoo con
Entity.emit()
y el cambio de color de la cajaUsa 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.
<a-camera>.
Anteriormente A-Frame estuvo proporcionando una cámara predeterminada<a-cursor>
como una entidad hijo dentro de la entidad de la cámaraUsa 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
controller-event-handler a los cubos. Podemos adjuntarlo a todo de una vez a través del mixinmouseentermouseleaveLos 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
https://cdn.aframe.io/test-models/models/virtualcity/VC.gltf al
atributo src del elemento <a-asset-item id="cityModel"> para precargar el modelo#cityModel al atributo src del elemento <a-gltf-model> para establecer y agregar el modeloLos 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.
animation-mixer a 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/aframe-extras.animation-mixer@3.4.0/dist/aframe-extras.animation-mixer.jsanimation-mixer al <a-gltf-model> configurándolo
a través de un atributo animation-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
<a-entity id="left"> y agrega el componente hand-controls
configurado para la mano izquierda (hand-controls="left")<a-entity id="right"> y agrega el componente hand-controls
confiurado para la mano derecha (hand-controls="right")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.
controller-cursor a ambas manoscontroller-event-handler, cambia el color de las cajas
cuando las manos pasen sobre cada una con el evento mouseenter, y restaura el color
con el evento mouseleaveEstá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.
