Así que si creo solo el canva de esta manera, pero antes de comenzar a codificar, necesito instalar las bibliotecas, por supuesto. Así que necesito instalar 3GS, el 3GS Fiber, y el React Dray. Así que tengo los comandos aquí. Los instalaré. Luego los importaré aquí. Perfecto. Así que tengo los paquetes añadidos aquí. Es una confirmación, es un buen mensaje de confirmación. Comenzaré por el canva. Así que para no hacerlo muy largo, comenzaré por los datos que utilicé. Así que en los planetas, creé un archivo JSON basado en la información de la NASA, que es sobre los planetas. Así que para cada planeta, tendremos el nombre. Añadí un color. Puedes cambiarlo más tarde como te mostré con la imagen, con el uso de text texture. El tamaño de los planetas, la distancia desde la Tierra, aquí el radio de la esfera, la velocidad, bien, la velocidad alrededor del sol, la velocidad de rotación, y tenemos el período, como, bueno, algunos detalles, inclinación, etc., alguna información para mostrar que algunos planetas tienen lunas porque hay lunas además de nuestra luna que tenemos en la Tierra. Así que esta es la información o los datos que voy a usar en un archivo. Lo llamaré planets.json. Crear archivo, planets.json. Para la luna, como te mostré, contiene el nombre, la distancia desde el planeta, el tamaño de la luna, la velocidad, bien, el color y la velocidad de rotación alrededor de sí misma. Y ahora, personalizaré la posición de la cámara y el campo de visión. Va a ser solo 45. El ángulo va a ser un poco pequeño, y el fondo será negro para parecerse al espacio. Para la órbita, como dije, te da la posibilidad de arrastrar y moverte por el espacio. Así que, aquí, podemos habilitar el span, maximizar y minimizar la distancia con el zoom, y aquí, usaremos la luz ambiental, 50% para todos los planetas.

Aquí está mi presentación. Así que comencé, como, mi nombre es Huda Motarib y hoy voy a compartir que se encuentra exactamente en la intersección, bien, de mi trabajo. Un explorador gamificado del sistema solar 3D que construí con 3JS y React TreeFiber. Así que la idea es mostrar cómo podemos pasar de una explicación plana y estática del sistema solar a una experiencia interactiva que puedes explorar, consultar y eventualmente llevar a XR. Así que soy Huda Motarib. Soy profesora de Ciencias de la Computación en MC Group y una investigadora de doctorado trabajando con el laboratorio en MC y en Mohammediyah, parte de la Universidad de Hassan II, así que mi investigación se centra en XR para la educación STEM, como mi experiencia es en cómo web XR y los entornos 3D interactivos pueden ayudar a los estudiantes a entender conceptos complejos de una manera más intuitiva. Así que técnicamente trabajo principalmente en el, en el ecosistema web. Construyo aplicaciones full-stack con React, TypeScript, 3JS, React TreeFiber, y por supuesto el web XR. Así que donde yo, aquí es donde diseño y prototipo y despliego simulaciones 3D interactivas que transforman contenido STEM tradicional como robótica, dibujo eléctrico, física, todos esos tipos de lecciones, para ser más inmersivos y entornos de aprendizaje basados en navegador que los estudiantes pueden explorar activamente en lugar de solo leer sobre ellos. Así que en esta masterclass, no vas a ver mi cara, ¿de acuerdo? Podemos verla tal vez más tarde. Así que puedes revisar mi perfil de Google Scholar para ver mis, mis artículos publicados hablando de, sobre esto. Para esta masterclass, el, el, el repositorio de GitHub, es este. Voy a, mientras trabajo en el, el código, la codificación crearé otro repositorio, pero puedes encontrar el código aquí. La demostración en vivo del resultado, estos son los resultados esperados, ¿de acuerdo? Pausaré el, el movimiento. Puedes ver los planetas, ¿de acuerdo? Así que voy a crear esto desde, desde cero para que puedas controlar la, la velocidad de la animación, aquí hay un poco de información sobre cómo puedes interactuar. Puedes rotar con tu ratón, puedes desplazarte para hacer zoom, ¿de acuerdo? O puedes, si tienes una tableta o si estás en tu portátil, puedes simplemente presionar control y puedes desplazar todo tu entorno para, para mover tu posición o para, para mover tu posición o la posición de la cámara. Veremos eso en, en detalle. Y también cuando hacemos clic en cada planeta, veremos detalles sobre él. Esto es lo esperado, espero que estés emocionado. Comenzaremos con una breve introducción a los conceptos básicos, ¿de acuerdo?, de Tree.js y React Tree Fiber. Así que no te preocupes si este es un territorio nuevo porque construiremos ese modelo mental juntos. Luego nos movemos al contexto del sistema solar y entendemos cómo hemos diseñado la, la escena. Después de eso, es principalmente código. Así que pasamos por ejemplos de codificación guiada comenzando desde una escena básica y agregando progresivamente interactividad y gamificación. Así que, y finalmente, recapitulamos lo que hemos aprendido y te señalamos recursos que puedes usar para extender esto más allá. Así que la clave por ahora, alternamos entre explicación, ¿de acuerdo?, y código práctico al final. No necesitas codificar si no quieres. Puedes simplemente seguir los conceptos. El objetivo es que al final, entiendas no solo lo que construimos, sino por qué y cómo aplicar estos patrones a tus propios proyectos. Así que hay cinco resultados concretos. Así que por qué necesitamos el Tree.js R. Así que déjame enmarcar por qué estamos construyendo esto. Así que enseñar conceptos abstractos de STEM, especialmente la mecánica orbital, en realidad no es realmente difícil en dos dimensiones. Puedes mostrar un diagrama, pero los estudiantes a menudo terminan memorizando hechos desconectados en lugar de entender las relaciones entre escala, distancia y movimiento. Pero con 3D y XR, cambiamos el paradigma de una manera que los estudiantes pueden manipular y explorar. Esa atracción incorporada combinada con la memoria espacial en realidad les ayuda a construir una intuición más profunda. Y ese es el objetivo aquí. Y por cierto, tengo una hija de cinco años que ya sabe un poco sobre el planeta. Pero cuando le mostré la experiencia, quiero decir, realmente le gustó y entendió la idea de cómo se mueven los planetas. Quiero decir, cuando estás inmerso, tienes más conciencia de lo que está pasando. Y por supuesto, cuando supo que Smeel construyó eso, estaba muy orgullosa. Puedes imaginar. Bien, así que los objetivos de aprendizaje. Primero, sabrás cómo React Tree Fiber conecta patrones de React en gráficos 3D. Y la segunda cosa que reconocerás patrones de gráficos de escena. Estos son fundamentales y reutilizables en cualquier objeto 3D. Y tercero, conectarás la interactividad. Así es como convertimos una visualización pasiva en una herramienta de aprendizaje tipo juego.

