De acuerdo. Genial. Así que, bienvenidos todos. Mi nombre es Alvaro Sahu. Soy el autor de Trust.js, que es el tema que vamos a abordar hoy. Gracias a todos por unirse. Estoy muy contento de repetir este año con <a href="/tags/vue-3">Vue</a> JS Live y tener un <a href="/tags/workshop">workshop</a>. El año pasado fue increíble. Así que, estoy seguro de que este año también será muy divertido. Prefiero un <a href="/tags/workshop">workshop</a> realmente básico pero entretenido en términos de comenzar y dominar el <a href="/tags/3d">3D</a> en la web con <a href="/tags/vue-3">Vue</a>. Muy bien. Así que, puedo acceder a la página de Notion. Y el repositorio. Todo bien. Perfecto. ¿Qué hay del resto? Fernando también. Karin, Camilo. Aquí hay una parte que es el requisito previo. Tal vez aumente un poco el tamaño para que sea más visible. Asegúrate de tener al menos la versión 18 de Node. Y trata de instalar NPX. Hará todo mucho más fácil. Entonces, para darte una idea de en qué vamos a trabajar, ¿dónde está el enlace del repositorio? El enlace del repositorio está aquí. Así que, en los recursos, hay este enlace aquí. Genial. Entonces, la idea del <a href="/tags/workshop">workshop</a> hoy, después de ocho ejercicios, no vamos a tener el mismo tiempo para cada uno de ellos. Algunos de ellos son bastante básicos. Pero mi idea de este <a href="/tags/workshop">workshop</a> es ser lo más interactivo posible. Así que, constantemente pediré sus comentarios o si van bien con el ejercicio o si terminaron o si tienen alguna pregunta. Así que, siéntanse libres de hacer sus preguntas en el chat.La idea es que todo lo que explique, puedan seguirlo junto con el ejercicio. Si también solo quieren mirar y van a hacer los ejercicios más tarde con la grabación y demás, está bien. Muy bien. Entonces, la idea sería tener una introducción a Trestias, los fundamentos de la biblioteca. Para aquellos que no conocen Trestias, es una API de renderizado personalizada para <a href="/tags/vue-3">Vue</a>. Te permite construir escenas en <a href="/tags/3d">3D</a> como lo harías con la <a href="/tags/user-interfaces">UI</a> de <a href="/tags/vue-3">Vue</a>. Aprenderán cómo crear escenas en <a href="/tags/3d">3D</a>, cómo usar componentes y composables para hacerlo. Y también cómo animar y agregar interactividad. También hablaré sobre rendimiento y mejores prácticas porque estamos trabajando con <a href="/tags/3d">3D</a> y cómo se integran diferentes características de <a href="/tags/vue-3">Vue</a> en él. ¿De acuerdo? Entonces, si están de acuerdo, podemos comenzar con los ejercicios. Así que, avísenme si pudieron seguir los requisitos previos e instalar todo lo que necesitaban instalar. También están los recursos aquí mismo con el sitio web de Trestias y la documentación. Y algunos otros enlaces si quieren saludar más tarde en Twitter. ¿De acuerdo? Entonces, bien. El primero es bastante simple. Agregué aquí en los pasos del ejercicio el enlace para clonar el repositorio. Así que, básicamente van a su <a href="/tags/cli">terminal</a> de preferencia. Déjenme aumentarlo un poco. Así que, voy a ir a proyectos, probablemente Trest. Y simplemente clonan el repositorio aquí. Voy a poner otro nombre porque ya lo tengo. Así que, Live <a href="/tags/workshop">Workshop</a>. Siempre es difícil poner nombres. Sí, vida. Hay un error. De acuerdo. Déjenme verificar. Papapapapapapapapap. De acuerdo. ¿Qué se está instalando? De acuerdo. Solo se queja de ESLint. De acuerdo. Déjenme abrirlo y ver qué está pasando allí. De acuerdo. ¿Pueden confirmar también que el tamaño de la fuente está bien? Está bastante bien así. Entonces, cuando ingresen al repositorio, intenten instalar. Estoy usando ni. Está bien. Sí. De acuerdo. Ni, que es un paquete de R. Pero básicamente, como es pnpm, pnpm install. De acuerdo. Entonces, pnpm install. De acuerdo. Eso debería instalar todo. Y por favor confirmen que si van a la carpeta starter, entonces, hacen <a href="/tags/ci-cd">cd</a> exercises, y luego van a starter. Aquí. Exercises y el primero, starter. Y ejecutan pnpm run dev. Si pueden ejecutar el starter. Así. Deberían ver esta escena en la. ¿Alguien más tiene algún problema con <a href="/tags/npm">npm</a>? Pueden instalarlo así. Con este comando. Así que, si tienen <a href="/tags/npm">npm</a>, pueden instalar globalmente pnpm y luego simplemente usar pnpm.

Entonces, pnpm. De acuerdo. Genial. Así no necesitas instalar pnpm. Excelente. Genial. ¿Puedes asegurarte de que no haya restricciones de ejecución? De acuerdo. No te preocupes. Probablemente estés usando Windows. De acuerdo. No te preocupes. Tenemos tiempo. Será mejor si puedes seguir el ritmo. Así que, no te preocupes. Avísame cuando podamos comenzar con los diferentes ejercicios. De acuerdo. El primero es solo para poner todo en marcha. Karim, ¿puedes confirmar que pudiste ejecutarlo? ¿Puedes verlo en el navegador? Deberías ver una cuadrícula, un ayudante de acceso y un fondo. Increíble. Genial. Espero a Fernando. Parece que solo estamos esperando a Fernando y Karim. De todos modos, no te detengas. No te preocupes. Aún tenemos tiempo. Un par de minutos más. Está bien. Políticas de ejecución. Oh, dios mío. Eso es algo complicado. De acuerdo. Espero que lo hayas resuelto. Eso me asusta porque pronto voy a comprar una máquina con Windows para cosas de <a href="/tags/3d">3D</a> y realmente espero no necesitar tantas cosas para obtenerlo. También estás usando Windows. De acuerdo. De acuerdo. Voy a continuar. De acuerdo. Para el primer ejercicio, como en Notion, volvamos. Ya tenemos el primero. Así que, hablemos de cómo crear una escena básica. La idea será hacer algo como esto. Pero esto es un script. No sé qué pasa. De acuerdo. Lo siento por eso. Entonces, la idea será agregar el lienzo de Truss. Ya está aquí. Tal vez te muestre básicamente la página del masterclass. Esta aquí. De acuerdo. Y hablar sobre las cosas que están dentro. ¿De acuerdo? Entonces, si vamos a starter, la forma en que puedes hacerlo es simplemente clonar el starter o hacer todo en el mismo. Tú decides. Aquí en starter, encontrarás app.view. De acuerdo. Entonces, app.view es el que contiene el componente de lienzo de Truss. El componente principal es básicamente el que va a renderizar el lienzo con la escena <a href="/tags/3d">3D</a>. Lo importas desde truss.core. De acuerdo. Y ya tienes todo instalado en este repositorio. Pero si no, en la documentación, puedes encontrar cómo instalarlo en tu aplicación de <a href="/tags/vue-3">Vue</a> de inmediato. También estamos usando el tamaño de la ventana y agregando un color de fondo. Esto básicamente le dice al lienzo que ocupe toda la ventana. Y esto cambiará el color de fondo que ves aquí. De acuerdo. Ahora pasemos al componente de experiencia, que es un componente que tenemos aquí. Sí, de acuerdo. Tal vez pueda usar un perfil. Espera un segundo. Que tenga menos cosas. Sí, esto es mejor. De acuerdo. Genial. Entonces, aquí en componentes, tenemos experience.view. De acuerdo. Y esta es nuestra escena. Tenemos una cámara de perspectiva. Olvídate de este componente por ahora. Y tenemos un ayudante de acceso, un ayudante de cuadrícula y un emulador. Como puedes ver, estamos creando una escena usando componentes de vista. Pasamos props, como lo harías con cualquier otro componente de vista, a esos componentes o componentes de Truss, y la regla general, especialmente si has trabajado con 3GS antes. ¿No? De acuerdo. ¿Y tú, Fernando? ¿Has trabajado con 3GS? 3GS es una biblioteca que está debajo, que es la biblioteca de <a href="/tags/javascript">JavaScript</a>. ¿No? De acuerdo, genial. La regla general aquí es que cualquier cosa que tú, como cualquier componente de 3GS, ¿de acuerdo?, vayas aquí, por ejemplo, en el navegador. Así que, si voy a 3GS.org, esta es la biblioteca de <a href="/tags/javascript">JavaScript</a>. Cualquier instancia que quiera usar, por ejemplo, geometrías o el ayudante de cuadrícula que tenemos en el suelo, ¿de acuerdo?, esto es una instancia en 3GS. Estos son todos los objetos que la biblioteca te proporciona para construir tus escenas en <a href="/tags/3d">3D</a>. Entonces, la regla general es que básicamente puedes proponer o agregar un prefijo que sea truss. Y esto convertirá esa instancia en un componente y simplemente lo agregará a la escena, ¿de acuerdo? Esa es la regla general. Cualquier componente que exista en 3, sí, puedes usarlo con Truss, pero simplemente agregándolo a la escena y poniendo un prefijo, ¿de acuerdo? Volviendo a Notion. Entonces, cada vez que crees, como, un componente y lo agregues aquí dentro, esto es exactamente lo que te mostré ahora mismo, ¿de acuerdo? Si agregas el ayudante de cuadrícula de Truss, por ejemplo, eliminemos todo aquí y te mostraré desde el principio, ¿de acuerdo? Así que, ahora, hagamos esto. De acuerdo, actualiza. Ups, detuve el servidor

