Transcripciones
1. Introducción: La mayoría de la narración se hace a través de palabras y dibujos, dejando vacíos para que la imaginación del espectador llene. Pero, ¿y si tú, como cuentacuentos, pudieras diseñar toda una experiencia sin dejar vacíos? ¿ Y si pudieras compartir un mundo virtual, una realidad virtual en su totalidad? Hola, soy Albert. Recibí el reconocimiento International Design parte de marcas como Adobe durante los últimos años. También he enseñado a varios 100 estudiantes cómo codificar a través Airbnb ganando más de 50 críticas de cinco estrellas. En particular, he enseñado esto exacto a tu clase innumerables veces en persona. Por primera vez, estoy empaquetando esto en una clase online para ti. En esta clase, aprenderás los tres sencillos pasos para convertir cualquier escena natural en una hermosa experiencia de realidad virtual. Construirás las bases de tus habilidades de codificación de VR mientras ves el mundo que te rodea en un lente diferente. Esta clase está hecha para todos los niveles. No se requiere experiencia en codificación, e incluso los desarrolladores web con experiencia encontrarán valor en la creación de su propio mundo virtual. Esta clase es para ti, si eres un codificador que busca creatividad, un creativo que busca codificación, o un espectador que busca ambos. El objetivo es darte una nueva herramienta, un nuevo espacio como narrador. Con la realidad virtual, ya no estás limitado a una página o a una pantalla plana. El público está en realidad en tu mundo. Ahora mismo, mientras estás viendo este video, piensa en una hermosa escena en la naturaleza luego toma la siguiente lección. Estás a solo tres pasos de entrar en el mundo que apenas estás imaginando. Empecemos.
2. Inmersión en 3 sencillos pasos: Tu proyecto para hoy es crear una experiencia de realidad virtual que encapsula tu escena favorita en la naturaleza. Podría ser un parque infantil, un escondite de verano, tu primer campamento de la historia. No necesitas un auricular de realidad virtual para esta clase. Un navegador de computadora estándar funciona muy bien. No obstante, para experimentar plenamente tu mundo virtual, recomiendo encarecidamente el Google Cardboard por 15 pavos o si eres un drogadicto de VR, te sugeriría encarecidamente el Oculus Quest 2. No hace falta que tu escena sea realista. Tu escena debe reflejar cómo la ves, y aquí te explicamos por qué, la inmersión en un mundo virtual no significa solo fotorealismo. Significa cohesionar a través de las pistas visuales, de audio y de movimiento se involucran en el espectador todas estas formas y esa es una experiencia virtual inmersiva. En las próximas lecciones, construirás justamente eso, una experiencia inmersiva de realidad virtual en solo tres pasos. En primer lugar, desglosa tu escena en una serie de primitivas diferentes, como cilindros y cajas. Segundo, agregar iluminación. Cambia tus materiales para agregar color, reflejos y sombras. Tercero, añadir movimiento. Mantén a tu público comprometido con algo que mirar en la escena. Esto podría ser hojas crujiendo, agua fluyendo o llamas subiendo. Mi consejo para ti, empieza poco. Una escena con unos pocos objetos y un enfoque claro, pero completa los tres pasos, primitivas, iluminación, y movimiento. Entonces puedes graduarte a escenas
cada vez más complejas a medida que te vuelves más cómodo y más seguro. Espero que aún tengas esa escena fácil, brisa, hermosa en tu cabeza. En la siguiente lección, comenzaremos a convertir tu imaginación en realidad virtual.
3. AFrame "Hola mundo": Bienvenido a la Lección 3. En esta lección, crearás tu primer modelo de Realidad Virtual,
un modelo Hello World VR, usando una biblioteca llamada A-Frame. Empieza navegando a esta URL aaalv.in/vr 101/helloworld, esto abrirá un nuevo proyecto en glitch. Deberías ver una pantalla como mi mitad derecha de la pantalla, algunos archivos, algún código y un encabezado que se corta mi grabación. Entonces sugiero colocar sus ventanas de glitch y escultura de lado a lado como se muestra aquí. Voy a minimizar mi navegador de archivos haciendo clic en la flecha que apunta a la izquierda para que puedas ver más de mi código a la vez. No tienes que hacer esto. Para explicar el código que estás mirando, estás mirando una página web HTML. HTML está conformado por un montón de etiquetas, como la que se muestra a la izquierda. Las etiquetas tienen una etiqueta de inicio y una etiqueta de fin como se muestra aquí, y las etiquetas se denotan usando la barra inclinada hacia adelante. Si ya eres un Web Dev Pro, puedes saltarte el primer minuto o así donde hablamos de HTML. Este es tu código HTML Hello World, nota que todo el documento está envuelto con una etiqueta HTML. Aquí hay una etiqueta de inicio, y aquí está la etiqueta final. Dentro de la etiqueta HTML, hay un par de etiquetas de cabeza y cuerpo. Estas tres etiquetas, HTML, cabeza y cuerpo, definen
más o menos el punto de partida de cualquier documento HTML. Dentro de la etiqueta de cabeza, agregamos propiedades invisibles de la página web, en este caso, hemos agregado un título para la página web, y también hemos agregado una línea que
nos permite crear experiencias de Realidad Virtual usando el marco de cabeza. Dentro del cuerpo, agregamos la escena de Realidad Virtual usando a-scene. Te he añadido dos luces, hablaremos de luces con más detalle más adelante. Volver a los toboganes. A lo largo de esta clase, crearás objetos en este mundo virtual usando HTML, los objetos más simples se llaman primitivas. primitivos son formas básicas de servicio como cubos, conos y esferas. En A-Frame, se crea una primitiva mediante el uso de una etiqueta HTML. Como dijimos antes, las etiquetas en HTML tienen una etiqueta de inicio y una etiqueta de fin como se muestra aquí. Las etiquetas finales se denotan usando la barras inclinadas hacia adelante. Hay varias etiquetas diferentes que usaremos, todas las etiquetas tienen las mismas menos que, mayores que, y barras inclinadas hacia adelante como denotadas en negro aquí. No obstante, cada etiqueta tendrá un nombre de etiqueta diferente denotado en naranja aquí. Por ejemplo, aquí está la etiqueta de cuerpo que vimos antes en A-Frame, aquí hay una etiqueta de caja, esto crea un cubo en nuestro mundo virtual. Aquí están todas las partes anotadas, probemos este código ahora. Adelante y haz click justo donde dice: “Tu código aquí”. Voy a dar clic al final de la línea 11, presionar “Enter”, y ahora teclear menos de un rallador de caja discontinua que. Observe que glitch auto se completa para terminar etiqueta después de añadir un mayor que. Si tienes un error tipográfico, por ejemplo, digamos que me olvido del guión, escribiré en una caja, Glitch creará una etiqueta final con tu error tipográfico. Tendrás que arreglar manualmente las etiquetas inicio y final. Para obtener una vista previa de su modelo, adelante y haga clic en la parte superior izquierda, “Mostrar”, y luego haga clic en, “Junto al código”. Ahora mismo, esta vista previa se ve vacía, no se ve nada, pero eso es porque estamos dentro de la caja. Adelante y haga clic en esta ventana de vista previa, use las teclas de flecha o WASD para moverse fuera de la caja, y aquí está la caja en el suelo. También puedes arrastrar con el ratón para rotar la cámara. Las primitivas se pueden personalizar de algunas maneras diferentes utilizando componentes. Por ejemplo, aquí está la caja que acabamos de definir, ahora
podemos agregar el componente de sombra. Esta sombra de componente permitirá a la caja almacenar en caché y sombras recibidas, no requiere un valor. Probemos esto ahora. De vuelta dentro de tu código, adelante y justo antes de esto mayor que signo, voy a teclear en sombra. Una vez más, para previsualizar tu modelo, sigue
adelante y haz clic en la ventana de vista previa y luego usa las teclas de flecha o WASD para moverte, y puedes ver ahora que hay una sombra. También podemos cambiar el color de la caja, lo
haremos estableciendo el componente de color igual al valor azul. Los colores del texto aquí sólo se utilizan para el énfasis. El texto púrpura es el nombre del componente, el texto rosa es el valor del componente. A veces agregaré saltos de línea entre propiedades como
esta, esto es solo para que puedas ver todo mi código sin que me desplace horizontalmente, ya sea que ponga todo el código en una línea o en múltiples líneas, el código se comportaría el de la misma manera. Ahora, cambiemos el color de tu caja a azul, así que en tu código del lado derecho, voy a dar clic en esto para minimizar nuestra vista previa para que puedas ver más de mi código. Justo después de esa sombra, voy a escribir en color igual a “Azul”. Asegúrate de no olvidar tus comillas de doble. Una vez más, para abrir la vista previa, puedes ir a un espectáculo y junto al código. No obstante, en este caso, noté que la vista previa ya ha sido abierta porque hay un cuadro gris detrás de este botón, lo que puedo seguir adelante y dar clic en este botón de la derecha para volver a expandir mi vista previa. Una vez que haya reexpandido mi vista previa haga clic en la vista previa y puedo moverme para ver mi nueva caja azul con la sombra. Cambiemos la posición de nuestra caja. La posición se define utilizando tres ejes. El eje x es horizontal, x
positivo es a la derecha, x
negativo a la izquierda. El eje Y es vertical, positivo y está arriba, negativo y está abajo. Por último, el eje z sobresale de la pantalla, z
positiva es hacia ti, z
negativa está lejos de ti, aquí están los tres ejes ilustrados. Para cambiar la posición de la caja, establezca el atributo de posición. La primera coordenada es x, la segunda coordenada es
y, y la tercera coordenada es z Aquí cambiamos la coordenada z a la negativa tres, esto significa que movemos la caja tres unidades lejos de nosotros. Observe que las coordenadas se denotan sin comas, solo espacios entre cada par de valores de coordenadas. Vamos a seguir adelante y probar esto en código, voy a minimizar una vez más mi ventana de vista previa haciendo clic en la flecha derecha. Aquí, ahora voy a escribir posición igual a “0 0 -3". Ahora, si vuelvo a expandir mi vista previa, puedes ver la caja sin tener que mover la cámara manualmente. Es especialmente importante incluir comillas dobles alrededor de tu valor de atributo, así que no olvides esas. Para completar tus conocimientos de transformaciones también cubriremos la rotación. Los tres ejes son los mismos que antes, podemos rotar a lo largo del eje horizontal o x, el eje vertical o y, o el eje z que apunta directamente fuera de la pantalla hacia nosotros. Para entender de qué manera gira una rotación positiva, usa tu mano derecha. Curra tu mano derecha en un puño y con pulgar apuntando en la dirección positiva del eje, el rizo de tus dedos indica una dirección de rotación positiva. Prueba esto ahora, riza tu mano derecha en un puño, excepto con el pulgar sobresaliendo. Puedes verificar el eje x, y las flechas giratorias del eje z aquí son correctas, rotación z
positiva gira el objeto a la izquierda, rotación x
positiva gira el objeto hacia ti. Para cambiar la rotación de la caja, establezca el atributo de rotación. La primera coordenada es x, la segunda coordenada es
y, y la tercera coordenada es z Aquí cambiamos la coordenada x a nueve grados. Para entender qué dirección es esa, consulta con el diagrama en la parte superior izquierda y comprueba tu mano derecha rizada. La rotación x positiva gira la caja hacia nosotros. Observe las coordenadas se denotan sin comas, igual que antes, solo espacios entre cada par de valores de coordenadas. No olvides las comillas doble alrededor de tu valor de atributo. Probemos esto ahora, voy a minimizar la vista previa y luego teclear aquí rotación igual,
y en realidad voy a escribir 9 0 0. Adelante y vuelve a ampliar tu vista previa, ahora, puedes ver que la caja ha girado hacia nosotros muy ligeramente. Podemos movernos a la izquierda si no estamos del todo convencidos. Ahora, cubriremos tres consejos para mantener organizado tu código HTML. Sugerencia Número 1, agrega una identificación a todas las etiquetas, te
voy a mostrar ahora en el código. Adelante y minimiza tu vista previa, y dentro de tu código, voy a añadir otro atributo aquí, ID es igual a jugador. Ya que sólo tenemos un objeto, estas ideas no ayudan demasiado, sin embargo, en lecciones posteriores tendremos muchos objetos. En ese punto, los identificadores son muy útiles para encontrar objetos en nuestra escena. A continuación, tendremos que explicar qué marco de referencias para poder introducir nuestro segundo consejo. En primer lugar, crearé otra entidad, esta entidad no es en realidad un objeto, es solo una forma de agrupar objetos juntos. Adelante y escribe “A-entity id es igual a padre”. Voy a eliminar la etiqueta final creada automáticamente, y la voy a pegar justo después de esta etiqueta en la parte inferior, la caja original que creamos. Una vez que haya hecho eso, voy a seleccionar esta línea 13, con un jugador, y voy a tocar. Esta etiqueta es lo que llamamos la etiqueta padre o elemento padre. Nos referimos a la caja como la etiqueta child o elemento child. Entonces moveré al padre, no la casilla a la derecha, cambiaré la posición de los padres a 1 0 0. Adelante y teclea “posición igual a 1 0 0". Si abres tu vista previa, notarás que la caja ahora se ha movido a la derecha también. Adelante y minimiza tu vista previa. Ahora voy a mover la caja hacia arriba, aquí voy a cambiar el valor y en la posición para atribuir a uno. Si abro mi vista previa, puedes ver ahora que la caja se ha movido hacia arriba. ¿ Qué está pasando exactamente? Adelante y veamos este marco de referencia. Nuestro padre fue movido a la derecha como se muestra en el diagrama en la mitad superior de la diapositiva. En relación con el padre, nuestra caja se movió hacia arriba como se muestra en la mitad inferior de la diapositiva. En consecuencia, percibimos la caja infantil como estar en la parte superior derecha de la pantalla, esto es lo que se llama marco de referencia. Esto nos lleva a nuestro segundo consejo, que es usar entidades padre para agrupar objetos juntos, esto mantiene nuestro código más organizado. Verás ejemplos de esto en lecciones posteriores. Tip Número 3 es sangrar todas las etiquetas de niños. Aquí hay un ejemplo, puede que me hayas notado indentando inadvertidamente hasta cierto grado Glitch también hace esto por ti, con sangría adecuada puedes decir qué primitivas pertenecen a qué objetos. Eso es todo por nuestros tres consejos. En la parte superior izquierda haga clic en “Mostrar”, y luego en una nueva ventana. En esta nueva ventana, podrá acceder a la URL de la página web. Puedes compartir esta URL con cualquiera que quieras ver tu modelo de VR. Si lo deseas, ahora puedes cargar tu experiencia de VR en tus auriculares de VR. Si tienes un Google Cardboard, carga la URL en tu teléfono, haz clic en el “botón de Realidad Virtual” en la parte inferior derecha, que dice VR aquí mismo, luego pon el teléfono en Google Cardboard. Echa un vistazo a través de la lente. Es posible que tengas que dar la vuelta para encontrar tu caja azul. El proceso es similar para un Oculus Quest, accede al navegador Oculus, y accede a la URL. El navegador Oculus accederá al sitio web directamente en modo VR. Esto concluye la lección, has aprendido mucho en esta lección. Este es un resumen rápido de los conceptos que has tocado sobre primitivas, componentes, posición, rotación y marco de referencia. También te dieron tres consejos para código HTML organizado limpio. Si quieres acceder y descargar las diapositivas, visita esta URL. Eso es todo para tu modelo Hello World Virtual Reality. En la siguiente lección, comenzaremos a construir nuestra versión de Realidad Virtual de una escena en la naturaleza.
4. Paso 1. Elementos primitivos: Bienvenido a la Lección 4. En esta lección, comenzaremos a convertir una escena en la naturaleza en una experiencia de realidad virtual. Empieza navegando a esta URL, aaalv/vr101/helloworld. Esto abrirá un nuevo producto en Glitch. Entonces deberías ver una página como la de mi derecha, un navegador de archivos, un encabezado que está cortado y algún código. Al igual que antes, te sugiero colocar tu ventana Glitch y Skillshare lado a lado como se muestra aquí. En estas próximas tres lecciones, haremos una versión estilizada de realidad virtual de un templo. He sacado fotos de un sitio web llamado pixels.com, donde puedes encontrar fotos de alta calidad, gratuitas para usar. En particular, he escogido una de las primeras fotos de un templo, un santuario o portón japonés. El punto de partida de esta lección es aprender a simplificar imágenes como
esta en primitivas básicas como cajas y cilindros. En esta lección hay cuatro partes. En la primera parte, cubriré los primitivos básicos para este templo. Aquí está el templo otra vez. En la mano derecha de la pantalla, voy a dar click en la flecha izquierda para minimizar el navegador de archivos para que puedas ver más de mi código. Adelante y empecemos. Empieza por definir una entidad para contener tu templo. Ten en cuenta que esta entidad no es en realidad un objeto en tu mundo de realidad virtual, es solo una forma de agrupar otros objetos juntos. Adelante y haga clic en la línea 16 de su archivo, voy a agregar algunas líneas extra y luego teclear a-entity ID igual a templo. Esa es la identificación de nuestro templo. Este espaciado justo al frente aquí, así que he agregado algunas pestañas diferentes, eso en realidad no importa pero solo para mantener limpio tu código. Lo he tabulado para que esté alineado con las líneas anteriores. Ahora que tengo la identificación, sigamos adelante y sumamos la sombra para que tu templo pueda lanzar y recibir sombras. Todos los objetos secundarios heredarán la capacidad de lanzar y recibir sombras. También cambiaremos la posición. Voy a mover el templo arriba por una y alejarme del espectador por tres unidades. Empecemos ahora haciendo el pilar izquierdo. Para estilizar un poco este modelo, usaremos un cono para que la base del pilar sea más ancha que la punta del pilar. Antes de comenzar a definir este pilar izquierdo, adelante y haga clic entre sus dos etiquetas de inicio y final. Pulse enter para crear una nueva línea. Voy a hacer eso otra vez y luego golpear tab para que ahora puedas definir las etiquetas de tu hijo dentro del templo. Como siempre, comienza identificando lo primitivo, el ID del pilar izquierdo. Vamos a hacer un cono y luego teclear ID igual a pillar-izquierda. Voy a añadir un signo mayor que para completar el cono. Ahora, dale un radio en la parte inferior de 0.15. Voy a escribir en radio-fondo igual a 0.15. Te darás cuenta de que aquí he creado una nueva línea en lugar de solo un espacio entre los dos componentes, ID y radius-bottom. Este salto de línea es completamente opcional. Podrías mantener todo tu código en una línea si quisieras. Elegí crear una nueva línea para cada componente para que no necesites desplazarte horizontalmente para ver el código de este pilar. A continuación definamos un radio superior de 0.07. Radius-top equivale a 0.07. También le daremos una altura de dos porque el origen de los templos está en y es igual a 1. Ahora definamos la altura igual a dos y movemos el pilar a la izquierda en 0.65, lo que significa coordenada x de 0.65 negativa. En caso de que te estés preguntando cómo obtuve estos valores extrañamente específicos como 0.07. Afiné estos valores de antemano para encontrar el mejor valor. Si te preguntas cómo elegir el mejor valor tú mismo, tengo un consejo. Este consejo es utilizar el Inspector A-Frame. Ahora porque mi pantalla ya es tan diminuta, voy a maximizar mi ventana Glitch. Aquí está ahora mi ventana Glitch maximizada. Para utilizar el Inspector A-Frame, primero
tendrás que abrir la vista previa. Voy a dar click en el show de arriba a la izquierda junto al código. Ahora puedes ver mi adelanto en el lado derecho, puedes ver el cono de pie en el pilar izquierdo para tu sien. Dentro de su ventana de vista previa, haga clic dentro de su ventana de vista previa, luego presione la opción de control I, todo a la vez para iniciar el Inspector. En el Inspector, puede entonces seleccionar el objeto que desee. En mi caso, voy a seleccionar el pilar. Entonces puedes cambiar cualquier atributo que quieras y ver su impacto visualmente en tiempo real. Para poder ver más de este Inspector, voy a arrastrar esta barra redimensionable aquí mismo. Entonces aquí voy a cambiar realmente la posición y para ser más baja o más alta. También puedo cambiar la rotación a lo largo de cualquiera de los ejes que quiera. No obstante, es posible que desee enchufar aquí 30, por ejemplo,
para ver cómo se ve girado a lo largo del eje x en 30 grados. Nota importante sin embargo, sin configuración adicional, en realidad no se pueden guardar las ediciones que se realizan dentro del Inspector. Por simplicidad, debe realizar el menor número posible de cambios en el Inspector. Esto se debe sólo a que la función de exportación en la parte superior derecha, aquí mismo, partir del momento de esta grabación, en realidad a veces falla en exportar tu configuración ajustada. Entonces, en resumen, usa el Inspector para ver los cambios más rápido, pero agrega manualmente tus ajustes ajustados a HTML para estar seguro. Ahora voy a dar click en volver a la escena para que pueda cerrar el inspector. También voy a arrastrar esta ventana de vista previa para que eso sea un poco más pequeño y luego voy a minimizar la vista previa haciendo clic en la flecha. Ahora, sigamos adelante y copiemos y peguemos para el segundo pilar. Solo para ser consistente, voy a dar click justo después de esta doble cotización y golpear enter. Entonces voy a copiar y pegar
este código y pegar justo debajo y luego renombrar esto a pillar-derecha. El pilar correcto está justo a la derecha del origen. Vamos a cambiar el valor del eje x a positivo, así que 0.65. Ahora les voy a mostrar tanto la imagen como el código una vez más. Entonces aquí está el templo una vez más. A continuación, defina la parte inferior de las dos barras que corren horizontalmente. Vamos a definir aquí a-box, vamos a darle una identificación, así que esto es bar-inferior. Entonces vamos a establecer el ancho, la altura y la profundidad. No obstante, en lugar de definir el ancho, la altura y la profundidad por separado, usaré el atributo scale. Este atributo como suena, escala el objeto en cada dirección, escala de uno es igual a ancho de uno. Por lo que la primera coordenada es la escala a lo largo de la dirección x o en otras palabras, el ancho. Vamos a establecer escala igual a dos y el ancho será de dos. Vamos a hacerlo corto, por lo que la altura será 0.15 y vamos a hacerlo un poco ancho, por lo que la profundidad va a ser 0.1. Por último, vamos a darle una posición. Levantemos el listón a una altura de 0.65. Por lo que vamos a escribir en posición igual a cero, 0.65, cero y asegurarnos de agregar un signo mayor que y eso completará la etiqueta por ti. A continuación vamos a definir la más alta de las dos barras corriendo horizontalmente. Empieza por definir lo primitivo. Entonces vamos a escribir a-box, darle una identificación, igual que siempre. Ahora vamos a establecer escala igual a 2, vamos a darle un ancho de 0.2, una altura de 0.2 y una profundidad de 0.25. Después levante el listón a una altura de 1.05, por lo que la posición es igual a 0, 1.050. Ahora, hemos escalado los objetos para que tenga algo de ancho, altura y profundidad,
y también le hemos dado una posición donde sólo
cambiamos la coordenada y para que el objeto sea más alto. Por último, vamos a sumar un gorro. Esta parte superior, muy, muy tippy parte superior del templo. Una vez más, esto va a ser una caja, así que voy a ir hasta el final de la línea 31 para mi archivo, y pulsar Enter, luego vamos a teclear en a-box, y vamos a darle un id igual que de costumbre, tap-higher. Vamos a hacerlo un poco más ancho y más profundo que la barra debajo de ella. Necesita ser un poco más ancho, así que en lugar de 2.2, va a ser 2.6. Se ve bastante delgado en la foto, así que le voy a dar una altura de 0.05, y también tiene que ser un poco más profundo, así que vamos a darle una profundidad de 0.3. Vamos a subir el listón a una posición ligeramente más alta. Posición es igual a cero a lo largo del eje X, una coordenada Y de 1.15, y luego una coordenada Z de cero. Escriba en mayor que para completar su etiqueta. Esto en realidad completa nuestro templo. Ahora echemos un vistazo y veamos cómo se ve la plantilla. Da click en esta vista previa en el lado izquierdo, y aquí puedes ver un templo. Aquí está ahora el templo terminado y podemos ver que coincide un tanto visualmente con el templo de la izquierda. Si tu templo no se parece al mío, como en una pieza falta, o una pieza no está en la posición correcta, comprueba de nuevo que seas el código coincide con el mío en esta sección para el templo. Es posible que a tu código le falten algunas comillas dobles diferentes, asegúrate de incluir esas comillas dobles, o puede que le falte una etiqueta final. También puedes ir a esta URL, aaalv.in/vr101 para ver una versión completada de este código. En el siguiente paso, ahora vamos a definir una linterna. Voy a volver a abrir mi código en pantalla completa. Debajo de este templo, así que asegúrate de que esto esté fuera de la etiqueta a-entidad. Ahora vamos a crear una linterna. Definir una linterna, a-entidad, esto es sólo un grupo, u objetos juntos, y vamos a identificar la linterna con linternas centro. Van a ser tres faroles, y esta linterna va a estar en el centro. Vamos a darle una vez más la capacidad de lanzar y recibir sombras, y lo vamos a mover para que sea cero unidades, que esté en el centro, y luego también sea una unidad fuera del suelo, y luego a tres unidades de distancia de nosotros. Adelante y agrega un signo mayor que para completar tu etiqueta. Voy a añadir esta posición justo entre mis etiquetas de inicio y fin, pegaré Enter dos veces, y pegaré Tab una vez para que esté dentro de esta linterna. Cubra la linterna con un prisma triangular. Aquí vamos a identificar lo primitivo que es un cono, a-cono. Entonces podemos hacer efectivamente un prisma triangular mediante el uso de un cono, y estableciendo el número de segmentos radiales para ser cuatro. Aquí vamos a identificar primero el cono con id igual a linternas cono. Vamos a darle, segmentos-altura equivale a uno, y luego le vamos a dar segmentos radiales completos; segmentos-radiales equivale a cuatro. Una vez más, no olvides tus comillas dobles, y no olvides tus guiones. Ahora vamos a establecer el sombreado flash en verdadero. De lo contrario las sombras y el sombreado seguirán luciendo redondas o como un cono regular. Voy a escribir en sombreado plano igual a verdadero. Ahora, podemos establecer los radios, por lo que el radio inferior será de 0.1, y luego la altura de este objeto será de 0.09. No olvides ese signo igual como casi lo hice. Entonces vamos a mover un poco este prisma triangular hacia arriba, por lo que la posición es igual a cero, 0.16, cero. Entonces lo vamos a rotar para que nos esté enfrentando. Voy a golpear Entrar aquí justo después de esta doble cita, y ahí está nuestro prisma triangular. Ya veo cómo se ve esto, voy a abrir la vista previa en este lado derecho. Si aún no lo has hecho, asegúrate de dar click en Mostrar, y luego Siguiente a El Código. Si ves que hay caja gris justo detrás de esto Siguiente a El Código como la mía tiene, entonces eso significa que tu vista previa ya está abierta así que haz clic en la flecha justo por aquí. Se puede ver que hay un prisma triangular flotante justo ahí entre tus verdaderos pilares. Ahora, vamos a añadir una caja para el techo de la linterna debajo de ese prisma triangular. En tu código, justo después de este cono, necesito tabular eso una vez más. Nuevamente, ese espacio en blanco, esa pestaña realmente no importa, es solo para ayudarnos a ver cómo se organiza el código. Simplemente queremos ver visualmente que este cono está dentro de esta linterna. Ahora que tenemos este cono, agreguemos la caja para el techo de la linterna. Vamos a escribir en a-box dar un id igual que antes, linternas techo va a ser nuestro id Ahora, vamos a establecer el ancho, la altura y la profundidad. Vamos a escribir en escala igual a 0.2, 0.02, 0.2. Después dele una posición de una que esté ligeramente alta. Esto es sólo un poco levantado. Lo que esto significa es de nuevo, el ancho es de 0.2, la altura es de 0.02. Esto debería ser en realidad 0.2. Nuevamente, la escala es ancho de 0.2, altura de 0.02, y profundidad de 0.2. Ahora puedes ver si te mueves por este mundo, nuevo, haz clic en tu vista previa, usa las teclas de flecha o WST, y ahora puedes ver que hay un techo justo debajo de ese prisma triangular. Ahora, vamos a añadir una caja para el fondo de la linterna. Esta es la caja que acabamos de crear, me voy a mover hasta el final y golpear Enter. Entonces ahora vamos a crear otra caja; a-box, id es igual a linternas de fondo. Escala equivale a un ancho de 0.15, una altura de 0.02, y una profundidad de 0.15. Una vez más agrega un signo mayor que para completar tu etiqueta. Ahora, ahí está el fondo de la linterna. Ahora vamos a añadir un orbe de aspecto brillante, una esfera con propiedades emisivas. Agregaremos una luz real a la linterna en la siguiente lección. Escriba en a-esfera, id es igual a linternas orbe, radio es igual a 0.03. Vamos a subirlo un poco,
un poquito diminuto por 0.05, opacidad es igual a uno, y emisiva igual a blanco. Lo que hace esta propiedad final es que hace que el objeto parezca que está brillando. En realidad se puede ver ese orbe blanco justo por ahí. Parece que está brillando. Eso no parece tener sombras arrojadas sobre él. Eso es lo que hace esta propiedad emisiva. [ inaudible] esa doble cita, voy a entrar igual que antes para que podamos ver cómo se organiza esto. Ahora, de nuevo, si te estás preguntando cómo conseguí estos valores
realmente, realmente extraños 0.03, 0.05, y 0, esto soy solo yo afinando valores dentro del Inspector A-Frame, y luego copiándolos. Ahora, voy a volver a la pantalla dividida, y para nuestro último paso, vamos a clonar esa linterna dos veces más. No vamos a copiar y pegar, vamos a hacer algo un poco más limpio. Volver al código en pantalla completa. Esta era la linterna que acabábamos de crear en el paso anterior. Ahora vamos a clonar este farol unas cuantas veces más. Adelante y teclee en a-entidad. Al igual que antes, dale una identificación de linterna. Vamos a definir esto como una linterna que está a la izquierda. Vamos a escribir un nuevo componente que no hemos visto antes. Este es el clon es igual a linternas centro. Puedes darle a esto el valor que quieras. Le estoy dando una posición de 1.25 negativo. Para indicar una linterna a la izquierda, voy a levantar del suelo, y la voy a alejar de nosotros. Ahí está tu Linterna. Voy a hacer esto una vez más para que tengamos una tercera linterna en el lado derecho. Voy a escribir en a-entidad, id es igual a linternas derecha, y clon es igual a linternas centro. Vamos a clonar la linterna central, y luego le voy a dar una posición. Posición es igual a 1.5, 2, negativo 2.5. Ahora, tenemos tres farolillos totales. Voy a mover esto en un poquito para que veas la tercera linterna ahí están nuestras tres linternas. Sólo para explicar este componente de clon, en realidad
estamos usando lo que se llaman selectores CSS. Con selectores CSS, el signo de libra, o el hashtag denota un id Se especifica la linterna original usando un id de linternas centro. Eso es lo que hace este componente clon. No cubrimos ningún concepto nuevo en esta lección, pero hemos practicado los conceptos que aprendimos en la lección anterior. [ inaudible] componente y mantenerse organizado agrupando entidades. También cubrimos dos consejos extra. Uno es el inspector, el Inspector A-Frame que vimos para afinar valores. El segundo son los componentes del clon. Esto nos permite mantener nuestro código organizado en lugar de copiar y pegar. Si quieres acceder y descargar estas diapositivas, visita esta URL. Esto concluye el paso 1. En el paso 2, agregaremos color a tu escena.
5. Paso 2. Color: Bienvenido a la Lección 5. En esta lección, seguiremos convirtiendo una escena en la naturaleza en una experiencia de realidad virtual en particular, estaremos agregando color a nuestra experiencia. Comience navegando a esta URL, aaalv.in/vr1o1/step2. Esto abrirá un nuevo proyecto en Glitch. Al igual que antes, sugiero colocar sus ventanas Glitch, y Skillshare lado a lado como se muestra aquí. Primero ampliaremos nuestro conocimiento de los componentes, luego cambiaremos los colores, y agregaremos iluminación a la escena. Empecemos con los componentes. Aquí hay un componente que hemos visto antes. El componente de color tiene un valor, azul. A esto se le llama componente de propiedad única. Tiene una propiedad que es el valor del color. Aquí hay un componente que no hemos visto antes llamado material. El material es lo que se llama un componente multipropiedad porque soporta múltiples propiedades como color y opacidad. Los nombres de las propiedades se muestran aquí en azul, como antes, los valores se muestran aquí en rosa. Observe que para separar los nombres de propiedad de los valores de propiedad, utilizamos dos puntos denotados en rojo. Para separar propiedades unas de otras, utilizamos puntos y comas denotados en rojo. Ahora vamos a usar componentes multipropiedad para cambiar el color del cielo. Ahora, coloreemos nuestro cielo. Este es nuestro código de inicio del Paso 2. Una vez más, voy a minimizar el navegador de archivos aquí. Voy a empezar a referirme a objetos dentro de nuestra escena por su identificación, lo que los identificadores que lo asignamos aquí. Adelante, y naveguemos a la escena. El lugar es esta etiqueta aquí en la línea 13. Oscurece el cielo estableciendo la propiedad de color de los componentes de fondo, escriba en fondo es igual a color, y luego le vamos a dar un color púrpura. Este signo de libra ahora denota un valor hexadecimal. Vamos a teclear en 0011a, esta es solo una forma de definir un color. Ahora ve cómo se ve esto. Adelante y abre tu ventana de vista previa, haz clic en “Mostrar”, junto al código. Si ya lo has hecho, entonces estarán un cuadro gris detrás junto al código, al
igual que el mío, en cuyo caso puedes hacer clic en la vista previa de la izquierda. Se puede ver que hay ese morado oscuro en el fondo. Ahora eso es todo para el cielo. A continuación cambiemos el color del suelo. En nuestro código, vamos a cambiar el color del suelo para que sea un índigo. El suelo está en el fondo. Esta es la línea 42 con un avión a. Lamentablemente debería haber dado a esto una identificación, pero es lo que es. Ahora cambiemos el color de los motivos para estar en índigo. El color actual es blanco o fff. Vamos a cambiar esto para que sea un #841fde, y esto en realidad también es un tono de morado. Ahora mismo, esto se ve absolutamente horrendo, pero lo cambiaremos más adelante. Eso concluye el terreno. A continuación, hablemos de unas luces. Antes de seguir codificando, tendré que explicar los cinco tipos diferentes de luces que puedes usar en A-frame como versión 1.1.0. No hay necesidad de memorizar estos, siempre
puedes buscar en Google las luces A-Frame para volver a encontrar esta lista de luces. En esta lección, quería encontrar
visualmente cada luz para que puedas obtener una intuición para cuándo usar qué luz. Aquí está la escena que estaremos usando. El primer tipo es una luz ambiental. Es una luz omnipresente. Piénsalo como la exposición en tu cámara. Todas las entidades se ven igualmente afectadas por la luz ambiental. Al bajar la intensidad del ambiente se oscurecerán todos los objetos, y al aumentar la intensidad se iluminarán todos los objetos. También puedes agregar color a la luz ambiental para darle una escena de sabor cálido o fresco. Volver a la configuración original. El segundo semáforo es una luz direccional. Luz direccional que se puede pensar como el sol. Es la luz lanzando la sombra de la caja en este entorno de realidad virtual. Bajar la intensidad de la luz direccional, y obtienes menos contraste en tus sombras, y aquí hay aún menos contraste. Observe que podría haber subido la exposición general usando luces ambientales. No obstante, por muy intensa que sea mi iluminación ambiental, no
recuperaré el contraste de sombras sin iluminación direccional. Volver a la escena original. Para la luz número 3, agregaremos luces hemisférias. Para mostrarte mejor sus efectos, cambiaré estas cajas a blancas. Aquí está la iluminación hemisférica. Básicamente funciona como la iluminación ambiental, excepto que se puede especificar un color desde abajo, y un color desde arriba. Aquí tenemos azul desde abajo y blanco desde arriba. Aquí hay más iluminación hemisférica con azul desde arriba, y azul desde abajo. Esto es idéntico a la iluminación ambiental con azul. Volver a la escena original. Para la luz número 4, añadiremos luces puntuales para mostrarte mejor sus efectos, he bajado la iluminación ambiental de vuelta a 0.2. Aquí hay una luz puntual justo encima de la caja más a la izquierda. Observe que la luz brilla en todas las direcciones como una bombilla descubierta. Al igual que con las luces direccionales
, puede proyectar sombras. Aquí está la misma luz puntual desplazada hacia la derecha. Volver a la escena original. Para la luz número 5, agregaremos focos. Fiel a su nombre, los focos lanzarán luz en una dirección como lo ponen los docs A-Frame, esto es como la señal de murciélago. Para mostrarte mejor sus efectos, he bajado a la iluminación ambiental de nuevo a 0.2. Aquí hay un foco de atención que brilla en sólo una parte de la caja, como luces que esperarías en un teatro, espectáculos acuáticos de
Las Vegas, o en una exposición de museo. Aquí te presentamos la lista completa de luces A-Frame disponibles para ti como versión 1.1.0. No te preocupes si esta lista parece abrumadora, ahora
vamos a usar estas luces en un ejemplo. Para empezar, simplemente puedes copiar mi iluminación en cada nuevo proyecto que realices. Ahora configuremos la iluminación de tu entorno. Adelante, y desplácese hacia arriba hasta la parte superior de su archivo. Ahora, agregaremos tres luces al nuevo entorno. Observe que aquí ya hay dos luces. En mi caso, esto es en las líneas 14 y 15. Puedes seguir adelante, y eliminar ambas luces. Ahora voy a definir una nueva luz. Vamos a teclear en a-light, vamos a establecer el tipo como direccional, vamos a cambiar la intensidad o lo brillante que brilla a 0.3. De nuevo, no olvides tus comillas dobles o tu signo igual. Por último, vamos a darle un tono púrpura. Vamos a definir color igual a 6909b3. Esta es una luz púrpura. No finalmente, aún necesitamos agregar más componentes. Adelante, y mueve la luz hacia arriba a la derecha. Posición es igual, la derecha significa una x positiva, arriba significa una y positiva, y hacia nosotros significa una z positiva Ahora
vamos a agregar un componente multipropiedad. Este es el componente de luz con el atributo de sombra de fundición, perdón, propiedad, y entonces el valor es verdadero. Esto significa que nuestra luz puede proyectar sombras. Ahora vamos a sumar un signo mayor que para cerrar nuestra luz, y vamos a mover esto de vuelta aquí para alinearnos con esto. Algo no está alineado. Eso es lo mejor que puedo hacer. A continuación, vamos a añadir otra luz, vamos a repetir este proceso para otra luz direccional. Vamos a teclear aquí una luz, tipo igual a la direccional, intensidad igual a 0.2. El color es blanco, y la posición va a estar muy cerca de nuestra última luz. Por último, asegúrate de habilitar también las sombras que se proyectan. Ahora que tengo estas dos luces direccionales, sigamos adelante, y sumamos nuestra luz ambiental para que toda esta escena sea un poco más brillante, ahora mismo es un poco demasiado oscura. Para nuestra tercera luz, a-light, tipo es igual a ambient. Ve, y agrega intensidad a 0.15, y luego el color va a ser otro morado, 6909b3. Está bien, y esa es nuestra escena. Todavía parece un poco oscuro así que si quieres puedes subir la intensidad de cualquiera de estos valores, y ver cómo funcionan. Por ahora, estas son las luces que necesitamos. Ahora bien, si estás confundido por cómo extrapolar o usar estas luces en otros proyectos para empezar, siempre recomiendo agregar una luz direccional, y una ambiental a cualquier escena con la que estés trabajando, luego refinando o agregando luces según sea necesario. De hecho puedes, solo copiar estas luces que tengo aquí si quieres. Para nuestro paso final en esta lección, añadiremos luces puntuales a tus linternas como si las linternas estuvieran brillando. Estas fueron las luces que definimos antes. Adelante, y desplázate hacia abajo hasta la linterna. Esta es la linterna que definimos en la lección anterior. Ahora vamos a cambiar el color de este orbe aquí mismo. Vamos a cambiar la luz emisiva del orbe de blanco a un color cian. Vamos a definir aquí 09edda, no
olvides ese letrero de libra justo antes de tu color. Aviso emisivo en realidad no arroja la luz, emissivo solo configura ese objeto para que parezca que está brillando. Ahora en realidad tendremos que añadir una luz. Ahora agregamos una luz puntual en el centro de la linterna también con el mismo tono de cian. Eso es un trabalenguas. Justo después de nuestro orbe, sigamos adelante, y ahora teclear a luz, darle una identificación de linternas de luz, y el tipo va a ser un punto. Ahí está nuestra luz puntual, la intensidad es de 0.2. El puesto va a estar ligeramente arriba por encima de la parte inferior de la linterna. Vamos a darle un color cian igual que antes, y luego vamos a asegurarnos de que esta luz pueda proyectar sombras. Recuerda esta capitalización aquí mismo para esta propiedad, sombra de
fundición es muy importante. No olvides tus comillas dobles, no olvides esos signos iguales. Adelante, y ahora termina esa etiqueta con un signo mayor que, y puedes ver que son muchas sombras siendo lanzadas, una de cada una de estas linternas, y otra de las dos luces direccionales, y eso es todo. En la parte superior izquierda, puedes hacer click en “Mostrar”, y luego en una nueva ventana, y puedes compartir la URL de esta página web con cualquiera que quieras ver tu modelo de VR. Si lo deseas, ahora puedes cargar tu experiencia de VR en tus auriculares de VR. Si tienes un Google Cardboard, carga la URL en tu teléfono, haz clic en el botón VR en la parte inferior derecha, y luego pon tu teléfono en el Google Cardboard. Echa un vistazo a través de la lente. Es posible que tengas que dar la vuelta para encontrar tu templo. El proceso es similar para una Búsqueda Oculus, accede al Navegador Oculus, y accede a la URL. El Navegador Oculus accederá al sitio web directamente en modo VR. Diviértete. Con eso concluye esta lección. En esta lección, cubrimos componentes de múltiples propiedades, y diferentes tipos de luces en A-Frame. Después practicamos ambos conceptos agregando color, e iluminación a la escena. Si quieres acceder, y descargar estas diapositivas, visita esta URL. Esto concluye el Paso 2, agregando color. En el tercer, y último paso, agregaremos movimiento a tu escena.
6. Paso 3. Movimiento: Bienvenido a la Lección 6. En esta lección, comenzaremos a agregar movimiento a tu escena. Comience navegando a esta URL, aaaiv.in/vr101/step3. Esto abrirá un nuevo proyecto Glitch. Al igual que antes te sugiero colocar tu glitch y SkillShare ventanas lado a lado como se muestra aquí. Un marco en sí no incluye soporte para el primer paso de nuestros cinco pasos y sistema Star. No obstante, un desarrollador tercero creó un sistema Star que podemos usar. En tu código este es nuestro arrancador paso tres. Ya he minimizado el navegador de archivos y el lado izquierdo, y he abierto la vista previa. Si aún no has abierto la vista previa, haz click en el show superior izquierdo y selecciona Siguiente a El código. En la línea 9, ya he agregado una línea de código que permite utilizar este sistema estelar de terceros. Ahora vamos a añadir este sistema estelar al código. Justo debajo de tu a-escena, sigue
adelante y crea un nuevo componente, a-entidad. sistema estelar equivale a un radio de 200. Este radio de 200 hace que algunas estrellas parezcan más grandes y otras se vean más pequeñas. Probablemente te estés preguntando, bueno, ¿dónde está la moción? Esa es una gran pregunta. Todavía no hay ninguna moción. Tendremos que añadir algo de movimiento al suelo a continuación. El suelo va a ser reemplazado por un océano, al igual que en nuestra foto. Bueno, al igual que con un sistema estelar, un marco en sí no soporta un objeto oceánico. No obstante, uno de los a marco Bella de Brisk creó noción que podemos usar. Dentro de este código, vamos a desplazarnos hasta el muy,
muy abajo donde está el suelo. Este terreno es sólo un avión a. Vamos a quitar esta multitud para mí, esta es la línea 71. Voy a borrar este avión. En lugar de ese avión, ahora
vamos a definir un océano. Ya he creado código para el océano en un archivo llamado ocean.js. Si hago clic en el navegador de archivos en el lado izquierdo aquí, realidad se
puede ver el ocean.js. Por ahora no necesitamos preocuparnos por el contenido de ese archivo. Vamos a cerrar este navegador de archivos y una vez más, y ahora vamos a añadir el objeto oceánico en el mismo, muy fondo. Ahora vamos a teclear en a-océano. Posición es igual a 00.10. Esto lo moverá hacia arriba sólo un poco fuera del suelo. Vamos a darle la capacidad de recibir y proyectar sombras. Vamos a hacerlo bastante profundo y bastante amplio. Entonces vamos a configurar qué tan rápido y con qué lentitud fluctúa realmente. Puedes cambiar estos valores sin embargo te parezca conveniente. Aquí he establecido algunos valores arbitrarios. Voy a darle una amplitud de cero, varianza de amplitud de 0.2,
velocidad de 1.5, y varianza de velocidad de uno. Pero puedes cambiar estos valores sin embargo, te gustaría ver cómo se comporta y reacciona el océano. Ahora vamos a poner su opacidad en uno, para que
eso no sea ver a través. También vamos a establecer la densidad de los puntos en ese espacio en 50. Hay mucho más polígono rebosando alrededor para simular el agua. Ahora le vas a dar un color, 841fte, y añadir un signo mayor que para completar tu etiqueta oceánica. Ahora nuestro océano es un tono morado. Vamos a añadir otra etiqueta oceánica que sea transparente para que haya un poco más de comportamiento parecido al agua. Entonces la posición a-océano es igual a otra vez, la misma posición, por lo que está ligeramente fuera del suelo. Vas a darle la capacidad de recibir sombras, una profundidad de 50, ancho de 50, por lo que el mismo tamaño. Ahora lo vamos a hacer un poco transparente. Vamos a hacer que esto tenga un poco más de varianza en amplitud. Vamos a darle la misma velocidad y la misma varianza de velocidad. Entonces la densidad, o cuántas ondas puedes ver aquí, serán 50, y luego el color será del mismo color que antes. Eso completa nuestro océano. Ya puedes ver la vista previa en el lado derecho. A continuación, ahora vamos a mover las linternas. Vamos a traducir o cambiar las posiciones de y rotar cada una de las linternas. Volver al código. Aquí, adelante y desplácese hasta donde están las linternas. En este caso, tenemos linterna centro aquí en la línea 40. Para animar un objeto utilizará el componente de animación, igual que con otros componentes que has visto anteriormente, el componente de animación tiene múltiples propiedades. Vamos a crear una animación ahora. En un fotograma, puede crear varias animaciones para un solo objeto agregando dos guiones bajos y agregando un identificador único. En este caso, vamos a dar click en la etiqueta de inicio aquí en la línea 40 justo antes de ese signo mayor que. Nuevamente, justo antes de esta mayor que signo, vamos a golpear enter y escribir en animación. Vamos a darle dos guiones bajos y luego un identificador único. En este caso, lo vamos a llamar animación de posición. Existen tres propiedades requeridas diferentes para cualquier animación. El primero es que necesita especificar qué propiedad desea animar. En este caso, animará la propiedad de posición. Vamos a escribir en posición de propiedad. Asegúrate de añadir un punto y coma justo después de eso. Hay una segunda propiedad que necesitamos agregar, que es el valor inicial. En este caso, la posición inicial será la posición original del objeto, o cero uno negativo tres. Aquí vamos a definir desde cero uno negativo tres punto y coma. El tercer valor requerido es el valor final. En este caso, la posición final es alguna posición arbitraria. He puesto negativo uno a negativo cuatro. Aquí dos es negativo uno a negativo cuatro. Recuerda, espacios entre estos valores, sin comas, asegúrate de que haya un punto y coma. Hay algunas propiedades de animación extra dispuestas a establecer para asegurar que tu linterna se mantenga en movimiento. Vamos a establecer loop a true, que siga recorriendo este espacio después de que el colon sea completamente opcional. Te darás cuenta de que he sido inconsistente con esto, desafortunadamente. Pero este bucle verdadero hará un bucle de la animación definitivamente. Si no configuras el bucle la verdadera animación ocurrirá solo una vez. A continuación, vamos a establecer la dirección o simplemente dir: alterna. Esto significa que la linterna anima en ambos sentidos desde el punto A hasta el punto B y hacia atrás. Si no estableces la dirección para alternar, la linterna animará del punto A al B, luego saltará hacia atrás y animará de nuevo del punto A al punto B. A continuación vamos a fijar la duración corta de nuestro dur a 8.5 segundos. Vamos a fijar aquí 8500 porque esto realmente se mide en milisegundos. Voy a añadir un punto y coma. Ahora que ya lo he hecho, terminamos con esta animación. Ya verás en la vista previa ahora que la linterna se mueve, ¿verdad o no? Sí, aquí mismo. Ahora desapareció un poquito ahí. Ya ves que la linterna en realidad se está moviendo un poco. Pero queremos hacer ahora es hacer que la linterna se mueva un poco con algo de rotación. Justo después de esto, vamos a escribir en la rotación de animación es igual a y la propiedad será la propiedad de rotación esta vez, vamos a decir que es de cinco diez cinco, y a negativo diez cinco negativos. Puedes ajustarlos a lo que quieras. Tan solo asegúrate de que sean valores pequeños para que no esté girando a agresivamente. Al igual que antes vamos a recorrer esta animación para siempre. Vamos a direcciones alternas para que se
anime suavemente entre dos puntos y la duración será de dos segundos, por lo que 2,000. Ahora hemos terminado la animación de rotación, pero lo que notarás es que la linterna en realidad no se mueve. No está girando en absoluto. Adelante y jalemos al inspector como aprendimos en la última lección para
seguir adelante y golpear opción de control e I. Ahora si miras a esta linterna, entra y da click en el lado izquierdo de la linterna aquí, el linternas centro, y ya verás que está la posición de animación igual que esperábamos, pero no hay rotación de animación. Eso debería decirte que algo anda mal aquí con el nombre. De hecho, si miras por el lado izquierdo, ¿ves el bicho? El bicho es realmente sutil. Se trata de un subrayado en lugar de dos subrayados. Como dijimos antes, la animación debe ir seguida de dos guiones bajos y luego el identificador. Adelante y sumemos aquí el segundo subrayado. Ahora la linterna se mueve claramente,
tanto girando como en movimiento. De nuevo, asegúrate de que alguna vez dupliques el guión bajo, asegúrate de tener tu signo de igual, tus puntos y comas, y solo en general asegúrate de que tu código coincida exactamente con el mío aquí. Eso es todo por las linternas. Sigamos adelante y pasemos a la siguiente parte. Ahora vamos a definir animaciones para el Orbe de Linterna. Se va a pulso y crecer en intensidad para luego encogerse en intensidad. Adelante y desplácese hacia abajo hasta el orbe. Esto habrá orbe de linternas aquí mismo. Vamos a cambiar la opacidad del orbe para que el orbe parezca brillar brillantemente y luego más tenue alternativamente. Posteriormente hará que la luz misma se ilumine y se diminuya en consecuencia. Al igual que antes, especificaremos la propiedad para animar al valor inicial y al valor final. Bucle infinitamente y direcciones alternas. Aquí vamos a definir animación-__opacidad. Vamos a darle la propiedad que queremos animar. Vamos a decir dónde anima desde donde anima 2s. Este es el n valor uno. Vamos a darle un bucle para siempre y después alternar direcciones para la animación. Asegúrate de tener tus puntos y puntos y comillas dobles iguales a signos, subrayados
dobles toda la puntuación. Ahora se puede ver que el orbe está cambiando realmente la opacidad. Este, el del centro y el de la derecha, todos están cambiando. Eso concluye nuestro Orbe de Linterna a mi lado para animar realmente la luz misma. Hacer que una luz se ilumine y se tenue. Adelante y desplázate hacia abajo hasta la luz misma. Aquí queremos animar la luz de los faroles para iluminar y atenuar periódicamente. Vamos a añadir animación. La intensidad de la distancia es igual a. Entonces pongamos un nombre a la propiedad. quiere decir de qué se trata, el valor inicial del valor n. Entonces lo vamos a recorrer para siempre y establecer la dirección para alternar igual que antes. Ahora esta es la intensidad de la luz. ¿ Qué tan fuerte está la luz dentro de su radio de impacto? Pero queremos realmente expandir la luz para que su distancia o el radio de impacto realmente aumente. Adelante y agreguemos otra animación. Esta será animation_distance. Esto va a cambiar la propiedad de distancia de nuestra luz. Vamos a empezar de uno que por defecto a para que parezca afectar más de una región a su alrededor, bucle para siempre y direcciones alternas. Aquí se puede ver que sólo la luz o la linterna y el centro en realidad está animando a los otros dos faroles en el sitio o no. Voy a seguir adelante y animar esos otros dos faroles también. Siéntete libre de seguirlas y también puedes personalizarlas como quieras. Eso es todo para la escena. Ya puedes ver que las tres linternas se mueven. Si quieres acceder y descargar las diapositivas, visita esta URL. En esta lección, agregamos varios tipos de pistas de movimiento. Eso concluye esta experiencia de realidad virtual. Hemos cubierto los tres pasos involucrados para crear cualquier experiencia de realidad virtual. Primitivas, color, y movimiento.
7. Conclusión: Enhorabuena. Ya terminaste una experiencia de realidad virtual, que puedes compartir con amigos, familiares, realmente con quien quieras. Hemos cubierto primitivas, iluminación, movimiento, aunque olvides los detalles del código, las técnicas exactas que utilizamos. Lo que espero que te quites es lo accesible que es este vehículo para contar historias. Qué fácil es empezar a crear un mundo virtual con A-Frame. Espero que estés emocionado por experimentar tu proyecto de clase, porque definitivamente lo estoy. Por favor, déjame entrar a tu mundo virtual, y sube tu proyecto a la pestaña de proyectos y recursos. Asegúrate de incluir una captura de pantalla de tu mundo virtual, e incluye un enlace para que accedamos a tu experiencia de realidad virtual. Si estás interesado en aprender más sobre la codificación creativa, asegúrate de seguirme en Skillshare para obtener actualizaciones cuando se lance una nueva clase. Si estás interesado en aprender más sobre la ciencia de datos o el aprendizaje automático, asegúrate de consultar mis 101 clases en mi perfil de Skillshare en Python, SQL, ciencia de datos, visión por computadora, y más. Enhorabuena nuevamente por llegar hasta el final del curso, y hasta la próxima vez.
Alvin Wan, Research Scientist