Y lo que construirás, como te mostré concretamente. Así que un pequeño, pero completo sistema solar 3D con planetas orbitando. Puedes hacer clic en cualquier planeta y se resaltará mostrándote hechos o mini información sobre él. Así que añadimos la capa de gamificación como para ver la velocidad para cambiarla, pero podemos añadir más interacciones si tenemos suficiente tiempo. Y de esta manera, la visualización, como puedes ver, se convierte en una herramienta de aprendizaje activa. Así que también intentaremos, te mostraré cómo podemos optimizar el renderizado si los usuarios no tienen, quiero decir, dispositivos de alto rendimiento. Porque este caso realmente sucede. Pero podrías preguntar si estás familiarizado con 3GS, por supuesto. Y algunos pueden preguntar por qué React 3 Fiber en su lugar. Entonces, solo, en lugar de solo 3GS? Entonces, la respuesta corta es que 3GS es imperativo. Creas objetos, los actualizas en bucles, gestionas el re-renderizado, todo por ti mismo. Así que, es poderoso, pero verboso. React 3 Fiber abstrae eso en una capa. Escribes componentes de malla tal como escribirías div. El div que conoces, quiero decir. Y la actividad de React automáticamente mantiene la escena 3D sincronizada con tu estado. Y eso es un gran para construir visualizaciones complejas con estado. Así que, elige React 2U, pero está renderizando 3GS bajo el capó. Un último encuadre antes de sumergirnos. Así que, no te preocupes por memorizar APIs, ¿de acuerdo? No estamos aquí para memorizar el código. Pero porque hay, por supuesto, documentación para eso. Lo que importa hoy es reconocer los patrones fundamentales. Cómo funcionan los gráficos de escena. Cómo fluye la animación a través de un uso de frame. Cómo se conecta al objeto 3D. Y cómo resuelve problemas de rendimiento. Una vez que veas esos patrones, puedes aplicarlos en cualquier lugar. Así que, el objetivo es la confianza de que 3D y XR son más magia. Son solo extensiones de habilidades que ya tienes porque asumo que ya, ya estás familiarizado con React.js.

Bien. Pasemos a la segunda parte. Así que, iniciemos con 3GS y 3Fibre. Entonces, lo primero que hay que saber es el WebXR. Es una combinación de dos palabras. La web, cualquier cosa a la que puedas acceder desde el navegador. Y XR significa VR o AR o MR o cualquier realidad. Como podemos cambiar el entorno real para que sea virtual. Bien. Así que, la X representa V, A, o M. XR, VR, o realidad mixta. Entonces, el WebXR es un estándar web. El estándar web que permite que tu navegador se comunique con el hardware de VR y ER. Así que, usar cualquier como 3GS, por ejemplo, se basa en los estándares de WebXR. No es como si estuvieras trabajando con Unity y construyendo la experiencia VR para Quest o para construir ER para Magic Leap u otros auriculares específicos. Así que, si lo estandarizo, lo hago estándar para todos los dispositivos. Si es un teléfono, si es una tableta, si es una computadora portátil.

O si el usuario está usando un auricular. Y puedes encontrar que los auriculares están cambiando ahora. Vemos gafas con cámara como Meta RayBan. Y la nueva versión que viene pronto de Apple. Hay mitos sobre eso. Así que, la evolución del hardware está cambiando. Y es un poco difícil seguirle el ritmo. Así que, para mí, el WebXR es la forma que puede ayudarte a crear la experiencia sin preocuparte por el hardware. Porque te da la accesibilidad y la forma estable de construir tu proyecto sin preocuparte por el hardware. Así que, este es el puente. Entonces, WebXR no es un motor 3D Es un puente entre tu código, ¿de acuerdo? Y el hardware. Así que, sin preocuparte por qué es, dónde va a ejecutarse. ¿De acuerdo? Así que, 3GS tiene soporte nativo para WebXR. Y React 3 Fiber lo hace aún más simple. 3GS se puede usar en cualquier lugar en cualquier código JavaScript. Pero si estás usando React, React como un framework, necesitas, quiero decir, es mejor para ti usar React 3 Fiber. Porque cualquier cosa de 3GS, puedes encontrarla en React 3 Fiber. Y también, necesitaremos usar 3GS también. Pero React 3 Fiber lo hace mejor y más simple. Así que, las ideas clave, si construyes tu escena correctamente con React 3 Fiber, puedes ejecutarla en un monitor de escritorio, luego envolverla con XR etiqueta XR. ¿De acuerdo? Y de manera similar, es inmersivo, no se necesita derecho, mismo sistema solar, diferente interfaz, dependiendo del dispositivo que esté abriendo la aplicación. Así que, pequeña diferencia para mostrarte aquí en 3GS, puedes comenzar creando tres objetos principales. El primero es la escena. Así que, la escena, es como si pudieras imaginar crear una película. Así que, para crear una película, necesitas crear necesitas tener una escena donde estás donde todo está sucediendo. ¿De acuerdo? También necesitarás la cámara para grabar y capturar videos y para grabar dentro de tu escena. Y el render. Así que, el render es el que o es el objeto que está usando la escena, la cámara, y renderizándola a la pantalla visual, digamos en una computadora portátil. Hay pantallas, así que la pantalla está renderizando el resultado al usuario. Así que, pero esto es como puedes ver, es más complejo, un poco, para el nivel principiante. Y necesita más configuración para la cámara, por ejemplo, necesitarás el ángulo o el el punto de vista, necesitarás la escala, etc. Hay más detalles, pero en React 3.0, es más fácil, más fácil. Todo lo que necesitas hacer para comenzar es crear el canva, ¿de acuerdo? Todo lo que necesitas hacer es crear el canva. La escena, la cámara, el render, todo es implícito y puedes agregar cualquier objeto que necesites dentro de él. Pero si quieres hacerlo, si quieres hacerlo más personalizado, ¿de acuerdo? Por supuesto, puedes cambiar cualquier cosa que quieras en tu canva. Como, por ejemplo, si quieres cambiar algo para tu cámara, puedes elegir la posición de ella. Tenemos el X, Y y Z, ¿de acuerdo? Hay tres ejes, porque estamos en un espacio 3D, así que tenemos tres informaciones o tres elementos para elegir la posición de la cámara, en la escena. El campo de visión, es un ángulo, ¿de acuerdo? Está en radianes, así que un giro completo o medio es 118, y el ángulo realista de los humanos es 75 como ángulo. Puedes hacerlo más amplio, como 90 por ciento, 90 grados o menos. Depende de tu experiencia. Por defecto, es 75. Y también podemos definir el cerca y el lejos, como el plano mínimo y máximo, ¿de acuerdo? Como, si hacemos zoom, como viste en el ejemplo, puedo hacer zoom in y out. Pero podemos fijar el valor máximo de zoom que queremos detener. Como, si queremos que la escala sea 1,000 veces entonces dejar de hacer zoom out, podemos especificarlo aquí. El punto más cercano es 1 por ciento aquí. Los aspectos también, se supone que se calculan automáticamente, con el ancho y la altura del punto de vista. Aquí, también podemos cambiar el renderizador. Es la biblioteca gráfica.