en un segundo. Ahora. De acuerdo. Así que, tengo mi pantalla en blanco. Voy a agregar aquí el ayudante de cuadrícula. Y ahora que lo agregué, se está añadiendo la instancia a la escena, ¿de acuerdo? Otra cosa que podemos agregar, por ejemplo, es el ayudante de acceso de Truss. Y esto es solo una utilidad que te ayuda visualmente a ver dónde están los ejes. Así que, tienes este eje y, este zeta y este eje x, ¿de acuerdo? Y esto te muestra las posiciones, como las posiciones cartesianas de todo lo que hay dentro. Por ahora, vamos a agregar solo esos dos, ¿de acuerdo? Así. Y luego vamos a tener la escena de esta manera. Probablemente te hayas dado cuenta de que no necesitas agregar la cámara aquí y ya está funcionando. Cuando creas una escena <a href="/tags/3d">3D</a>, básicamente necesitas dos cosas. Necesitas el lienzo, bueno, el árbol. Necesitas los objetos que se van a renderizar en la escena. Y luego necesitas la cámara para ver esos objetos. Eso es lo que estamos haciendo aquí. No tienes que preocuparte por la cámara, porque si no pasas ninguna cámara, Truss creará automáticamente una para ti con valores predeterminados, como la distancia predeterminada y demás. ¿Hasta aquí todo bien? Genial. De acuerdo. Pasemos al siguiente. Estos son muy sencillos, ¿de acuerdo? Así que, la cámara. Estábamos hablando de la cámara y puedes agregar, si quieres más control de la cámara predeterminada, esta es una cámara de perspectiva predeterminada, ¿de acuerdo? Pero podemos pasar nuestra propia cámara de perspectiva. ¿Y qué quiero decir con cámara de perspectiva? Hay dos tipos de cámaras en 3JS. Está la perspectiva, que es la que más se asemeja a cómo funcionan nuestros ojos. Y también está la cámara ortográfica. Para este ejemplo, vamos a usar la predeterminada. Es la que siempre se usa. Como la cámara de perspectiva. Y si guardo, te darás cuenta de que ahora tiene una posición diferente, se aleja un poco, ¿de acuerdo? Tiene una posición diferente. Hablemos ahora de lo que puedes pasar a esa cámara de Truss. Podemos pasar argumentos. ¿Dónde está? Aquí. De acuerdo. Hagamos algo como esto. Así que, cada componente <a href="/tags/3d">3D</a> como el componente de Truss.js tiene una propiedad llamada 'arcs'. Y estos 'arcs' van a inicializar el constructor bajo el capó de Truss.js. Si pasas el cursor con <a href="/tags/typescript-libraries">TypeScript</a>, vas a ver las diferentes opciones que puedes pasar. En este caso, podemos pasar cosas como el campo de visión, que es el ángulo. Entonces tenemos el aspecto de la cámara, el ancho y la altura. El cerca y el lejos, ¿de acuerdo? Así que podemos poner algunos valores predeterminados como estos, ¿de acuerdo? Pero lo interesante viene después, aquí, por ejemplo, si pongo 10 y 1K, verás que se recorta porque puse una distancia aquí. Así que, con esto, puedes decir qué partes de la escena quieres renderizar. Si lo quito y vuelvo a lo que teníamos antes, también podemos cambiar la posición usando props. Tenemos una propiedad de posición que pasa un array. ¿De acuerdo? ¿Por qué tenemos un array? Porque es el valor de X, Y y Z. ¿De acuerdo? Los tres ejes diferentes. Así que intentemos poner uno muy lejano, como 20, 20, 20, para ver qué sucede. Y ahora puedes ver que la cámara se aleja un poco de la escena. Antes estábamos más cerca del centro de la escena, y ahora estamos más lejos. Con esto, podemos posicionar la cámara en nuestra escena. Dado que lo estamos haciendo en 20, 20, 20, está bastante lejos. Así que, acerquémonos un poco más. Y luego puedes ver cómo cambió la posición. Tenemos otra cosa que podemos pasar a la cámara, y se llama 'look at'. Así que voy a poner otro número aquí. Por ejemplo, voy a poner cero en el eje X. Y ahora puedes notar que ya no veo la cuadrícula, porque la tengo en 0, 10, 10. Así que probablemente la cámara ya no está mirando la cuadrícula. Entonces, lo que podemos hacer es decirle a la cámara dónde mirar. La cámara está en esta posición, y decimos, por favor, mira al centro de la escena, que es 0, 0, 0. Y ahora puedes ver que puedes ver la cuadrícula de nuevo, pero desde un ángulo diferente. Básicamente estamos en el eje X ahora mismo porque hemos puesto 0 en el eje X. Así que lo vemos de frente. Podemos reducir la altura quizás y acercarnos al suelo poniéndolo así. Así que cambias la perspectiva de la cámara. Así que ten en cuenta que puedes pasar propiedades a tus componentes de 3DS para modificar el comportamiento de la instancia. ¿De acuerdo? ¿Lograste cambiar la posición y la dirección de la cámara y ver el resultado? También puedes ver las diferentes propiedades disponibles simplemente consultando la documentación de 3DS. ¿De acuerdo? Así que si aquí buscamos la cámara de perspectiva, puedes ver exactamente los mismos argumentos que estábamos discutiendo antes, y también todas las diferentes propiedades que puedes usar, por ejemplo, el enfoque, el campo de visión, el nivel de zoom y algunos métodos. Estas son las que puedes usar como props. ¿De acuerdo? Genial. Así que si estamos bien, podemos pasar al siguiente ejercicio. ¿Cuál es el punto de partida más común? Sí, suelo usar 333. Es un buen punto de partida porque normalmente todo está con una unidad de uno. ¿Verdad? Así que, ese puede ser un metro, es sin unidades. Pones la unidad en él. Pero la mayoría de los modelos y todo es como una escala a uno. Así que si pones 333 aquí, creo que es el que se usa de forma predeterminada o 555. No recuerdo. Así. De acuerdo. Más adelante, voy a mostrar que hay un componente de control de órbita que te permite navegar por la escena con el ratón, y lo verás con eso. También, algo que vale la pena mencionar desde el principio, en realidad, es que voy a especificar aquí. Y si abres las herramientas de desarrollo, esto no estaba disponible el año pasado. De acuerdo. Tenemos las herramientas de desarrollo de <a href="/tags/vue-3">Vue</a>. De acuerdo. Así como revisas tus componentes en <a href="/tags/vue-3">Vue</a>, aquí tenemos un complemento específico para Truss. Sí. Si estás usando Truss en tu escena, lo tendrás. De acuerdo. Si estás usando una cámara de Truss. Aquí puedes ver

la estructura de objetos de la escena. Y si haces clic en la escena, verás diferentes cosas como si está visible, como el objeto en sí. Pero lo más interesante aquí es que en realidad estoy obteniendo la posición y el campo de visión de la cámara de perspectiva que tengo dentro. Entonces, si voy aquí y, por ejemplo, cambiemos el campo de visión. ¿De acuerdo? Como cuánto ve la cámara. Y pongamos algo más estrecho. Como 35. ¿De acuerdo? Ahora puedes ver que el campo de visión aquí en las herramientas de desarrollo ha cambiado. Otra cosa que puedes hacer, sin embargo, es aquí si selecciono la cámara de perspectiva, puedo moverme y cambiar el valor. Así que esto es increíble para simplemente depurar digamos los números correctos para tu escena. En lugar de intentar aquí y cambiar el código, puedes hacerlo directamente aquí y encontrar el que más te guste, simplemente posicionándote con la cámara. También puedes cambiar algunas otras propiedades. Pero para la cámara, es suficiente saber la posición y demás. ¿De acuerdo? Así que siéntete libre de usar las herramientas de desarrollo junto con la masterclass de hoy. Cada vez que te atasques con algo, puedes ir a las herramientas de desarrollo y comprobar cómo está. También puedes ver que aquí tenemos el ayudante de cuadrícula, que es este, y también tenemos el ayudante de acceso. Así que todo lo que tenemos aquí está en las herramientas de desarrollo. ¿De acuerdo? Genial. Así que voy a cerrar eso y probablemente pasar al siguiente si estás de acuerdo. Así que, ejercicio número tres. Aquí es donde todo empieza a ponerse más emocionante. Déjame ver si hay algo ahí. De acuerdo. Genial. Así que lo que vamos a hacer es crear diferentes componentes y añadirlos a la escena. ¿De acuerdo? Y vamos a crear estas geometrías que vemos aquí. Así que, el primero va a ser un cubo. ¿De acuerdo? La forma en que lo vamos a hacer, lo voy a hacer en el mismo ejercicio. Puedes crear uno nuevo. Tú decides. De acuerdo. Pero en nuestro experience.vue, aquí voy a ir hacia abajo. Lo pondré aquí. Y crearé un cubo. De acuerdo. Así que, para crear un cubo, necesitas dos cosas. Necesitas una geometría y necesitas un material. Y luego los juntas para crear algo que llamamos una malla. De acuerdo. Entonces, la forma en que funciona en Truss es que creas un componente de malla de Truss. Y dentro de ese componente de malla de Truss, a través de slots, pasas la geometría de Truss. En este caso, vamos a pasar una geometría de cubo. De acuerdo. Así que va a ser una geometría de cubo de Truss. Y vamos a pasar un material. Para empezar con los materiales antes de verlos. Y el más fácil es el material normal. Y es el que más uso para demostrar cosas. ¿Por qué? Porque da un color diferente a todos los lados de la geometría. Así que es perfecto para mostrar cómo va a verse y demás. De acuerdo. Así que lo que hicimos aquí básicamente es crear una malla. Así que piensa en la geometría de cubo como el <a href="/tags/html">HTML</a>, la estructura del objeto. Y el material es como el <a href="/tags/css">CSS</a>. Son todas las propiedades visuales que añades. El color. El brillo. Si refleja o no. Si es metálico. Etc. De acuerdo. Con esas dos cosas, podemos crear una malla. Lo interesante es que al igual que hicimos con la posición aquí de la cámara. Avísame si pudiste crear el objeto. Si lo tienes en la escena. De acuerdo. Así como básicamente creamos la malla. De acuerdo. Y pasamos los argumentos, podemos modificar los atributos iniciales del cubo. Así que digamos que no queremos crear el cubo. Queremos crear un rectángulo. De acuerdo. Así que si vamos a la geometría en los argumentos. Así que esto también es un array. Y vemos que tiene muchos argumentos diferentes. De acuerdo. El primero es el ancho. El segundo es la altura. Y el tercero es la profundidad. De acuerdo. Así que podemos crear algo como esto. Vamos a hacer uno para el ancho. Y luego dos para la altura. Y tres para la profundidad. De acuerdo. Así que si actualizamos, ahora vemos que tenemos diferentes cubos. Como un cubo más grande. Y funciona porque en X, lo mantenemos en uno. Pero en el eje Y en la altura, lo mantenemos en dos. Y en la profundidad o el eje zeta, lo mantenemos en tres. Así que así es como podemos modificar la geometría en sí. Por defecto, si no pones nada, se resolverá como uno por uno. Ahora, podemos cambiar, por ejemplo, la posición del propio cubo. Así que podemos hacer algo como cero para el eje X, dos para el eje Y de la altura. Y cero para la profundidad. Y esto hará que el cubo se eleve un poco. Así que aquí está nuestro cero cero cero. Logramos subir un poco el cubo. De acuerdo. Así que la malla también tiene diferentes propiedades. De acuerdo. Pero estas son las esenciales