Aquí, si queremos cambiarlo, podemos simplemente poner el atributo GL, ¿de acuerdo? Y podemos cambiar cualquier valor que necesitemos si queremos personalizarlo, para hacer los bordes más suaves. Para un mejor renderizado, debería ponerse en el valor verdadero si quieres que las sombras sean visibles, etcétera. Puedes ver aquí que para el tipo de mapa de sombras, podemos elegir un objeto de sombra de 3GS, incluso si estamos usando React TreeFiber, podemos seguir usando objetos de 3GS. La relación de píxeles, podemos detectar el dispositivo, obtenerlo del dispositivo actual del cliente. Y por supuesto, como cualquier etiqueta HTML, podemos agregar el atributo de estilo. Y aquí, por supuesto, puedes poner cualquier valor. Como en nuestro ejemplo, pusimos aquí un fondo en color negro para que parezca el espacio sin luz. También hay otra información que podemos personalizar, como la niebla. Hay argumentos aquí, como puedes ver, el cerca y el lejos. Es como un intervalo donde los objetos, todos los objetos 3D, serán visibles o donde serán invisibles. Como entre 0.1 y 100, cualquier elemento no será visible. 100 va a ser un poco visible. Me gusta mucho la vida real. Si nos acercamos, el ítem o el objeto es claro. Pero si nos alejamos del objeto, en un punto, podemos ver, o explorar, y podemos ver los objetos. Así que es lo mismo. También es bueno para el rendimiento ya que el renderizado es menos pesado cuando los objetos están lejos y el rendimiento no necesita renderizar todos los objetos de una manera perfecta. La luz ambiental, ¿de acuerdo? Así que esta es la luz que está alrededor de todos los objetos del entorno en la escena. Por ejemplo, podemos tomar el ejemplo de nuestra vida real. Cuando salimos afuera, cuando hay un día soleado, podemos ver todo a nuestro alrededor. Todo tiene la luz. Así que este es el objetivo de la luz ambiental, es tener todo visible en la escena. Todos los objetos 3D son visibles y podemos poner la intensidad de su visibilidad. Pero es diferente de la luz direccional. Aquí estamos creando una fuente de luz. Una fuente de luz como el sol o como la lámpara o cualquier objeto que va a ser una fuente de luz en nuestra escena. Podemos ponerlo en una posición, ¿de acuerdo? Y también podemos proyectar sombras para que los objetos puedan tener una sombra cuando reciben la luz direccional de ese objeto o esa fuente. Podemos hacer lo mismo con el sol. El sol, es un objeto y necesitamos que sea una fuente de luz. Así que en los planetas pueden tener una sombra en el otro lado como lo que vemos en nuestro fenómeno... el fenómeno de la noche y las fases de la luna, etcétera. Y por supuesto, la noche y el día. Así que esto es lo que queremos tener en nuestra experiencia. Así que ahora pasemos a la malla. Anteriormente vimos cómo podemos crear un canva y lo que ponemos dentro del canva, ponemos la malla. La malla es donde la geometría y el material se unen. La geometría es solo la forma. La geometría es la forma como tenemos el cubo, tenemos la esfera, etcétera. Así que esta es la forma del marco de alambre 3D que está formado por vértices y caras. Pero el material es la pintura, como el color, la rugosidad, la textura. Así que sin... quiero decir una malla, es una combinación de ambos. Y también podemos agregar una transformación como la posición donde estamos poniendo esta malla o este objeto, cuál es la rotación, cuál es la escala, etcétera. Así que sin geometría, no tenemos el objeto. No hay nada que dibujar. Así que la geometría es lo que nos ayuda a dibujar el objeto y sin el material va a ser invisible. Así que la malla es el paquete completo. Es la forma, hablamos de geometría, para el aspecto hablamos del material y para la ubicación tenemos la posición, la rotación y la escala. Así que nota cómo anidamos la geometría. La geometría la anidamos dentro de la malla y el material como los hijos de los componentes de la malla.

Así que ese es el estilo declarativo de React3 Fiber. Ponemos la malla, la información de transformación y luego ponemos la geometría y el material dentro de ella. Este código no nos da este resultado. Esto es solo para mostrarte los vértices y las caras que forman un objeto 3D. Y aquí, si quieres saber más sobre la geometría disponible y cómo podemos crearla, puedes volver a la documentación de 3GS. Hay una lista de formas, de geometrías donde podemos crearlas. Tomé el ejemplo de una esfera. Esto es con 3GS pero en React3 Fiber, es diferente. Así que en lugar de llamar al deconstructor del objeto, como crear un nuevo árbol y poner punto sphere geometry y poner los argumentos aquí con la ruta 3GS, en React3 Fiber creamos un componente con el mismo nombre, sphere geometry, y en el argumento ponemos lo que necesitamos dar para crear este componente. En lugar de parámetros de constructor, creamos un atributo args y les damos un array con los valores en el orden correcto. Esto es importante. Así que puedes ver, si quieres crear cualquier forma, puedes simplemente venir aquí y ver si hay una forma predefinida. Puedes poner cualquier forma que quieras, el plano, dos dimensiones, la caja. Así que podrías simplemente usar la box geometry, la creas como un componente y luego le das los argumentos. Y para el material, puedes personalizarlo o personalizar la información que proporcionas a estos objetos. Así que esto es para la malla. Ahora pasemos a la animación. Para mantener la animación en 3GS, en la ruta 3GS, usamos esta función animates. Creamos una función de animación y necesitamos llamar al request animation frame. Le damos la función para llamarla de nuevo en el siguiente frame. Hacemos los cambios necesarios a la malla o al objeto que queremos. Queremos aumentar la rotación x e y de la malla y luego volver a renderizar el resultado. Se supone que esto se llama 60 veces por segundo. Esto se ejecuta 16 veces por segundo. Esto se llama un frame. Pero en React 3 Fiber hay un nuevo hook. Este es un hook para eso. Es useFrame. Puedes importarlo de React 3 Fiber. Dentro de tu componente, puedes tener una referencia a la malla. Como puedes ver aquí hay una sphere geometry. Con este radio, este ancho y altura, lo fijo en una esfera. Tenemos un color azul. Es una esfera coloreada en azul. En cada frame, rotamos la esfera con estos valores. Aumentamos la x y aumentamos la y. En cada frame, la rotación va a aumentar. Este es el hook que reemplaza la función de animación que podemos encontrar en nuestro 3js. El useFrame, solo para tener en cuenta, el frame corre a 60 frames por segundo. Está automáticamente sincronizado con el renderizador. Aquí es donde ocurre el movimiento. Aquí es donde ponemos nuestra animación. Así que, el callback de useFrame en realidad recibe un objeto de contexto. Con información de tiempo completa, podemos poner el reloj. Podemos obtener el reloj para la última vez, que son los segundos totales desde que la escena comenzó. Esto es realmente genial para una rotación suave y predecible, como necesitaremos. Podemos obtener el delta, que es el tiempo entre el frame y el último frame. Esto es útil si quieres mover esa tasa de frames independientemente. Si multiplicas la velocidad por delta, tu animación corre a la misma velocidad a 60 frames por segundo y 120 frames por segundo. Para el sistema solar, usaremos el tiempo transcurrido del reloj para la mecánica orbital.

Para el sistema solar, usaremos el tiempo transcurrido del reloj para la mecánica orbital. El ángulo alrededor del sol es proporcional al tiempo transcurrido para la rotación del planeta. Usaríamos actualizaciones incrementales. Ambos enfoques funcionan. Elige según tus necesidades. Aquí hay algunas mejores prácticas para el rendimiento para tener un mejor rendimiento en tus aplicaciones y experiencias. Como vimos ahora, el useFrame es un callback que recibe un contexto. Tenemos dos ejemplos. Aquí, tenemos el buen ejemplo y aquí el mal ejemplo. Entonces, aquí tenemos que obtenemos la malla actual, y cambiamos la y de la rotación de la malla directamente. Esto es más rápido, pero a veces hay personas que cometen un error y crean la información xyz de la posición, la nueva posición. Copian todo el objeto. Esto es malo. ¿Por qué? Porque consume mucha memoria al crear los vectores cada vez. Puedes imaginar cada vez, 60 veces por segundo, estamos asignando memoria para el vector y luego copiando los valores. Esto es malo para el rendimiento. Puedes simplemente acceder a la malla y cambiar el valor directamente sin recrear la nueva posición y cambiarlo de esta manera. Esto es mucho mejor y más rápido para el rendimiento. Otra buena cosa en caso de que quieras crear el vector completo, se recomienda crearlo fuera del frame. De esta manera, puedes, si la posición cambió en cualquier parte de tu código, puedes usarlo en el frame copiando los valores, pero nunca crees el árbol de vectores en tu use frame. Va a consumir mucha memoria. Por supuesto, va a disminuir el rendimiento. Hay otro caso. Como dije antes, que podemos hacer algunos planetas invisibles en caso de que estén lejos del campo de visión. Si el zoom es más amplio y los elementos se alejan, los elementos se volverán invisibles. Para no procesar los elementos invisibles, puedes simplemente omitir la animación usando si el elemento es visible en pantalla. Esto va a hacerlo mucho más fácil. Si un elemento no está en la escena, simplemente no lo animes. Quiero decir, nadie está viendo lo que está sucediendo fuera del campo de visión.