. También puedes rotar, por ejemplo. Digamos que rotemos en oops. Rotemos en Y. Meh. Vale. Intentemos en zeta. Y puedes pasar puedes pasar un ángulo aquí. Así que, si guardo, probablemente sea así. Vale. Tengo un cuarto de vuelta. Así que va a rotar nuestro cubo en el eje Y en el eje zeta por creo que son 45 grados o algo así. No. Menos. No recuerdo. Sí. 45 grados creo. No, es correcto. Son 45 grados. Sí. Vale. Mientras tanto, veamos cómo se ve en las herramientas de desarrollo de vista. Guardar, ir aquí, vista. A veces no aparece, así que solo necesitas refrescar. Tengo un error. Sí. Abrámoslo de nuevo. Vale. Aquí está. Podemos ver la malla. Y cada vez que hagas clic en ella, si estás usando mallas, resaltará la malla que está actualmente seleccionada así. Así que eso es bastante útil. Y de la misma manera que puedes modificarla, la cámara. También puedes hacerlo aquí y jugar poniendo el cubo en un lugar diferente. Déjame ver si la rotación está aquí. Sí. La rotación está aquí. Así que aquí está el valor en el eje zeta. Déjame ver si podemos modificar este. No. La rotación no está. Vale. Bueno saberlo. ¿Lograste entrar en esto? Increíble. Genial. Así que, continuemos. Déjame ver. Vale. Así que, hemos creado nuestro cubo. Increíble. Bueno saberlo. Genial. Así que voy a volver al <a href="/tags/code">code</a>. Y lo mismo, como uno de los problemas de usar 3GS, como jugar con ninja 3GS, es que terminas haciendo todo en un solo archivo. Pero estamos usando <a href="/tags/vue-3">Vue</a>. Y una de las cosas buenas de usar <a href="/tags/vue-3">Vue</a> es que podemos crear componentes. Así que, ¿qué tal si creamos un cubo así? Así que inicializamos un componente de archivo único aquí. Y simplemente llevamos todo lo que hicimos para el cubo a este componente. Así que lo añadimos aquí. Así. Y luego, en la experiencia, podemos importar el cubo de cubo. Así que lo añadimos aquí. Guardamos. Y ¿dónde está el navegador? Aquí. Y ahora, tenemos nuestro cubo aquí. Así que ves que puedes organizar tu <a href="/tags/code">code</a> en subcomponentes. No necesitas tener todos los diferentes elementos <a href="/tags/3d">3D</a> aquí en el mismo componente. Puedes crear subcomponentes y localizar y separar los componentes allí. Hagamos lo mismo para una esfera. Así que vamos a crear otra. Y vamos a ir aquí a los componentes. Así que vamos a decir nuevo archivo. Esfera.Vue. Creemos otra geometría. Así que de la misma manera, vamos a crear un componente de archivo único con la sintaxis de configuración. Y dentro de aquí, hagamos, de nuevo, una malla de Truss. Pero esta vez, en lugar de un cubo, vamos a usar una geometría de esfera. ¿Vale? Para el material, sigamos usando el mismo material normal de Truss. ¿Vale? Dentro de esto. Y eso debería estar bien. Así que necesitamos añadirlo a nuestra experiencia, ¿verdad? Así que hacemos una esfera. Importamos una esfera desde aquí. <a href="/tags/vue-3">Vue</a>. Oh, no. Es un componente completo. Vale. Así que si revisamos nuestro <a href="/tags/code">code</a>, Voy a alejar un poco para que podamos ver mejor las diferentes geometrías. Así que voy a poner algo como 999. Algo así. Tenemos nuestra esfera en el centro de todo

 cosa. Entonces, lo que voy a hacer es en la esfera, voy a pasar a la geometría. A una posición, lo siento, de la malla de Truss. Y esto es importante porque a veces pongo la posición en la geometría y luego no se mueve donde espero. Es porque la posición necesita estar en la malla de Truss y no en la geometría. ¿De acuerdo? Así que, recuerda que si quieres hacer una transformación como posición o rotación, asegúrate de hacerlo en el componente correcto. Entonces, lo que voy a hacer con esto es simplemente traducirlo en el eje X por dos. Voy a mantener el resto, probablemente ponerlo en dos porque pusimos el cubo un poco arriba. ¿De acuerdo? Entonces, hagamos lo mismo para esto. Ahora está un poco a la derecha. Así que eso está bien. Esta parte positiva del eje X es probablemente demasiado grande porque por defecto es un radio de 1. Entonces, de la misma manera que podemos modificar las propiedades de la geometría de la caja, puedes hacerlo con la geometría de la esfera. Así que aquí en los argumentos, podemos pasar un array y ese array tendrá como primer elemento el radio. ¿De acuerdo? Así que pasamos aquí. Vamos a decir 0.5. Entonces, el diámetro es uno. Y luego estos otros son los segmentos de ancho y los segmentos de alto. Voy a explicar eso en un momento. Por ahora, solo pon 32 en 32. Volvamos aquí y actualicemos. Y ahora, puedes ver que la esfera es más pequeña, ¿de acuerdo? En perspectiva, debería tener el mismo tamaño que el cubo en términos de ancho. ¿De acuerdo? Y así es como se ve. ¿Qué significa los segmentos de ancho y los segmentos de alto? Voy a hacer un truco y hay una propiedad aquí en los materiales que se llama wireframe. Lo que esto va a hacer es cambiar la forma en que se muestra el material aquí. Tal vez voy a hacer zoom un poco. Así que déjame ir a la experiencia y decir algo como 555 de nuevo. ¿De acuerdo? Y volvemos a la esfera. Puedes ver que la esfera está hecha de diferentes triángulos. ¿De acuerdo? Entonces, la cantidad de segmentos de ancho y segmentos de alto que pongas aquí va a definir cuántos de esos tiene la geometría. Así que si vuelvo aquí y actualizo, entonces puedes ver que tiene muchos menos triángulos. Así que va a tener como ocho para la altura y para el radial, solo va a tener ocho. Si quito el wireframe y lo muestro aquí, puedes ver que ahora se parece un poco a los gráficos de PS1 o de Nintendo 64. Eran muy bajos en poligonización porque tenían muchos menos vértices y muchas menos caras. Al final, todo lo que estamos creando aquí se va a traducir a triángulos, y esos triángulos se van a renderizar en la escena. En realidad, puedes ver eso en las herramientas de desarrollo. Oh, esta versión no lo tiene. La siguiente, la V4, va a tener otra parte aquí que muestra la cantidad de triángulos, la cantidad de llamadas que se están haciendo para renderizarlo, ¿de acuerdo? Pero si queremos aumentar la resolución de la esfera, siempre puedes aumentar esto. Así que voy a poner como 32, no, demasiado. 32 y 32 aquí, y luego puedes ver que es mucho mejor que antes. No necesitas poner un número muy alto porque no es necesario. Y eso es algo importante para el rendimiento. Cuantas más caras, triángulos y vértices agregues a tu escena, más pesada será, por lo que afectará el rendimiento. Es por eso que, por ejemplo, los juegos móviles utilizan muchos activos de baja poligonización debido a eso, debido al rendimiento. En este momento, básicamente estamos creando una esfera. No va a

afecta el rendimiento, pero cuando tienes escenas grandes, sí importa. ¿De acuerdo? Entonces, veamos en Notion qué más tenemos. Así que, creamos la esfera con esto e importamos, así que vamos a 0.4. Para este, vamos a hacer algo diferente. ¿De acuerdo? Hasta ahora, hemos creado algunos componentes. Permíteme cerrar esto. De acuerdo. Hemos creado un cubo y una esfera, y hemos aplicado las propiedades en su interior. Ahora creemos un cilindro. Entonces, vista del cilindro, inicializamos nuevamente un componente de archivo único. De acuerdo. Y para este, el primer mesh, nuevamente estrés, cilindro. Creo que era cilindro. Así que, hablando del rendimiento, ¿hay alguna guía de buenas prácticas en algún lugar? Tenemos algunas recomendaciones en la documentación directamente. Vamos a llegar a un punto en el masterclass en el que voy a explicar algo importante sobre la reactividad, especialmente cuando se trata de animaciones, que tiene que ver con el rendimiento, pero tenemos una guía en la documentación, especialmente para el rendimiento. Recuérdamelo al final, te enviaré el enlace directamente, pero puedes encontrarlo en los recursos allí en la recomendación. Voy a copiar y pegar esto aquí sin las dos plantillas, tal vez. Sí. También voy a eliminar esto. Entonces, en lugar de lo que hicimos antes, que básicamente agregamos, como, los argumentos aquí y demás, lo que vamos a hacer es, como un componente de vista, vamos a definir las props, ¿de acuerdo? Y lo que vamos a hacer es definir, con la sintaxis, correcta, vamos a pasar un tipo. Y ese tipo va a ser la posición. Entonces, vamos a modificar la posición. Y esto va a ser un array de números, así que puedo hacer, como, array de números. Y los argumentos probablemente también sean un array de números. ¿De acuerdo? Genial. Entonces, vamos a pasar esas props directamente hacia abajo. Así que vamos a hacer args aquí para los argumentos iniciales del cilindro, cilindro, y luego para la posición aquí, simplemente posición. De acuerdo. Así que agreguemos nuestro cilindro a nuestra experiencia con vista. Lo vamos a poner aquí y poner cilindro. No sé por qué mi importación no lo está importando. Debería hacerlo, pero hagámoslo manualmente e importemos desde cilindro. Pero se queja del hecho de que no estoy pasando ninguna propiedad, así que voy a pasar la posición aquí y simplemente la voy a poner de la otra manera. Así que, en lugar de cero a dos, donde tenemos la esfera, esto es X2, pongamos un menos dos en ese. Dos en la altura y cero en la profundidad. Para los argumentos, simplemente copiemos los mismos argumentos aquí. ¿De acuerdo? Porque funcionan, básicamente. Pero voy a explicar qué son. Así que, aquí. Sí. Argumentos. El primero es, como, el radio. En realidad, podremos verlo aquí. Así que, el primero es el radio de la parte superior. También puedes el radio de la parte inferior. La altura y los segmentos radiales. El segmento radial es similar a lo que vimos en la esfera. ¿De acuerdo? Lo que no sé es por qué se queja del tipo, sin embargo. No está preguntando. Ah, de acuerdo. Entonces, si quieres, como, usar <a href="/tags/typescript-libraries">TypeScript</a> correctamente, siempre puedes hacer esto, ¿de acuerdo? E importar los tipos desde tree. Sí, directamente. Y puedes ver que ahora está aceptando el correcto. Para los argumentos aquí, no estoy seguro de cómo hacerlo. Debería ser algo como de solo lectura. Va a ser mucho más complicado que este. ¿De acuerdo? Permíteme ver qué tengo en Notion, sin embargo. En Notion, tengo, posición. Argumentos, como un número, número, número. Debería ser lo mismo, sin embargo. No sé. Ahora funciona porque especifiqué la cantidad de argumentos. De acuerdo. El número de la demo. Genial. Así que, si vamos aquí, tenemos la posición. Así que, la posición, estamos pasando un array. Eso está bien. Y luego, aquí, volvamos a poner la experiencia, cámara perspectiva. Volvamos a poner 999. De acuerdo. Un poco mejor. Ahora tenemos un cilindro en el lado izquierdo. Y podemos modificar los valores aquí. Pongamos uno en el radio de eso. Y está creando como un cono. ¿De acuerdo? Así es como puedes pasar los parámetros desde el componente padre a un componente hijo que está utilizando un componente compuesto de Truss.js. Hasta ahora, todo bien. Ahora será tu turno de crear la geometría de un toro y un nudo de toro. Pero no sé si está yendo bien para ambos. Fernando, ¿lograste ejecutar los ejemplos o solo viste la grabación? También puedes, no sé si puedes ver la grabación. También puedes, estás trabajando con el código. Genial. Iba a decir que algo que puedes hacer es que tenemos un playground que está aquí en Notion. Así que, ve a recursos aquí. Oh, no lo agregué. Qué mal. De acuerdo. Déjame agregarlo. Tenemos un playground. Como, un archivo único