En nuestro caso, solo tenemos unos pocos planetas. No hay necesidad de todo eso. Pero si vas a recrear todos los planetas, más de 100 o más, tienes 100 use frame callbacks ejecutándose. Necesitas tener cuidado con eso y tenerlo en cuenta. Pero si estás considerando escalar, considera agrupar animaciones o usar shaders. Los shaders te ayudan a mover el cálculo a la GPU. Esto es más complejo. No es más fácil porque vas a crear código directamente que se ejecutará en la GPU. Cuando las cosas se ponen más difíciles, definitivamente necesitarás usar la GPU directamente. También para las animaciones agrupadas, puedes obtener todas las mallas siendo animadas en un solo use frame en lugar de animar cada elemento por separado. Así que es mejor hacer que todas se animen al mismo tiempo en el mismo use frame. Hay otro ayudante que vamos a usar. Así que Dray, es una biblioteca de utilidades que se sitúa sobre React Tree Fiber y te da componentes y hooks predefinidos que ahorran el código repetitivo. Por ejemplo, si quieres usar una imagen para la textura en lugar de los colores, podemos obtener el use texture de Dray, darle la ruta de la imagen y esta malla o el objeto va a ser cubierto por esta imagen. Así que para el sistema solar, principalmente usaremos tres cosas. Usaremos las estrellas también. Hay componentes de estrellas predefinidos o ya hechos así que no tenemos que construirlo desde cero. Simplemente colocamos la etiqueta de estrellas en la escena y veremos las estrellas y personalizaremos cada elemento. Y tercero, si quieres que los usuarios roten la cámara arrastrando su ratón, hay un objeto llamado orbit controls que está preconstruido. Así que no se necesita ray casting, solo agrega el componente orbit controls y los usuarios pueden usar su ratón o si lo están usando en su casco, pueden usar sus controladores y se moverá. Va a ser intuitivo, así que no necesitas construir para cada casco o para cada hardware el comportamiento. ¿Cómo se dice en inglés? Bueno, cómo va a enfocarse en una cosa, cómo hacer zoom. Como cuando estamos usando un casco, podemos usar los controladores. Usando Vision Pro, puedes hacer zoom usando tus dedos. Así que todos son entradas pero tienen el mismo resultado. Así que los orbit controls van a manejar todas las entradas dando el mismo resultado. No necesitas preocuparte por quién va a usar la plataforma porque todos verán lo mismo. Esto también va a ser lo mismo para cada hardware. Así que lo que vamos a hacer es agregar algunas etiquetas. Para que todos puedan ver lo mismo. Esto también, el HTML, hay un componente HTML en esta biblioteca que te ayuda, como dice el nombre, te ayuda a incrustar los elementos HTML regulares dentro de tu escena 3D. Así que esto es útil en nuestro caso para agregar etiquetas o paneles de información, etc. Así que eso es lo que necesitamos de Dray para esta masterclass. Todo lo demás, el canvas, el use frame, geometrías, materiales, todo eso viene de React Tree Fiber en sí. Lo siento, no mostré esto. Así que como puedes ver en este ejemplo, están las estrellas. Podemos poner el radio de las estrellas, la profundidad, la cantidad, el factor. Podemos personalizar todo sobre las estrellas, el control de órbita como dije, para permitirnos controlar las entradas y salidas. La entrada puede ser el clic, puede ser mover con el ratón, puede ser hacer zoom, puede ser hacer zoom, alejar, desplazar el espacio, todo está controlado o habilitado por los orbit controls. Y para el HTML, te ayuda a agregar elementos HTML en tu escena 3D. Así que vamos ahora al contexto del sistema solar y el diseño de la escena. Así que el verdadero sistema solar es imposible de renderizar a escala. Así que como puedes ver, el sol es muy, muy, muy grande de tal manera que si creamos una escala del sol real y la tierra con el tamaño real con la misma escala, la tierra va a ser invisible porque vamos a ver el sol, pero la tierra va a ser invisible. Así que por eso usaremos algo llamado escalado pedagógico, lo que significa que mantendremos las relaciones entre los planetas como el orden, la forma en que giran, etc. Y también la mecánica orbital mantendrá todo eso más realista, pero escalaremos todo para que quepa en la pantalla. Bien, esto es estándar en la educación astronómica. En nuestro proyecto, bueno, agregué aquí algunos, puede haber algunos cambios porque cambié un poco en el código antes de poner esta diapositiva. Veré si lo tengo aquí. Bien, está bien. Bien, comencemos creando el proyecto.

Como puedes ver aquí, voy a usar Vite. Bien, voy a crear un nuevo proyecto. Así que crearé una nueva ventana, cambiaré a mi espacio de trabajo. Allí, no sé si es visible. Crearé un sistema solar, bien, basado en las plantillas de React. Voy a usar Vite. Así que si no sabes qué es, es, mantiene tu código actualizado. Si haces cambios en tu proyecto, también te ayuda a construir tu proyecto para producción. Así que en este caso, voy a usar solo React. Lo mantendré solo en JavaScript. No, no quiero esta característica. Sí, instalaré el NPM por ahora y lo iniciaré. Aquí estoy instalando las dependencias. Voy a copiar este enlace y ver los resultados. Por supuesto, el proyecto está en vivo y funcionando. Lo primero, abriré este proyecto. Veamos, ¿dónde colocar? Espacio de trabajo, sí, sistema solar. Así que aquí está mi proyecto. Eliminaré todas las cosas innecesarias. Como en la app, todo este código, eliminaré todo para poder comenzar con el primer proyecto. Eliminaré todo, no necesito eso. Mantendremos la app. Eliminaremos este. Bien, mantendremos la app. Eliminaremos este. El main, eliminaré el archivo CSS. También eliminaré el modo estricto. De hecho, hace que la app sea un poco problemática a veces. Así que es mejor eliminar el modo estricto en este caso. Bien, creo que tenemos todo. Eliminaremos este ícono. Bien, y ejecutaremos el proyecto de nuevo. Se ha movido a rendiv. Así que sí, tenemos un proyecto vacío ahora mismo. Probemos. Hola, ¿qué nación? Bien, debería funcionar. Este, ah sí, está aquí. Todavía tengo algo de CSS en el archivo de la app. Eliminaré todo. Eso es el margen. Solo eliminaremos el margen y el padding. Bien, perfecto. Como dije, ¿con qué deberíamos comenzar creando el canvas?

Así que, aquí, podemos habilitar el span, maximizar y minimizar la distancia con el zoom, y aquí, usaremos la luz ambiental, 50% para todos los planetas. Así que, volveré a mis proyectos. La app, bien, aquí está mi Canva. Bien, tengo la información aquí, la luz ambiental, la hice una aquí, líneas de puntos basadas en el sol. Bien, los controladores de órbita, te mostraré cómo funciona ahora mismo, cerrar el Canva, añadir las importaciones de Fibre y de Gray. Así que, aquí no hay nada todavía. Bien, líneas de puntos, vamos a ejecutar el proyecto. Perfecto. Así que, como puedes ver aquí, necesitamos fijar el canva dentro del div para tener mejor control sobre el campo de visión o vista del canva. Voy a crear un div alrededor en lugar de un elemento vacío aquí. Cerraré el div, abrir el compartir. Así que creé un div con 100 por ciento de ancho y la altura. Recargaré para eliminar los errores. Y eso es todo. Así que ahora mismo esto está vacío, pero es un espacio fresco para crear nuestros planetas. También me gustaría agregar algunas instrucciones en la parte inferior. Así que tengo un archivo aquí, como puedes ver, solo información sobre cómo los usuarios pueden experimentar el espacio. Así que solo un div con algo de estilo, tres párrafos, no mucho código. Así que en mi proyecto aquí añadiría los componentes de instrucciones. Y ahí vamos. Volveré aquí, lo importaré. Instrucciones. Y lo añadiré después del canva. Así que añadirlo aquí para que los usuarios sepan cómo usarlo. Bien, ahora necesitamos... Bien, comenzaré con el sol. El sol es diferente de los planetas porque el sol no se mueve en nuestra experiencia. Así que es solo una malla, como puedes ver. Solo una malla. Una esfera. Bien. Y con un color de fondo o simplemente, digamos, un color. Y tiene una luz. Es una fuente de luz. Así que voy a crear un componente solo para el sol. Bien. Así que el sun.jsx. Y añadirlo a nuestro canva. Eso es todo. Así que aquí está nuestro... Me estoy moviendo, pero la diferencia es difícil. Pero puedes ver que puedo mover la escena hacia arriba, abajo con el control, presionando el control y moviéndome con mi touchpad. Ahora, necesitamos añadir los planetas. Necesito importar el archivo JSON desde aquí. Así que... Pero basado en los detalles en este archivo, necesitaré crear las mallas. Así que voy a crear un componente específicamente para los planetas. No quiero empezar a codificar apresuradamente. Va a tomar mucho tiempo, horas y horas para crear. Así que creo que es mejor esperar y darte qué parte...

Cada parte del código. Así que los planetas aquí, los componentes. Podemos obtener la información al respecto desde la app. No te preocupes por esto. Esto es para las interacciones que añadiremos más tarde. Así que solo leeré el planeta por ahora. Volvamos a crear un nuevo componente aquí. Genial. Vamos a las fuentes, planetas. El router... Necesitamos información sobre qué planetas crear, ¿verdad? Así que comencemos. Por supuesto, necesitaremos el Tree.js Fiber. Vamos a crear una referencia en cada mesh. Bien. Vamos al router donde estamos creando el planeta. Aquí puedes ver dónde creo cada planeta basado en los datos que obtenemos de los argumentos. El primer argumento es el planeta, ¿de acuerdo? Así que para cada mesh, vamos a verificar o obtener la distancia desde la fuente de la escena, que es 0, 0, 0, que es el Sol. Estamos poniendo el Sol en la misma posición. Desde esa posición hasta el planeta. Así que, estamos usando la distancia entre el planeta y el Sol para colocarlo en el espacio. Esto es para añadir más interactividad más tarde, el clic y otras cosas que añadiremos. La geometría de la esfera, podemos obtener el radio para crear la esfera. Y los materiales, para el material usaremos el color de cada planeta. Así que voy a crear todo en un grupo, ¿de acuerdo? Porque más tarde necesitaré añadir las lunas para cada planeta. Bien, voy a añadir la referencia del grupo también. Y vamos a obtener el grupo que contiene el mesh.

Ahora mismo, hemos creado el componente planet que dibuja un grupo que contiene mesh para cada planeta. Así que vamos a importar este planeta y crear planetas en la app. Bien, voy a importar los datos del planeta. Vamos a llamarlo planets data desde los assets. Planets, ¿verdad? Y aquí en la app, bien, obtendré los planetas de los datos y tendré un map en cada planeta. Así que añadamos esto aquí después del Sol. Así que tenemos los planetas. Necesito importar planetas, por supuesto. Ahí vamos. Así que tenemos los planetas. Bien, obtener un nombre de información. También damos al planeta el objeto. Por ahora, esto es el activo, no seleccionado. No necesitamos todos esos detalles. Esos son para la interactividad más tarde. Creo que me falta algo. Veamos el componente planet. Dando aquí solo el planeta, bien. Debería funcionar. Vamos a comprobar qué está mal. Inspeccionar los elementos. Bien, veamos. No está definido, no ha definido el handle click aún. Voy a eliminar esto. El clic, el golpe de mano, añadiré esto más tarde. El material del mesh, la cosa activa. No necesitamos todo eso. Posición, todo está claro. Esto también. Solo el color. Perfecto. Así que aquí está nuestro planeta ahora mismo. Mira, estamos ignorando el tamaño real del sol. Lo importante ahora es tener planetas un poco más realistas basados en su distancia y su forma. Comparar con los otros planetas. Bien. No sé si esto está claro hasta ahora para ti. Ve al código. Bien. Así que ahora lo que podemos añadir. Podemos añadir las órbitas, bien. Así que cada planeta tiene una órbita diferente donde debería girar alrededor del sol. Así que podemos usar la información que tenemos en el archivo JSON como la distancia y la intercepción. Déjame ver. Lo siento, y la inclinación, bien. La inclinación y la distancia para crear las órbitas de cada planeta. Así que voy a crear un nuevo componente. Bien. Que dibuje una línea alrededor del sol basado en eso.

Detalles. Así que obtendré el componente que ya creé aquí. Como puedes ver, es un mesh. Bien, así que no te preocupes por la fórmula matemática. La fórmula matemática. Es solo cambiar de grado a radianes. Bien. Así que aquí damos el radio del círculo que va a estar alrededor del sol, que es la órbita del planeta, de cada planeta. Bien. Y en la naturaleza, los planetas no están alrededor, no están girando alrededor del sol en un círculo perfecto. Están inclinados en un grado. Y podemos especificar. Así que voy a ponerlo por defecto a cero en caso de que no demos ningún valor de inclinación. Eso va a ser plano. Y el color de las órbitas. Aquí, como dije, solo cambiando de grado a radianes. ¿Por qué? Porque necesitamos esta información en la rotación del mesh. Bien. No te preocupes de nuevo por esta fórmula. Se muestra perfectamente en la escena. Así que necesitamos el radio aquí. Puedes consultar la geometría en la documentación de 3DS. Requiere el radio y esos valores. Y para el mesh, solo necesitamos el color y dentro de él debe ser transparente. Y podemos elegir aquí la opacidad. Así que vamos a crear el componente de órbita. Órbita. GSX. Aquí vamos. Y voy a añadir esto en cada planeta. Así que para cada planeta, si recuerdas, creé un grupo para cada planeta. Y lo puse dentro de otro grupo que contendrá el grupo del planeta con las lunas junto con la trayectoria de la órbita de los planetas seleccionados. Bien. Así que aquí vamos. Crear otro grupo dentro de los planetas. No olvides importar las órbitas. Perdiendo aquí el otro grupo. Y vamos a refrescar la página. Buen trabajo. Creo. Veamos. No calculé la inclinación o radiación. Bien. Vamos a adivinarlo aquí. Así que basado en el planeta, vamos a calcular el valor de radiación. Un poco molesto cambiar de grado a radiación cada vez. Así que cambiaré la opacidad para hacerlo más claro. Aquí lo haré 1. Bien. Creo que ahora es visible.