El playground de componente de archivo único es similar a lo que <a href="/tags/vue-3">Vue</a> tiene. Entonces, cuando quieras crear una reproducción realmente pequeña de algo o simplemente quieres jugar, puedes usar este. Así que, lo voy a pasar a Discord. Y te mostraré qué sucede si lo abres. Entonces, Discord, ¿dónde estás aquí? De acuerdo. Entonces, si haces clic en él, se abrirá como este archivo único con un editor aquí. Y también puedes seguir sin instalar nada en tu código. Podríamos hacer, como, aquí, tenemos un cono o si elimino esto y simplemente copio y pego el que tenemos en el masterclass, digamos, tomo, no sé, el UV es demasiado fácil. Este. De acuerdo. Y volvemos a arc. ¿Dónde lo abrí? Aquí. Aquí. Entonces, si lo agregué, ahora puedes ver la esfera. También puedes agregar, como, componentes. Puedes crear una esfera aquí y simplemente copiar y pegar todo. Será exactamente lo mismo. Así que, para que sepas, también puedes usar el archivo único. Genial. Estos son los otros dos. Pero depende de ti hacerlo. Si te quedas atascado o no sabes cómo construirlos, utilizando lo mismo, ve a la documentación. Por ejemplo, el donut, como, el que parece un donut, se llama geometría de torus. No sé por qué se llama así. Si vamos a la documentación aquí, y odio que no se abra como quiero. Espera. Aquí. Esta es una geometría 3ds. Estas son todas las geometrías disponibles. Así que, hay muchas más de las que estoy explicando, ¿de acuerdo? Y será exactamente el mismo enfoque si quieres crear un dron de sial ICOF. Solo necesitas poner el press antes y pasar los argumentos, que son el radio y el detalle, y lo tienes. ¿De acuerdo? Entonces, los dos, como, el nudo de toro, que es este donut aquí, y la geometría de nudo de toro, que es el mismo donut, pero, como, hazlo un nudo, están disponibles aquí. Depende de ti agregarlo a esto. ¿De acuerdo? ¿Cómo estamos? Pasamos una hora. Creo que vamos bien de tiempo. Genial. Entonces está bien. Vamos al siguiente. Vamos a los materiales. ¿De acuerdo? Aquí es donde las cosas comienzan a ponerse más interesantes porque hasta ahora, hemos estado renderizando estas escenas, ¿verdad? Si encuentro mi navegador de nuevo, va a ser complicado. Aquí. Entonces, hemos estado renderizando estas geometrías, y ya está. Pero, hemos estado renderizando con el material normal que se ve igual cada vez, ¿verdad? Entonces, tiene estos tres colores y gradientes diferentes. Lo que vamos a hacer es cambiar los materiales reales. ¿De acuerdo? Entonces, el primero que vamos a usar, voy a usar una Q para ello, es el más básico de todos, que es el material básico. Y el material básico, si lo agregas así, déjame ejecutar esto. Lo tengo aquí, y esto aquí. Y también voy a eliminar las <a href="/tags/devtools">DevTools</a>. No las vamos a usar. Si tienes el material básico, verás que está en blanco por defecto, ¿verdad? Pero tenemos propiedades que podemos usar para cambiar ese color. Y lo bueno es que analizamos los diferentes valores por ti. Entonces, puedes agregar, por ejemplo, teal como un nombre de color <a href="/tags/css">CSS</a>, y funcionará. Como, también puedes agregar hex. Entonces, esto va a ser rojo, verde y azul. Entonces, si lo presiono, va a ser, como, rojo. Y si voy aquí, va a ser verde. Si voy a más, va a ser azul. Valores hexadecimales RGB, también puedes pasar, puedes pasar otros valores o puedes pasar 3GS, nueva variable de color aquí, y hará lo mismo. Pero mantengámoslo con teal por el momento. Genial. Entonces, tenemos un color básico, pero ahora es difícil ver los diferentes lados. Y porque estamos usando un material básico, el material básico, simplemente va a renderizar un color. No sé si tiene opacidad en absoluto. Como, no recuerdo. Aún podemos hacer la cosa del wireframe. Entonces, esa es otra propiedad que tienes en los materiales. Que te permitirá ver cómo está construido. Entonces, no sé si está lo suficientemente cerca. Si no, déjame ir a la aplicación. No, aplicación, no. Experiencia y pon, como, 727. Algo así. De acuerdo. Tal vez mira un poco. Genial. Tenemos el cubo con ese color. Ese es el más básico de todos. Luego, voy a seguir lo mismo. Aquí. De acuerdo. Vamos a usar el material estándar. Y nuestro material que podemos usar, y ese lo vamos a agregar a la esfera, se va a llamar material estándar. Y si lo agregas, verás que está completamente negro, ¿verdad? Entonces, tal vez si agregamos un color aquí, como amarillo, debería pintarse. Y el problema es que la mayoría de los materiales necesitan información sobre la iluminación de la escena. Necesitan luces en el

La escena está completamente negra. ¿De acuerdo? Así que tenemos otro ejercicio para la iluminación. Por ahora, confía en mí, y en la experiencia, justo debajo de aquí, agrega una luz ambiental, así, a la escena. Y ahora podemos ver el color. Porque ahora el sombreador del material ha obtenido la información de la iluminación de la escena para hacerlo. También vamos a agregar, creo que lo agregué aquí, una luz direccional. Entonces, esta aquí que está en la documentación del ejercicio, también vamos a agregarla en el código. Así que, justo debajo de la luz ambiental, agrega una luz direccional con esta posición y esta intensidad. Vamos a hablar de las luces en un momento. ¿De acuerdo? Ahora puedes ver que hay un poco más de sombreado en los alrededores. Y eso es porque la luz va en esta dirección y crea esta sombra en el material. Entonces, el material estándar es menos eficiente que el básico. Entonces, el básico es el más eficiente de todos. Y luego el material estándar comienza a tomar información sobre la iluminación. Entonces, si volvemos a la esfera, por ejemplo, en el material estándar, podemos comenzar a usar nuestras propiedades disponibles. Una de ellas es la rugosidad. Entonces, la rugosidad es qué tan rugoso, digamos qué tan mate es el material. Y no sé si es visible aquí. Probablemente necesito hacer zoom un poco. Así que voy a agregar un control de órbita. No sé si era control de órbita. Esto me permitirá moverme alrededor de la escena. ¿De acuerdo? Así que tenemos un paquete R que se llama cientos. Si eres hispanohablante, será un chiste muy malo. Porque es como 300. Y la razón de este paquete cientos es que tiene cientos de diferentes abstracciones y componentes, materiales para usar en Truss.js sin que los codifiques directamente. Es más un paquete de desarrollo. Entonces, con esto, estamos importando un control de órbita y lo estamos agregando a la escena. Y el control de órbita básicamente me permite moverme alrededor de la escena con el mouse. Así que ahora estoy moviéndome alrededor de la escena con el mouse. Así que puedo mostrarte sin modificar el valor de la cámara. Entonces, aquí tal vez lo notes, pero cuando cambiamos, volvamos a la esfera. Si cambiamos la rugosidad y la volvemos a poner en uno, ese pequeño destello de luz que tiene dentro desaparece. ¿De acuerdo? Entonces, si volvemos y ponemos como 0.1 o incluso menos, como 0.05, puedes notar la luz aquí. ¿De acuerdo? Entonces, la luz está probablemente alrededor de aquí y va en esta dirección. Entonces, la rugosidad afectará qué tan brillante es el objeto. También hay otra propiedad que puedes usar que es la metalicidad. Y normalmente las usas juntas para definir qué tan metálico es. Entonces, si pones uno, puedes ver que es completamente como un objeto metálico. Pero no se ve bien a menos que tengas una variable de entorno. ¿De acuerdo? Entonces, si quieres crear uno metálico, puedes hacerlo así. Pero por ahora, no tenemos ninguna textura en el entorno que lo haga más realista. Lo veremos al final del masterclass, si quieres. ¿De acuerdo? Eso es para el material estándar. Hay más propiedades, pero hay otro material. Y voy a usar la misma esfera. No voy a pasar al cilindro. Así que también está el material físico. Y la diferencia es muy sutil. Si vas aquí y ves esto, es básicamente lo mismo. Ni siquiera puedo cambiar el color aquí. La rugosidad y la metalicidad, pero tiene más propiedades que el material estándar. ¿De acuerdo? Y este es el que se usa más para escenas realistas. Cuando quieres crear escenas realistas, usas este. Es menos eficiente, sin embargo. Tiene más información para los sombreadores. Permíteme verificar qué agregué aquí. Así que aquí en los pasos en la noción, sí, tenemos los diferentes niveles de rugosidad. Y también hablé sobre la fuente. ¿De acuerdo? Antes de hacer eso, permíteme abrir el navegador con la documentación. Este. Así que lo mismo que sucedió con los materiales, puedes encontrar toda la geometría, lo siento. Es un efecto y tu pantalla está pixelada. No estoy agregando ningún efecto en mi pantalla. ¿A qué te refieres con pixelada? ¿Ves la documentación pixelada o la escena? El borde de la esfera parece no ser lo suficientemente suave. Entonces, hay algo llamado anti-alias. Es una propiedad del renderizado <a href="/tags/webgl">WebGL</a>. Entonces, en el renderizado <a href="/tags/webgl">WebGL</a>, como el componente tres canvas aquí, si vas al masterclass, en la aplicación W aquí, en el tres canvas, hay algunas propiedades que puedes pasar al tres canvas para que se vea más realista. Y una de ellas es el anti-alias. Creo que debería ser verdadero de forma predeterminada. Pero no recuerdo. Así que intentaré agregar el anti-alias. Si no mejora, probablemente sea la precisión. Deberías cambiar la precisión. Pero realmente depende. Entonces, el valor predeterminado es falso. Pero creo que lo agregamos en tres aquí que el anti-alias es verdadero. Ahora, que estamos con el tres canvas, sin embargo, por ejemplo, puedes hacer que los materiales sean transparentes. ¿De acuerdo? Entonces, si vamos a la esfera, hay otra propiedad aquí que podemos agregar tanto para el material físico como para el material estándar, que es la opacidad. Y si pongo opacidad 0.2 y vuelvo a mi escena, no sucede nada. Y eso es porque para habilitar el canal alfa, necesitas ir aquí al tres canvas y agregar una propiedad llamada alpha. Y luego, dentro del material, debes establecer transparente. Debes indicarle al material que sea transparente. Y ahora, con esos dos, puedes hacer que el material tenga menos opacidad. Entonces, podemos jugar con la opacidad aquí. Pongamos 0.4 y puedes ver que puedes atravesar el propio material y ver el resto. ¿De acuerdo? No mejoró, Fernando, como la esfera. Porque aquí,

Estoy usando arc y debería ser lo suficientemente bueno. Pero avísame si en Edge, probablemente pueda verificarlo en Edge si no funciona. Entonces, puedes gestionar el lienzo solo para un elemento en lugar de todos. ¿Te refieres a si quiero agregarlo solo para uno? De acuerdo. ¿Si puedo agregar el anti-alias solo a un elemento en lugar de anti-alias a todo? Si es así, estas son propiedades que se basan en el lienzo. Por lo tanto, no están disponibles para cada uno de los componentes de las instancias. Básicamente, lo que estás diciendo aquí es al renderizador que está tomando el lienzo y renderizando todo, las propiedades que deseas agregarle. Entonces, hay algunas de ellas, como el wireframe, por ejemplo, que es una propiedad que puedes agregar a cada uno de los materiales. Porque escribiste tu atributo para el elemento de experiencia completo, quiero decir. De acuerdo. Sí, no, este resto de lienzo al final, si creo otro lienzo aquí, puedes tener varios lienzos. Pero este va a tener un renderizado diferente. Como este renderizado y este renderizado van a estar separados porque tienen estados diferentes. Entonces, por ejemplo, si creas dos páginas, dos partes de tu sitio web, y un resto de lienzo aquí, y otro resto de lienzo aquí, van a ser completamente diferentes. Entonces, puedes pasar ciertos atributos diferentes a uno, a otro. Pero en el mismo, son básicamente propiedades de renderizado web. Genial. Sí, hay muchos más materiales, para ser honesto. Entonces, el anti-aliasing, el canal alfa, los cuatro elementos dentro de la experiencia. Sí. Todo lo que pongas dentro del resto de lienzo va a ser así. En el futuro, si quieres usar 3DS y cosas así de manera más profesional, tenemos otra biblioteca que vamos a lanzar este mes. No este mes. No, por favor, no. No, este mes. No, por favor, no. En el segundo trimestre, lo siento, del año, va a haber post-procesamiento. Entonces, el post-procesamiento te permite agregar capas a ese renderizado y crear efectos. Efectos como, sí, efectos. Como, por ejemplo, puedes pixelar todo. O puedes crear, como, un estilo de cómic. El mismo concepto que los videojuegos. Los videojuegos hacen lo mismo. No lo hacen en el renderizado normal, agregan capas encima de él con efectos y cosas así. Vamos a ir a... Voy a usar la misma esfera, supongo. Sí. Voy a usar la misma para mostrar mi material favorito de todos, que es el material toon. Realmente me gusta mucho los videojuegos. Soy un gran fanático de este sombreado. Eso es, si has jugado a Legend of Zelda, por ejemplo, Breath of the Wild, y algunos animes también, como juegos de anime, tienen este sombreado propio. De acuerdo. Cuando digo sombreado, me refiero al material. Sombreado es el nombre del programa, como, el código real, el código real que crea el material, ¿de acuerdo? Este es genial porque la luz viene de aquí y crea este cambio de sombra drástico. Mientras que cuando estás usando el material estándar, por ejemplo. Ves que es más suave, más natural, más, um... similar a cómo funciona en la realidad, pero el material toon es genial porque tiene esta sombra, como, realmente drástica. Así que este es mi favorito que normalmente uso en todas partes. Sí, hay otros materiales. Permíteme ir a la documentación de aquí. Presiona sí, entonces, materiales. Hay un material de profundidad que es bastante interesante porque dependiendo de qué tan lejos estés de él, cambia. Así que, cambiémoslo aquí como más. No, menos profundidad... material profundo. Oh, era el material de distancia. No sé. Entonces, el material de dibujo de la geometría por profundidad. La profundidad se basa en la cámara. Este es el que tiene la cámara. De acuerdo, genial. Este es el que quiero mostrarte. Entonces, ¿dónde está mi...? Aquí. Así que ahora está oscuro, pero si me acerco mucho... No sé si es visible. Sí. Se vuelve gris. Así que realmente... Un poco complicado con los controles, pero la cosa es que cuanto más cerca estés, más brillante se vuelve. Así que ese es un material que puedes usar para imitar algunos efectos como la profundidad y cosas así. Que es mucho más eficiente que los otros que usan la luz. También hay otro que se llama material de fondo. Este crea superficies brillantes con resaltado especular. Entonces, esto es... Finge la información de la luz sin tener una luz. De acuerdo. Entonces, esto es cuando quieres tener un mejor rendimiento y está indicado aquí. El rendimiento generalmente será mayor cuando uses este material en lugar de un material estándar o un material físico debido a cierta precisión gráfica. Así que en realidad finge cómo la luz se refleja en los materiales. Entonces, puedes ver que esto es mucho más complicado de lo que te estoy mostrando hoy. Hay muchas más cosas que puedes construir con materiales, ¿de acuerdo? También puedes crear tus propios sombreadores y crear efectos geniales como agua o efectos de gas y cosas así con materiales. Es bastante genial. Así que avísame si tienes alguna otra pregunta sobre materiales y luego podemos pasar al próximo tema. De acuerdo. Ahora vamos a hablar de luces. Pero el renderizado siempre es local. ¿A qué te refieres con local? La API de <a href="/tags/webgl">WebGL</a> está en el navegador. Pero no sé a qué te refieres con local. Sí.

Depende del dispositivo. Debido a que es basado en el cliente. Por lo tanto, esto no es algo que puedas hacer en el renderizado del lado del servidor. Esto siempre dependerá del navegador y del dispositivo del usuario. En el fondo, realizamos algunas optimizaciones para que tengas la misma experiencia en diferentes dispositivos. Por ejemplo, animaciones. Voy a explicarlo un poco. Pero la animación es algo que debes tener en cuenta cuando tienes dispositivos que son más potentes que los nuestros. Hay algunas técnicas para utilizar workers, service workers, para mejorar el rendimiento. De hecho, consideramos esto en la implementación del paquete principal para pasar algunos cálculos a los service workers. Pero por ahora, todo está en el navegador. Aún no hemos hecho eso. Tal vez para el paquete de física, vamos a utilizar algo de este código. Genial. De acuerdo. Genial. Entonces, también, Karin, ¿cómo estás? ¿Todo bien? ¿Estás siguiendo? Acabo de ver en el chat. De acuerdo. Mi esfera no brilla. ¿Cómo hiciste eso de nuevo? Perdón por no verlo. Volvamos aquí. Hasta aquí. De acuerdo. Esta es la esfera. Ya lo descubrí. Entonces, no se agregaron las luces o el material. Sí, luz, ¿verdad? De acuerdo. Genial. Perdón por eso. No vi. Voy a intentar. Tengo tantas cosas diferentes allí, como, en la pantalla. Deja que ponga Discord en la parte superior. De acuerdo. Bueno, hablando de luces, el próximo ejercicio trata sobre eso. Así que, probablemente voy a mantener esto como un material estándar. Y vamos a agregarle la rugosidad de nuevo. Solo para tener algo con lo que jugar. Así. Sí. Parece lo suficientemente bien. De acuerdo. Entonces, lo que vamos a hacer es agregar algunas luces. O puedes hacerlo así. Ve a tu experiencia y copia y pega esto directamente. Será más fácil. Así, de esta manera. De acuerdo. Y otra cosa que vamos a hacer es, si vas a la vista de actualización, cambia el color aquí y pon 0000000. Así que será negro. De acuerdo. Y tal vez incluso podamos quitar el suelo. Así es más como se vería una habitación completamente cerrada sin fuentes de luz. No hay fuentes de luz. Así es como se verá. Estará completamente oscuro. Entonces, hay un concepto con las luces en <a href="/tags/3d">3D</a> y en fotografía y en la mayoría del arte, que es pintar con luz. ¿Qué quiero decir con eso? Vamos a comenzar a ver cómo la luz afecta la escena agregando diferentes tipos de luz. ¿De acuerdo? Así que volvamos a la luz ambiental de Tress que usamos antes y veamos qué es en realidad. Cuando agregué la luz ambiental, verás que hay una iluminación uniforme en la escena. No hay lugares en la escena. Permíteme agregar el Tress allí. ¿Por qué no pertenece al lienzo? Sí pertenece. Como, lo estamos agregando dentro del lienzo. Tenemos la experiencia aquí. En realidad, eliminé el script. No sé por qué. Dame un segundo. Configuración de TS. Entonces, ¿por qué está en nuestro paquete, tal vez? Esa es la pregunta. Porque, como todo lo que usas de Sientos u otro paquete, y lo agregas aquí, en realidad está dentro del lienzo de Tress. Tenemos este componente aquí que es la experiencia y está dentro del, si lo pongo fuera aquí, se romperá. No funcionará y afectará toda la pantalla. De acuerdo. Genial. Es mejor que, no quiero ponerlo en la parte inferior, pero es mejor que esté justo debajo de la cámara de perspectiva, porque utiliza la cámara. Entonces, si la cámara ya está montada, los controles de órbita funcionarán. A veces, si lo pones encima de la cámara de perspectiva, puede causar problemas. Era más en la primera versión de Tress. Ahora, hacemos algo de magia allí, así que no tienes que preocuparte por eso. Pero antes, era así. Volviendo al tema de la luz, aquí vemos que es uniforme en todas partes. Incluso si estamos usando ese material de dos caras, que se supone que tiene sombras y demás, no vemos nada. Y es porque la luz ambiental es omnidireccional, va a todas partes. De acuerdo. Agrega una luz que cubrirá todo. No habrá sombras en ningún lugar, ¿de acuerdo? La siguiente que vamos a agregar es la luz direccional de Tress. Es la misma que hicimos antes. De acuerdo. Así que la voy a agregar justo debajo de la luz ambiental.

Y voy a eliminar las props. Solo agreguemos la DirectionalLight. Entonces, DirectionalLight, como su nombre indica, va en una dirección. De acuerdo. Entonces, comienza en una posición y luego va en la dirección. Aquí, podemos ver que la dirección predeterminada es básicamente como tener una luz de techo, que está descendiendo sobre el objeto. De acuerdo. De la misma manera que hicimos con otros objetos, como la cámara y demás, podemos mover la posición de la misma. Entonces, si queremos ir al eje x, por ejemplo, 2, y queremos moverlo a 2, por ejemplo, y mantengamos 0, 0, 0, ahora puedes ver que este es el eje, y este es el eje x, el rojo, ¿verdad? Entonces, ahora viene de esta dirección aquí. Mientras que si pongo menos 2, por ejemplo, ahora viene en esta dirección aquí, en la otra parte del eje x. Pero esto es realmente difícil de ver, en realidad, porque ¿dónde está la luz? Como, no hay un indicador visual de dónde está la luz. Entonces, tienes varias opciones. Puedes comenzar a jugar con esto y simplemente mirar dónde están las sombras, pero creamos, y esto viene de la comunidad actual, hay un miembro del equipo principal que agregó esto, que está utilizando directivas, ¿de acuerdo? Entonces, podemos importar desde Trust Core, podemos usar Light Helper, ¿de acuerdo?, y para usarlo, necesitamos ir a la luz y decir vLight Helper, así. Y ahora, lo que vamos a tener es un indicador visual de dónde está la luz. Y eso es bastante genial, porque a veces cuando estás creando una escena y quieres realmente crear, como, saber dónde poner las luces, para que los efectos sean los que deseas lograr,

normalmente usas este tipo de herramientas para visualizarlo. Todavía podemos usar el Como, el <a href="/tags/devtools">DevTools</a> de <a href="/tags/vue-3">Vue</a>, y te mostraré algunas luces básicas, ¿de acuerdo? Entonces, voy a crear otra luz direccional, y el problema es que ahora está en el mismo lugar. Entonces, voy a ponerlo justo en la otra parte, ¿vale? Pero verás que está mirando hacia otro lugar. Si actualizas, a veces con reemplazo de modelo en caliente, no obtiene la fecha. Esa es la limitación que tenemos ahora mismo. Pero si actualizas la escena, lo verás. Aquí podemos ver las dos luces, ¿verdad? Entonces, veamos qué más podemos cambiar de las luces. Así que voy a tomar la derecha y voy a cambiar el color. Voy a usar otro color, y probablemente voy a colorear la no gris. Lo voy a poner blanco, ¿vale? Y voy a usar color aquí y decir rojo, por ejemplo. ¿Vale? Ahora puedes ver que aunque sea blanco, la luz está creando este color rojizo en la malla misma, en el material. Y eso es porque esta luz es roja. También podemos jugar con la intensidad. Entonces, la intensidad, normalmente va de cero a uno, pero aquí puedes poner dos y será muy, muy brillante. Y también puedes ver que el elemento visual que te indica hacia dónde va la luz es el color de la luz que colocas aquí. Otra forma de lograr lo mismo es pasando argumentos. Porque al igual que la cámara de perspectiva, todo, la luz direccional tiene algunos argumentos. Entonces, puedes pasar el color directamente aquí. Así que podemos hacer algo como cian. Y luego pasar la intensidad aquí. ¿Vale? Tal vez no acepte el cian. Así que voy a hacer lo siguiente. Voy a cambiar esto por cian. Y este va a ser rojo. Así que será este. ¿Vale? Ahora tengo esta luz aquí, que es cian, y esta es roja. ¿Vale? De la misma manera que cambias las propiedades aquí, puedes inicializarlo usando argumentos. Si quieres poner uno de ellos más brillante que el otro, siempre puedes cambiar la intensidad. Así que ahora el rojo tiene menos intensidad y por eso prevalece el color cian. ¿Puedes mostrar la vista añadida cómo lo haces negro? Claro. En la vista añadida, en el color claro, si pasas 000 o pasas básicamente negro, se volverá negro. Avísame si logras ponerlo negro. Sí, genial. ¿Vale? Entonces, volviendo a la experiencia. Ahora que tenemos las dos luces aquí, y así que pongamos una aquí en intensidad. Esta es una luz típica que verás como en los cines y cosas así, que es la iluminación roja y azul. También puedes crear una iluminación de tres puntos y ponerla, porque esto es el relleno. Esto no. Esta es la luz clave, la luz de relleno, y la luz de borde que va a venir antes para crear contraste. Pero ahora es difícil de ver porque todo está completamente negro, ¿verdad? Entonces, voy a añadir otro componente a la experiencia y vamos a añadir un plano. ¿Vale? Entonces, la forma en que añadimos el plano es ir a mesh y hay uno, va a ser plane geometry y no recuerdo los argumentos. Vamos a ver eso más tarde. Y truss mesh normal. Tal vez normal material está bien. Sí, normal material. Genial. ¿Vale? Así que vemos un plano muy pequeño en el centro de la escena, lo cual está bien. Así que vamos a revisar los argumentos del plano para ver con qué podemos jugar. Así que los argumentos y tenemos el ancho, la altura. Así que pongamos algo como 20 en 20. ¿Vale? Ahora es más grande, pero vemos que no parece un piso, ¿verdad? Y eso es porque necesitamos rotarlo. Así que vamos aquí, rotar en X menos math pi entre dos. ¿Por qué pongo el menos dos? Por razones de rendimiento, cada malla solo se renderiza en un lado. Entonces, si miras hacia abajo en el plano, verás que desapareció. Como si moviera los controles de órbita y bajara debajo del piso, ya no se renderiza. Y eso es porque hay otra cosa que puedes pasar aquí. Creo que es side. Sí, side. Y puedes agregar aquí double side from tree es una constante. Y si lo haces, y si lo haces, ahora puedes ver ambos lados de la malla. Pero normalmente por razones de rendimiento, así que puedes poner otra malla como una pared. Sí, podría hacerlo. Claro. Solo creo otra malla. Y en lugar de rotar eso, lo vamos a poner así. ¿Vale? Pero necesitamos posicionarlo. Entonces, probablemente necesitemos posicionarlo, digamos en uno de los ejes. Así que va a ser 20 aquí, cero, cero, tal vez. Vamos a actualizar. Ahora, ves, puse la posición en la geometría del plano en lugar de la...

Entonces, ahora, no, no es el eje x. Cero. Esto probablemente será el eje z, tal vez. Veamos. Oh, se volvió tan... ¿Menos? Menos 10. Eso tiene más sentido. Sí, casi. ¿Te refieres a los lados? ¿No? Sí. Porque lo mejor que puedes hacer en términos de <a href="/tags/performance">performance</a> cuando estás creando una escena es que todo lo que es visible para la cámara se renderice. Entonces, no tiene sentido que esté renderizando debajo de este si la cámara no está allí. Estamos usando Orbit Controls, por eso podemos mover la cámara ahora. Pero normalmente, no quieres renderizar nada que no sea visible para la cámara en sí misma. Si entras aquí dentro, verás que desde adentro, la esfera, como las caras que están dentro de la esfera, tampoco se renderizan. Si salgo de ella, las externas se renderizan. Me equivoqué con los materiales, así que usemos el material Tune. Este es más genial. Sí, este. Probablemente hayas notado algo donde... Voy a usar el mismo. Material Tune. Probablemente hayas notado algo donde y que normalmente cuando agregas sombras a algo, proyecta... Cuando agregas luces a algo, proyecta sombras en los diferentes elementos. ¿Verdad? Entonces, aquí tenemos estas dos luces, y también puedes... Aquí, pongamos abajo... De la misma manera que hicimos con la cámara, puedes decir mirar. Solo voy a poner una de ellas. También puedes dirigir hacia dónde mira la luz direccional. Entonces, puedes hacer mirar

Por ejemplo, 0.2.0. Si actualizo, no, era target. Creo que era target. Probablemente sea target. No recuerdo. Target es un número. No, target es un objeto. Bueno. Había una forma de cambiar la dirección, pero no recuerdo ahora mismo. O la referencia no está funcionando necesariamente. Permíteme cambiar la dirección. Oh, hombre, no recuerdo dónde está. Permíteme revisar algo. Entonces, aquí en la documentación de 3DS <a href="/tags/documentation">documentation</a>, puedes ver las diferentes luces. No hay tantas. Hay luz direccional, hemisferio, punto de luz, y demás. Luz direccional aquí. Emitir sombra. Sí. Target, objeto 3. Bien. En realidad podemos hacerlo. No es lo mismo que el look at, porque el look at ya crea un componente. Pero esto me permitirá probablemente mostrar algo sobre cómo obtener las instancias. Pero iba a hacer eso con <a href="/tags/animations">animation</a>. Así que, por ahora, olvidemos el look at. Y cuando tengamos las <a href="/tags/animations">animations</a> y la referencia, podemos avanzar. Bien. Permíteme revisar rápidamente el tiempo. Bien. Tal vez estoy gastando demasiado tiempo en algunos lugares. Así que, voy a ir un poco más rápido. Entonces, para este aquí, estábamos hablando de las sombras, ¿verdad? Entonces, el problema con las sombras es que en este momento no las estamos viendo proyectadas en ningún lugar. Así que, lo que podemos hacer es habilitarlas. Si vamos a la vista add, y vamos aquí, podemos agregar otra propiedad llamada shadows. Y lo que hará es habilitar el renderizado para poder proyectar y recibir sombras. Pero cuando lo agregas, no pasa nada en la escena, ¿verdad? Entonces, ¿dónde están mis sombras? Por razones de <a href="/tags/performance">performance</a>, debes indicar explícitamente todas las partes de la escena que utilizarán sombras. Las luces y las sombras son probablemente las operaciones más pesadas en términos de rendimiento en el renderizado. Así que, si quiero que la luz, esta, la cian, proyecte una sombra, tengo que ir a la luz. Y justo debajo de aquí, por ejemplo, podemos decir cast shadow. ¿De acuerdo? Si guardamos, todavía no vemos nada, y eso es porque necesitamos decirle al objeto en sí que proyecte la sombra. Así que, vamos a nuestro Tress mesh, y aquí también agregamos cast shadow. Todavía no vemos ninguna sombra. Estamos cerca. Vamos a tomar la que está en el suelo. Voy a eliminar la otra por simplicidad. Y para este plano, voy a agregar receive shadow. Y lo que hará es indicar que este plano aquí está preparado para recibir sombras. Entonces, este está proyectando la sombra con esta luz. Y con esto, puedes proyectar la sombra en los diferentes elementos. Si tengo otro objeto aquí entre la luz y la esfera, también tendría que decirle a ese componente que proyecte una sombra. Si te acercas a la sombra, puedes ver que está muy pixelada. ¿De acuerdo? Y eso es porque el mapa de sombras, como el del pliegue, tiene una resolución muy baja, digamos. Así que, hay un truco que puedes hacer para modificar el tamaño de ese mapa. Si vamos a curve view, entonces, si obtenemos la línea de dirección aquí y pasamos estas propiedades que son shadow y map size. Esta es la resolución del mapa y la estoy estableciendo en 1K, pero puedes usar 4K, por ejemplo. Esto afectará mucho el <a href="/tags/performance">performance</a>. Y también, jugar con la cámara, cerca de la cámara, lejos, cómo funciona la cámara, mejorará el renderizado de la ¿qué pasó? Oh, aquí. Mejorará. No ves la sombra. La sombra no depende del material, no. Si ves, en realidad agregamos el receive shadow al mesh. Entonces, esta sombra que es interna al objeto, está afectada por la luz, por el material, pero la que está aquí no es como la proyectada. De acuerdo. El <a href="/tags/code">code</a> está ahí. Receive shadow en el plano, cast shadow en la luz direccional y cast shadow en el primer mesh. Entonces, probablemente falte en la vista app, ¿agregaste shadows al truss canvas? Necesito ponerlo así. Todavía no puedes verlo. De acuerdo. Y no lo ves incluso si traduces el objeto. De acuerdo, tienes el plano. El problema es la posición de la esfera. Cambia la posición de la esfera y ponla justo en el centro. Pon cero para ponerla en el centro de la escena. Porque la cámara de perspectiva está mirando al centro de la escena y probablemente la esfera está fuera de donde va la luz. Como la mía está en el centro de la escena. Esta esfera está en cero punto cero. Por eso está en el centro. Si, por ejemplo, la pongo fuera de ese rango aún más, como pongamos diez, ves que no proyecta ninguna sombra porque no está en el camino de la luz. Como cualquier objeto en la realidad. Si pongo cuatro, entonces eso está cerca de la luz. Si pongo siete, va a estar fuera. Así que, ya no se renderiza. Avísame si eso funcionó para ti. Si no, podemos continuar después. Puedes enviármelo por Discord. De acuerdo. Y hay otra luz

que está aquí. Está la luz puntual. No sé si yo. Sí, el foco y la luz puntual. Si agregas una luz puntual y la agregas en esta posición, todas las luces tienen las mismas propiedades. Esta tiene el color, la intensidad y la distancia también. Aquí puedes ver como un pequeño punto de una luz puntual. Básicamente es como un punto que pondrías en tu esfera que está brillante. Esto es perfecto cuando estás creando lámparas o algo que brille en la escena. Puedes agregar esto y hacer reflejos y cosas así. Hay otra aquí en Notion. Entonces, la otra es el foco. Y el foco, si lo copias y pegas, voy a, debido al tiempo, simplemente lo agregaré aquí. Este es como un gran foco. Y no veo el color, sin embargo. Pero puedes ver que la luz auxiliar se muestra aquí donde va el foco. Y viene de esta dirección. Pero hay tanta luz en la escena que probablemente sea difícil de ver. Así que voy a eliminar las otras luces, las direccionales. Bien. Y ahora, probablemente puedas ver la penumbra de la luz. Entonces, este foco es exactamente el mismo tipo que tienes en los estudios, que es como un cono de luz que entra en la escena. Así que tiene diferentes propiedades para inicializar, como la distancia, el ángulo, la penumbra, y el decaimiento. Es más complejo y le pasas ángulos. Así que puedes verificar eso en la <a href="/tags/documentation">documentation</a> de 3DS, más o menos, cómo funciona. Bien. Así que, continuemos con el siguiente. Así que, hagamos este porque los otros son muy cortos. Entonces, el bucle de renderizado es cómo vamos a animar cosas. Y esto es importante porque por ahora, nuestra escena está bastante inactiva. Correcto. Tenemos esto aquí. Voy a colocar la malla nuevamente en el centro, como esta esfera. Bien. Entonces, esto es bastante, como que no hace nada. Estoy moviendo la cámara, sí, pero no hay luz, no hay nada aquí. Correcto. Así que voy a cambiar esto por un cubo. Caja. Lo siento, geometría de caja. Y eliminaré los arcos. Ya no necesito los arcos. Bien. Ahora tenemos un cubo aquí. Y lo voy a colocar aquí. Bien. Genial. Y probablemente cambiar uno de los píxeles. Sí. Podemos tenerlo así. Genial. Entonces, lo que vamos a hacer es animar esto. Y aquí es donde entra en juego el <a href="/tags/performance">performance</a> y la reactividad. Bien. Entonces, la forma en que podemos obtener la referencia es porque lo que vamos a usar para animar es el reloj interno de Tress. Bien. Entonces, hay un composable que puedes importar desde el núcleo de Tress que se llama use render loop. Bien. Si lo usas y lo deconstruyes, tendrá un método llamado on loop. Y en este on loop, puedes pasar una devolución de llamada que se ejecutará o se activará en cada fotograma por segundo. Entonces, la forma en que funciona normalmente la animación y los juegos es que tienes muchos renderizados a lo largo del tiempo. Y si cambias los valores de una posición, por ejemplo, entre esos fotogramas, parecerá que hay un movimiento. Así que, cuando escuchas sobre 23 fotogramas por segundo, 60 fotogramas por segundo es la cantidad de fotogramas que ves en un segundo para ver un movimiento. Así que vamos a usar ese reloj interno para animar nuestro cubo. Pero primero, necesitamos obtener el cubo. Entonces, podría ser tentador decir aquí que simplemente creo una variable reactiva para la posición. Y luego pasarla aquí. Y luego simplemente animar ese valor aquí. ¿Verdad? Funcionaría. Pero el problema es que la reactividad se basa en proxies. Y los proxies no son realmente eficientes cuando se realizan operaciones repetidas en objetos reales, mientras que los objetos simples de <a href="/tags/javascript">JavaScript</a> son realmente eficientes. Entonces, en lugar de pasar una variable reactiva, vamos a usar una referencia de plantilla de view. Entonces, vamos a obtener la referencia de esa instancia exacta del cubo. Voy a crear la referencia del cubo y voy a importar ref de view. Y voy a pasar a mi malla la referencia. Ahora, veamos qué sucede si hago watch. O en realidad, no. Hagamos lo siguiente. En el on loop, si la referencia del cubo tiene un valor, entonces <a href="/tags/cli">console</a> log la referencia del cubo. ¿De acuerdo? Así que voy a abrir la inspección. Y puedes ver que en realidad lo rompo. Y esto es porque esto se llama tan rápido que puede romper tu navegador. ¿De acuerdo? Porque el on loop va a ir por ejemplo, esto es 120 fotogramas por segundo. Así que se va a ejecutar tan rápido. Así que normalmente no pongas ningún <a href="/tags/cli">console</a> log dentro de él porque simplemente lo romperá. ¿De acuerdo? También tengo otro error. Veamos el error. <a href="/tags/cli">Console</a> log y las promesas pueden construir tu posición

Olvidé volver a ponerlo. De acuerdo. Lo tenemos de vuelta. ¿De acuerdo? Así que eso no estaba rompiendo esto. Pero lo haré muy rápido para que no llene la memoria. Ahora puedes ver que ahora puedes ver que está creando muchos registros de <a href="/tags/cli">console</a>. De acuerdo? Así que simplemente lo detendré aquí en el if si puedo. No veo. Abramos uno de ellos antes de que se bloquee. Vamos a eliminarlo aquí. Se preserva. Oh, no los preserva. Vaya. Podemos usar un watch para eso. Así que voy a observar la fuente que va a ser la referencia de la caja. Así que probablemente será box ref.value. Puedes ver que puedes usar la vista normal API de composición que normalmente usas. Así que tenemos esto y luego esto va a devolver el valor de la referencia de la caja. Así que va a ser el valor aquí y simplemente <a href="/tags/cli">console</a> log esto. Así que aquí tenemos la referencia para la malla. Y este es exactamente el objeto que vas a obtener que se renderiza aquí. Puedes ver que es una geometría de caja. Tal vez déjame ponerlo un poco más grande. Geometría de caja aquí. Y esto no es rotación <a href="/tags/scalability">scale</a>. ¿Dónde está? La geometría. El material. Así que es exactamente esta caja aquí. Estamos obteniendo la referencia para ese objeto y esto está dentro de un proxy. Pero cuando lo deconstruimos aquí y decimos box ref value y luego decimos posición, esto va a ser un objeto. Como un objeto simple. Así que podemos modificarlo. Y podemos decir algo como posición x. ¿De acuerdo? O posición vamos a cambiar nuestra rotación. Ya hicimos la posición. Así que cambiemos la rotación. Voy a usar más igual y solo pongo un número pequeño porque si no, va a ser muy rápido y no vamos a ver nada. De acuerdo. Tenemos un error. Así que devuelve falsos. Oh, porque tuve que especificar el de acuerdo. Aquí. Lo siento. Olvidé especificar qué eje es. Así que es box ref.value, la rotación y qué eje quiero rotar. Así que ahora podemos ver que se está moviendo. Sí. Se está moviendo en el eje x. Así que este es el rojo. Está girando en ese eje. También podemos hacer como box ref value aquí. Rotación. Y poner zeta, por ejemplo. Más igual. Y hagámoslo el doble de rápido. De acuerdo. Así que ahora se anima de manera diferente. Pero el problema es que y esto vuelve a lo que Fernando estaba preguntando al principio. Como qué sucede cuando tienes un dispositivo que tiene mejor <a href="/tags/performance">performance</a> que otro? Como la velocidad de fotogramas va a ser diferente. Así que si ejecutas esto en otro dispositivo que no es de 120 fotogramas por segundo, va a ser más rápido o más lento. Entonces, para lograr la estandarización en términos de cómo se anima, el on loop devuelve dos valores que son buenos para eso. El delta y el lapse. Entonces, el delta, puedes sustituir este por el delta. Y el delta es básicamente el tiempo que ha pasado entre un fotograma y el otro uno. Y ahora puedes ver que se ve prácticamente igual. Porque la velocidad es similar. Pero este es un número muy pequeño. Como 0.00. Porque este es el tiempo entre los fotogramas. También puedes usar el lapse set y en lugar de usar más, el lapse set es básicamente la acumulación de todos los deltas. Esta es la acumulación de tiempo. Y también puedes usarlo para animación. Incluso puedes hacer matemáticas aquí y modificar el valor de la posición, por ejemplo, en el eje establecido, y usar mad sine, que es una onda sinusoidal, y simplemente pasar el lapse set aquí. Y con eso, estamos creando como un péndulo. Bueno, no es un péndulo. Estamos oscilando la posición de la propia caja. Probablemente era el eje Y, ¿tal vez? Vamos a comprobarlo. Sí, el eje Y lo hará, bajar y subir. Incluso cruzar el suelo. De acuerdo. Así que básicamente así es como animas cosas en <a href="/tags/tresjs">Tres.js</a> y cómo modificas o transformas un elemento usando una referencia de plantilla. ¿Preguntas sobre esta parte? Esta es un poco más avanzada. No estoy familiarizado con el comportamiento de on loop. ¿Funciona en milisegundos? En fotogramas por segundo. ¿Puedes acelerar o retardar según los deltas? De acuerdo. Entonces, la forma de acelerar es simplemente multiplicándolo por un valor. Esto va a ser la velocidad.

Ahora es el doble. Así que pongamos 20 para que sea más visible. Ahora puedes ver que la rotación en X es mucho más rápida. Porque simplemente la multiplico por el elemento. Este valor aquí va a ser muy pequeño. Incluso también podemos mostrarlo en el registro. De acuerdo. Sí. Así que puedes ver que el delta, por ejemplo, es muy pequeño. Es como 0.07. Y el lapso de tiempo es el lapso de tiempo desde el inicio. Entonces, cuando digo en el bucle, lo que hace básicamente es que al inicio cuando el Tres canvas está montado, va a iniciar el reloj. ¿De acuerdo? Y te va a devolver en este composable. De acuerdo? Te va a devolver el tiempo entre los fotogramas. Así que qué tan rápido está renderizando tu dispositivo. Y el tiempo desde el primer renderizado. Y con eso, simplemente puedes hacer una devolución de llamada. Entonces, cualquier función que pongas dentro del bucle se va a activar 60 veces por segundo o 120 veces por segundo dependiendo de tu dispositivo. No sé si está claro. Es realmente como <a href="/tags/animations">animation</a>. Como creas <a href="/tags/animations">animation</a>. Tomas varias capturas y luego mueves algo en el medio. Así que tu ojo piensa que las imágenes se están moviendo. Y si lo pones tan rápido, tus ojos no van a ver que es una imagen. Va a ser como un <a href="/tags/video">video</a>.También podemos hacerlo al revés. Así que puedes aumentar la rotación X sin limitar cada vez más. Esa es la cosa. Por ejemplo, aquí, que estamos usando el delta, ¿verdad? No tiene aceleración, si eso es lo que quieres decir. Ahora mismo, voy a quitar el signo matemático. Así que solo tenemos la rotación X Ahora mismo, la rotación siempre es estable. De acuerdo? Siempre es la misma velocidad. Porque de acuerdo? Siempre es la misma velocidad. Porque estamos usando un más igual delta. Si estuviéramos usando un más igual elapsed, ese cambio sería mucho más rápido cada vez. Porque es el valor acumulado. Estás acumulando un elapsed. Así que básicamente estás creando aceleración. No sé si tiene sentido o no. Sí, no te preocupes. Como eso es lo que tiene que ver con <a href="/tags/3d">3D</a>. Lleva tiempo comprender las matemáticas detrás. La importancia de esto es lo que quería lograr con Tracie, básicamente hacer que sea fácil para las personas ingresar a <a href="/tags/3d">3D</a> sin tener que saber todo este material matemático de <a href="/tags/3d">3D</a>. Porque puede ser intimidante al principio comenzar con <a href="/tags/3d">3D</a>. Creo que va a haber mucho matemáticas. Sí, va a haber matemáticas. Pero con <a href="/tags/vue-3">Vue</a>, en realidad puedes aprovechar la cantidad de trabajo que necesitas hacer para crear algo. Es un bucle infinito. ¿Cómo detenerlo? No deberías detenerlo a menos que lo desmontes. Porque de lo contrario, tu escena se va a congelar. Mientras esta vista esté mirando este lienzo y no desmontes el componente, el Trace Canvas va a detener automáticamente el bucle por ti cuando desmontes el componente. No tienes que preocuparte por eso. Pero mientras quieras ver tu escena y poder navegar por ella, el bucle necesita estar ahí. Porque cada vez que el bucle avanza, se renderiza la escena. De lo contrario, solo tendrás un fotograma. Como una imagen. Permíteme verificar. Así que estamos bastante cerca del final, pero realmente quería mostrar los otros. Así que lo que voy a hacer aquí en la escena, déjame abrir la <a href="/tags/cli">terminal</a>. Y en lugar de construirlo, simplemente lo voy a mostrar. ¿De acuerdo? Así que hay un ejercicio aquí que son los modelos. De acuerdo? Así que dentro de ese, vamos a renderizarlo. Si lo ejecutas, vas a tener esta escena. Y en realidad voy a agregar un control de órbita para moverse alrededor de la escena. Así que aquí está la experiencia. Sí. Así que vamos a agregar otro import. Importar, pa-pa-pa-pa-pa-pa orbit controls de Trace Santos. Lo voy a agregar aquí. Controles de órbita. Así que si podemos movernos alrededor. Genial. De acuerdo. Así que tengo este modelo aquí porque, básicamente, cuando estás creando una escena, normalmente no vas a trabajar solo con geometrías y materiales. En realidad, quieres importar mallas que se crean con software <a href="/tags/3d">3D</a>. Como Blender, Cinema 4D y otros. Así que aquí tengo uno que creé yo mismo. Que es de un antiguo juego de <a href="/tags/video">video</a> de PS1 llamado Crash Bandicoot. Y la forma de agregarlo es bastante genial porque déjame cerrar todo lo demás. De acuerdo. Así que lo tengo dentro de mi modelo.view. Y básicamente aquí vamos a importar un composable que está disponible en Santos llamado UseGLTF. UseGLTF es un composable que te permite cargar modelos que son GLTF. Hay diferentes formatos de archivo. Hay BF, BFX. Hay STL para impresión <a href="/tags/3d">3D</a>. Así que en este caso, vamos a usar el UseGLTF. Y todo lo que necesitas hacer es pasar la URL donde se encuentra tu modelo. Así que si estás usando VIT, por ejemplo, normalmente tendrás tus cosas como un <a href="/tags/svg">SVG</a>. Quiero decir, es un formato de archivo.

Pero no es <a href="/tags/svg">SVG</a> porque <a href="/tags/svg">SVG</a> es un formato vectorial. Es como gráficos vectoriales. Este es uno <a href="/tags/3d">3D</a>. Entonces, va a ser GLTF porque GLTF es el de código abierto, creo. Es utilizado por la mayoría de los programas de código abierto. Así que básicamente es un formato de archivo. Normalmente puedes usar este o BFX. Y en los viejos tiempos, había OBG, pero no funciona tan bien. E incluso puedes usarlo desde tu Ruta Relativa. Así que aquí tengo en el directorio público, tengo un modelo aquí y puedes importar este modelo directamente en la escena. También tengo esta URL aquí porque Trusty S tiene un repositorio solo para assets si quieres usarlo. Pero puedes encontrar otros, déjame ver aquí. Sí. Puedes encontrar varios modelos gratuitos en línea que puedes descargar y usar para tu escena. Entonces, en la documentación he puesto algunos lugares, pero te lo voy a mostrar aquí. Si vas a PolyPizza, PolyPizza tiene muchos modelos diferentes que son gratuitos para usar. Ten en cuenta que la mayoría de estos assets tienen licencias. Así que asegúrate de buscar los que tienen licencias gratuitas, como las licencias CC0. También está Polymandress, que son los creadores de básicamente Trusty S pero en <a href="/tags/react-components">React</a>, el mismo. Aquí está el mercado, Polymandress market models. Y hay muchos aquí. También tengo, tengo una escena en la que estoy usando el portátil. Aquí puedes ver el CC0. Este es un portátil que podrás descargar e importar en tu escena. Así que cuando descargues el modelo aquí, puedes ver que es un GLTF1. Incluso podemos ir a las descargas. Sí, lo tengo aquí. Así que lo voy a añadir a la escena rápidamente. Y vamos a añadirlo a los modelos. Vale. Voy a encontrar una carpeta. No, no encontrar una carpeta. No. Lo siento. Esto es una cosa de Mac. Así que lo voy a añadir a este lugar, aquí. Ahora tengo el modelo GLTF. Puedo reemplazar este con models. Con la raíz, models, model GLTF. Y voy a usar la escena. Así que este composable devuelve una escena, ¿vale? Y diferentes propiedades. Pero, ¿se usan solo para Traceos? No, puedes usarlo para Godot, puedes usarlo para, como, Traceos te permite usarlos, pero normalmente los usas en lugares brasileños, como los de juegos <a href="/tags/3d">3D</a>. No he, oh, sí. Este está comprimido, así que necesitamos pasar Drago. Esta es solo una opción del composable que te permite usar archivos comprimidos, porque a veces pueden ser muy grandes. Y, sí, así, tenemos aquí el portátil. Por supuesto, el portátil se ve muy apagado porque no tenemos muchas luces en la escena y demás. Pero así es como puedes importarlo. Cómo funciona en R Hood, en la experiencia, necesitarás usar suspense, porque estás utilizando una operación asincrónica en esa vista aquí para importar el modelo. Y para poder trabajar en <a href="/tags/vue-3">Vue</a>, necesitas envolverlo con suspense. Y otra cosa que probablemente notes aquí, hay un componente especial

llamado primitivo. Lo que es un primitivo, es básicamente una forma de crear instancias de forma programática. Por ejemplo, puedes crear una malla aquí. Digamos una nueva malla con 3DS, ¿de acuerdo? Y luego simplemente pasa el material y el otro y pásalo directamente al gráfico de renderizado. Así, no necesitas crear un componente para usarlo o usar una malla de Tres. Podrías crearlo así y decir nueva geometría de caja. Y luego con nuevo material de malla normal, así, necesitamos importarlos todos de 3DS, así que están importados, sí. Y si pasamos la malla y vamos al navegador, podemos ver que tenemos nuestro cubo. ¿De acuerdo? Así que esta es la forma programática de crear instancias aquí. ¿Por qué es tan poderoso? Porque no tenemos forma de convertir esto en componentes de vista para usar el modelo de Tres, por ejemplo, algo así. Así que lo pasas directamente. También puedes verificar cosas como los nodos y los materiales. Así que si hago <a href="/tags/cli">console</a> log aquí, sí. Y pongo nodos y materiales y vamos al navegador y revisamos el <a href="/tags/cli">console</a> log. Vemos todos los nodos que crean esta instancia. Así que todos los nodos son todas las mallas que el autor de este recurso creó para esto. Así que puedes ver la palabra clave, por ejemplo, es un grupo aquí con varios hijos. Así que tiene una malla. Así que esto es mucho más complejo que hacer una caja o hacer una esfera. Pero esto ya está hecho en el software, como Blender, etc., y solo necesitas importarlo y renderizarlo aquí. Lo mismo para los materiales aquí. Tendrás todos los diferentes materiales y puedes ver que son los mismos que mencionamos. El material estándar. Bueno, básicamente, todos son materiales estándar. De acuerdo, así que el logotipo de Apple, por ejemplo, en la parte posterior. Este es un material estándar. Y con eso, creo que ya hemos terminado. Creo que nos hemos pasado de tiempo. Así que gracias por quedarte. ¿Tienes alguna pregunta final? Todavía puedes preguntarme en Discord. También te invito. Déjame obtener el enlace. Tenemos un Discord de Trestyes donde puedes ver las diferentes cosas que la gente está creando allí. Y siempre puedes hacer tus preguntas allí. Me encantará ayudarte. Normalmente, las masterclass son realmente pequeñas en términos de participantes. Esta vez es extraño porque la última vez había más personas, como ocho, nueve. Pero de todos modos, prefiero a dos personas dedicadas a aprender que a muchas. Así que realmente aprecio que te hayas unido. Y espero que haya sido útil para ti, que lo hayas disfrutado, y que comiences a crear cosas con <a href="/tags/vue-3">Vue</a> y <a href="/tags/3d">3D</a>. Avísame cómo te va. Y si creas alguna escena y quieres compartirla, por favor avísame en mis redes sociales o en el canal de Discord. Y estaré encantado de ayudar y compartirlo. De acuerdo. Muchas gracias. No olvides que tengo mi charla el jueves sobre todas las cosas que están por venir para el B4. De acuerdo. Así que puedes verlo allí. Increíble. Muchas gracias.

Vue.js Live Conference

Vue.js Live 2024

Mastering 3D Web Development with TresJS ecosystem: A Vue.js Workshop

Masterclass de Desarrollo Web 3D con el ecosistema de TresJS: Un taller de Vue.js

Bienvenido al taller de Trust.js donde cubriremos los fundamentos de la biblioteca, creando escenas 3D, utilizando componentes y composables, y agregando interactividad. Exploraremos temas como la manipulación de la cámara, la creación y modificación de objetos, el trabajo con materiales e iluminación, y la animación de objetos. Además, aprenderemos cómo importar modelos 3D y crear instancias programáticamente. El taller proporciona ejercicios prácticos para seguir y recursos para seguir aprendiendo.

Presentamos "Masterclass de Desarrollo Web 3D con TresJS", un taller especializado creado para desarrolladores de Vue.js ansiosos por explorar el mundo de la gráfica 3D en sus aplicaciones web. TresJS, un potente renderizador personalizado para Vue, está diseñado específicamente para funcionar perfectamente con el sistema reactivo de Vue. Este taller ofrece una inmersión profunda en la integración de visualizaciones 3D sofisticadas y experiencias interactivas directamente en aplicaciones Vue, aprovechando las fortalezas únicas de los ecosistemas de Vue y TresJS. <span style="color:rgb(13, 13, 13);font-family:Söhne, ui-sans-serif, system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto, Ubuntu, Cantarell, &quot;Noto Sans&quot;, sans-serif, &quot;Helvetica Neue&quot;, Arial, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;;font-size:16px;font-style:normal;font-variant-ligatures:normal;font-variant-caps:normal;font-weight:400;letter-spacing:normal;orphans:2;text-align:start;text-indent:0px;text-transform:none;widows:2;word-spacing:0px;-webkit-text-stroke-width:0px;white-space:normal;background-color:rgb(255, 255, 255);text-decoration-thickness:initial;text-decoration-style:initial;text-decoration-color:initial;display:inline !important;float:none">Este taller está diseñado para desarrolladores de Vue.js que buscan ampliar sus habilidades en la tercera dimensión, diseñadores de UI/UX interesados en incorporar elementos 3D en aplicaciones web, y desarrolladores front-end curiosos sobre el potencial de la gráfica 3D para mejorar las experiencias de usuario. Debes estar familiarizado con Vue.js para aprovechar al máximo este taller. Lo que Aprenderás- Introducción a TresJS: Descubre los fundamentos de TresJS y cómo se integra con el ecosistema de Vue para dar vida a la gráfica 3D.- Creación de Escenas 3D con Vue: Aprende a construir escenas 3D complejas utilizando componentes Vue, mejorando tus interfaces de usuario con visuales dinámicos e inmersivos.- Interactividad y Animación: Domina las técnicas para hacer tus escenas 3D interactivas, respondiendo a las entradas del usuario para una experiencia cautivadora.- Integración con Funcionalidades de Vue: Explora la integración avanzada de TresJS con la reactividad, los composables y la tienda Vuex de Vue para gestionar el estado en aplicaciones web 3D.- Rendimiento y Mejores Prácticas: Obtén información sobre la optimización de tus escenas 3D para el rendimiento y las mejores prácticas para mantener aplicaciones web fluidas y receptivas.

Alvaro Saburido

JSNation US

I’m attending JSNation US. Join me there for free with 10k other JS engineers and 50+ great speakers. Just follow this badge.

JSNation US 2024

React Summit US

React Summit US 2024

React Advanced

React Advanced Conference 2024

Productivity Conference

Productivity Conference 2024

React Day Berlin

React Day Berlin 2024

Node Congress

I’m attending @NodeCongress, the biggest conf on #JavaScript backends – by clicking the badge you may get a free remote ticket & join me there with 5k other #nodejs devs & 35 great speakers #deno #cloudflare #awscloud

Node Congress 2025

JS Nation

I’m attending JSNation – the main JavaScript conference of the year. You may join me there for free with 10k other JS engineers and 40+ great speakers. Just follow this badge. 

#javascript

JSNation 2025

React Summit

I am attending the biggest #Reactjs conference remotely. You may get a limited free ticket (50% of talks, no workshops) and join me by clicking this badge.

#react #reactjs

React Summit 2025

C3 Dev Festival

Join me at C3 Dev Fest, a contemporary software engineering festival!

Register to win an all-paid trip to Amsterdam. Elevate your career with industry experts and workshops & rock 3 dance stages at the after-party!

C3 Dev Festival 2025

TechLead Conference

I'm attending TechLead Conference 2024 – get your free remote ticket and join me there

Masterclass de Desarrollo Web 3D con el ecosistema de TresJS: Un taller de Vue.js

Comments