Así que, ya tengo el elemento o los componentes aquí con el mismo multiplicador de velocidad. Bien. Tendremos la misma velocidad para los planetas. Así que, en el componente, obtendremos los detalles e información de la luna para dibujar la esfera y usar también la velocidad de rotación. Así que, es solo un mesh con una distancia, pero ahora la distancia, no desde el sol porque no es un planeta, va a ser desde la tierra. Digamos el planeta en general. Es la posición desde los planetas. Así que, esto va a ser calculado, no desde la posición de origen con los valores 0 y X, 0 y Y, 0 y Z. Así que, es una esfera con información de radio, el color, todo va a ser del archivo JSON. Bien. Vamos a crear este componente y lo añadiré al planeta porque es para cada planeta.

Así que puedes ver las órbitas. No son perfectamente planas porque hay una inclinación. Así que esto es lo que sucede para cada planeta. Puedes ver la inclinación aquí. Así que no están todos planos. Cada planeta tiene su propia órbita, dependiente de ella. Perfecto. Así que ahora, lo que necesitamos. Ya creamos los planetas. Primero, no voy a seguir como tengo en la diapositiva. Pero añadamos la animación ahora. Como dije antes, para añadir animación, necesitamos usar el use frame. El hook use frame nos da la capacidad de cambiar el renderizado dependiendo de cada frame. Así que cambiemos las posiciones de los planetas. Bien. Y también, necesitamos cambiar la rotación, dependiendo de su velocidad. Así que te mostraré la parte que hace eso. Así que como puedes ver aquí, hay un ángulo de órbita. La primera vez es cero, por supuesto. No es estable al principio. Comienza desde cero. Así que en caso de que haya un error. Aquí cambiamos la Y basada en la velocidad. Y el multiplicador de velocidad que dimos aquí. Porque más tarde podremos controlar la velocidad. Bien. Si es normal, entonces es uno. Así que lo mantendré en uno por ahora. Más tarde añadiremos, como te mostré, botones para cambiar la velocidad de rotación de los planetas. Así que por eso lo estamos multiplicando aquí. Así que ahora cambiaré la Y de cada planeta. Bien. Basado en la velocidad de rotación. Y cambiaré todo el ángulo de órbita basado en la velocidad del planeta. Y lo cambiaré de nuevo. Eso es todo. Lo cambiaré de nuevo. Así que tomemos esta parte. Necesitaré el multiplicador de velocidad en mi, para ser visible en mis argumentos. Es como el use frame aquí. Multiplicador de velocidad. Cuerpo uno. Y sí. Necesitaré asegurarme de que añadí las referencias. Sí, el mesh ref. La referencia del grupo. Correcto. Veamos si hay algo mal.

Definitivamente. El ángulo de órbita no está definido. ¿No está creado? Sí. Necesito crear el ángulo de órbita, por supuesto. Aquí. Y inicializarlo. Así que como puedes ver aquí, los planetas se mueven basados en su velocidad. Perfecto. Así que ahora tenemos nuestro sistema solar en movimiento y me gustaría añadir más interacción. Vamos a añadir el clic en cada planeta para mostrar los detalles. Aquí, por ejemplo. Así que añadamos el clic para cada uno. O sí. Añadamos el clic primero. Lo obtendremos de la app. Bien. Para tener un elemento HTML visible fuera del Canva para controlarlo. Por allí. Así que aquí es donde puedes encontrarlo. Veamos los planetas. Sí. Veamos el planeta. Al hacer clic. No activo. Bien. Tenemos esto activo. Necesitaré dos argumentos. Ya hicimos clic en él. Se muestra en un color diferente. Cambiamos el color para que sea más claro. Nos movemos a ese planeta y mostramos los detalles. Por eso añadí dos atributos al planeta. Añadámoslos aquí.

Está activo. Está en el planeta seleccionado. Así que esos son los que faltan del último código. Aquí puedes encontrar lo que hice llamado ambos. Añadiré el manejo de clic. Porque en el manejo de clic es donde llamamos a esta función o a este callback. Así que tenemos órbita. Sí. Para el retorno. Tenemos el manejo de clic. Tenemos el manejo de puntero sobre. Esto es solo para un estilo. Para sobre un planeta, el usuario puede ver que es algo en lo que puede hacer clic. Y de lo contrario, si está fuera, no es clicable. Añadamos esas funciones al mesh. Tenemos el mesh aquí del planeta. Añadiré el on click. Debería estar fuera de la misión. Así que sí. Ahora tenemos el clic que llama a esta función, pero necesitamos dar esta función al planeta cuando estamos creando cada planeta aquí. Así que vamos aquí. Está de vuelta al planeta, crea la función y dásela al componente. Así que aquí está la selección del planeta. Eso es este año. Mantendré la velocidad por ahora porque ahora solo estamos tratando con el clic en el planeta. Veamos la función aquí. Sí. Esto está configurando la etapa activa. Lo añadiré aquí. Debería importar desde three, desde React. Necesitamos los estados. Y añadiría esto para la velocidad más tarde. Si un planeta está activo, voy a mostrar aquí el nombre del planeta, información sobre él, y la distancia y todo. Así que obtengamos los detalles del planeta activo aquí. Así que debería mantenerlo verde. Correcto. Así que asegurémonos. Sí, si está activo, el nombre. Sí. Así que obtenemos el valor de ello. Verifiquemos. Perfecto. Así que una vez que hago clic en un elemento o en un planeta, obtengo los detalles sobre él. Si cambio los elementos, correcto, obtengo otros detalles basados en el planeta clicado. Bien. Así que ahora cambiemos la velocidad. Así que para la velocidad, añadamos las estrellas. Olvidé que no parece un espacio real sin las estrellas. Añadamos estrellas. Bien.

Aquí están las estrellas con toda la información necesaria, como el número de estrellas, la profundidad de ellas. Bien. Lo importé aquí. Está añadido en el Canva. Y ahora se ve un poco más realista. Si hacemos zoom, no hay espacio. Estamos perdidos en el espacio. Nos acercamos. Puedes ver nuestro planeta aquí. Perfecto. Pero como puedes ver, la velocidad es un poco alta. Podemos cambiarla. Así que veamos aquí. Entonces, para controlar la velocidad, solo tenemos que añadir — cambiar el valor del multiplicador, como dije antes. Podemos hacerlo menos, hacerlo más.

Y la velocidad de todas las plantas cambiará en función de ese valor, porque multiplicamos la velocidad de rotación con él. Así que añadiré un poco de HTML, bien, para mostrar — o cada botón, para mostrar el valor de la velocidad para cada velocidad que queremos usar. Lo añadiré aquí en la parte superior. Sí. Justo aquí antes del planeta activo, HTML. Necesito algunas funciones. Porque sé que lo necesito. Necesitaré esto. El multiplicador de velocidad y el post aquí. Estado. Bien. Perdí el contexto. Veamos aquí. Así que tenemos el multiplicador de velocidad aquí que cambia. Eso debería estar funcionando. Tipografía. Post creado. ¿Lo pasamos? No, no lo dimos aquí. El multiplicador de velocidad aquí. Así que verificamos si es post o no. Post. No hacer nada. Sin cambios. No es post. El valor será tomado y los planetas van a girar con la multiplicación elegida para la velocidad. Bien. Estilo de botón. Bien. Necesito crear el estilo del botón. Creé el CSS aquí solo para hacerlo en un lugar diferente y volver a él. Sí. Así que solo el estilo del botón que faltaba. Intentaré cambiar el valor de la velocidad. Se está volviendo más lento. ¿Verdad? Así que elegiría una velocidad más lenta. Velocidad normal. Multiplicaciones. Dos, cinco y más. Va a ser divertido en realidad. Sí. Podemos jugar. Eso es todo. Todavía podemos hacer clic en cada elemento o cada planeta y obtener información sobre él aquí. Podemos añadir más CSS. Lo que falta ahora son las lunas. Vamos a crear algunas lunas. La luna es una forma esférica. Forma esférica normal. Así que, podemos añadir más CSS. Obtendremos información sobre ello del archivo JSON de los planetas.

Bien. Así que, mapearemos las lunas. Así que, esto es todo. Y lo añadiré al grupo junto al mesh del planeta. Volviendo al componente del planeta aquí, el mismo mesh del planeta. Importaré la luna. Sí. Y necesito dar la información de las lunas desde las apps. Si ves aquí, ya está dibujado. Y están girando. Puedes ver que Júpiter tiene dos lunas. Si seleccionamos la Tierra. Esta es la Tierra, solo una luna, etcétera. Veamos aquí. No está activo aquí. Creo que eso es todo. Para desplegar esto, si quieres ver los resultados, voy a crear. No estoy seguro. Creo que tengo todo según lo planeado aquí. Mm-hmm. Totalmente lo mismo. ¿Verdad? Instrucciones y tenemos los assets aquí. Así que, estamos bien. Voy a desplegar esto ahora mismo. Mm-hmm. Pasemos al proyecto actual. No este. Conseguiré esto. Comenzaré con la imagen. Mm-hmm. Correcto. Añadiré todo. Y. Necesito hacer esto. Crearé un repositorio público. Puedes tener acceso a esto. Ya tengo este nombre. Bien. Público. Perfecto. Revisaré mi. Sí, este. Así que, este es mi código. Puedes revisar. Así que, esto es lo mismo. Y añadiré esto a mi código. Como dije. Tengo otro repositorio. También es público. Es el código que creé primero.

Para los proyectos. Y sí. Disfruta. Gracias. Que tengas un buen día. Gracias. Gracias. Sí. Así que, mantente en contacto. Estoy disponible en LinkedIn. Puedes poner mi nombre. Me encontrarás. Definitivamente puedes. Pregúntame cualquier cosa. Gracias.

React Advanced

React Advanced 2025

Gamified 3D Solar System Explorer: An Interactive Learning Journey with Three.js

Gamified 3D Solar System Explorer: Un Viaje de Aprendizaje Interactivo con Three.js

Huda Motarib presenta un explorador del sistema solar 3D gamificado usando 3JS y React TreeFiber. La masterclass se centra en crear entornos de aprendizaje interactivos para la educación STEM, enfatizando experiencias inmersivas y ejemplos de codificación práctica. Discute técnicas de optimización para React3 Fiber, incluyendo cambios de valor directo para la rotación de mallas y animación eficiente. Cubre escalado de planetas, interacción del usuario, órbitas realistas, detalles interactivos de planetas, creación de lunas y estrategias de despliegue.

Crea experiencias educativas XR inmersivas a través de renderizado 3D declarativo con esta masterclass avanzada. Aprovecha la arquitectura basada en componentes de React Three Fiber para construir un explorador del sistema solar gamificado que presenta mecánicas orbitales dinámicas, raycasting interactivo y optimizaciones de WebGL. Domina técnicas críticas para el rendimiento, incluyendo la implementación de InstancedMesh, gestión de estado reactiva e integración de WebXR mientras creas visualizaciones STEM atractivas. Esta masterclass conecta conceptos de física teórica con desarrollo práctico de front-end, demostrando cómo Three.js puede transformar contenido educativo a través de paradigmas de computación espacial.Agenda:<ol><li>Introducción a React Three Fiber y Three.js: Configuración del entorno del proyecto</li><li>Construcción de la Escena del Sistema Solar: Creación de planetas, órbitas y fondos espaciales con animaciones</li><li> Interactividad y Gamificación: Raycasting para selección e interacción de objetos</li><li>Optimización del Rendimiento: Uso de InstancedMesh para renderizado eficiente</li><li>Integración de WebXR: Habilitación de experiencias AR/VR en el navegador</li></ol>

Houda Mouttalib

AI Coding Summit

I'm attending AI Coding Summit with 5k other participants to learn how AI transforms software development and stay up to date with the latest AI tools - get your free remote ticket and join me there!

AI Coding Summit 2026

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 & 15 great speakers #deno #cloudflare #awscloud

Node Congress 2026

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 2026

React Summit

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

#react #reactjs

Gamified 3D Solar System Explorer: Un Viaje de Aprendizaje Interactivo con Three.js

Comments

Available in other languages: