HISTORIA: LA CRÓNICA DEL JABORG

Capítulo 1: El Gran Parche Económico
En el futuro distópico de Arg-2077, el Gran Colapso Económico ha sumido a la sociedad en una anarquía neoliberal. Una entidad conocida como El Jaborg, una fusión de cyborgs y burócratas, ha tomado el control, imponiendo una única ley: la pastilla roja, un implante neural que suprime toda disidencia. Solo un grupo de insurgentes, liderado por la legendaria Francachala, se opone. El asalto a su búnker es el único camino hacia la libertad.

Capítulo 2: El Mercado de las Almas
Al adentrarte en el búnker, te enfrentas al primer guardián: **Toto Caputo**. Su objetivo no es aniquilarte, sino desmoralizarte con cifras falsas y teorías económicas que buscan tu rendición. Debes responder correctamente a sus preguntas para seguir adelante, pero ten cuidado, una respuesta errónea te hará perder la cordura... y la vida.

Capítulo 3: El Maletín del Engaño
El siguiente obstáculo es **Guillermo Francos**, el guardián de la diplomacia fallida. Te atacará con proyectiles en forma de maletines diplomáticos, cada uno con una propuesta más absurda que la anterior. Su poder radica en su habilidad para confundirte con jerga burocrática sin sentido. Debes abrirte camino a través de su laberinto de mentiras para encontrar la verdad que te permita derrotarlo.

Capítulo 4: El Unicornio de Cristal
**Lilia Lemoine**, la reina de la desinformación, te espera en el siguiente nivel. Su magia se basa en la polarización y la pseudociencia. Te arrojará unicornios de cristal que brillan con falsas promesas. Si los tocas, te debilitarás instantáneamente. Debes concentrarte en la verdadera amenaza y evitar sus engaños para seguir con vida.

LA BRANQUEOLOGÍA DEL EFECTO VISUAL

El efecto visual que observas en la cabecera es un campo de partículas 3D dinámico e interactivo. No es un video ni una imagen animada, sino una escena tridimensional generada en tiempo real directamente en tu navegador. El objetivo es crear un fondo inmersivo y tecnológicamente sofisticado que simula un viaje a través de un cúmulo de estrellas o una nebulosa digital.

1. La Tecnología Principal: Three.js

El corazón de esta animación es **Three.js**, una de las bibliotecas de JavaScript más potentes y populares para crear gráficos 3D en la web. Three.js simplifica el proceso de trabajar con **WebGL**, una tecnología web que permite a los navegadores renderizar gráficos 3D complejos utilizando la aceleración de la tarjeta gráfica (GPU) del ordenador, lo que garantiza un rendimiento fluido.

2. Componentes Clave de la Escena 3D (Según el código)

El código construye la animación utilizando los componentes fundamentales de Three.js:

• **Scene (Escena):** Es el universo virtual donde todos los objetos, luces y cámaras existen. Es el contenedor principal.
• **Camera (Cámara):** Es el punto de vista del espectador. En este caso, se usa una **PerspectiveCamera**, que imita cómo ve el ojo humano (los objetos más lejanos parecen más pequeños).
• **Renderer (Renderizador):** Es el motor que "dibuja" la escena capturada por la cámara en el elemento `` del HTML. Usa WebGL para hacer este trabajo de forma eficiente.
• **Geometry (Geometría):** Define la forma de los objetos. Aquí no se usa una forma compleja, sino una **BufferGeometry** que almacena de manera muy eficiente las coordenadas {x, y, z} de miles de puntos. En el código, un bucle crea 15,000 partículas y asigna a cada una una posición aleatoria en un espacio tridimensional, formando una nube esférica.
• **Material (Material):** Define la apariencia de la geometría (color, textura, opacidad, etcétera). Se utiliza un **PointsMaterial**, diseñado específicamente para renderizar partículas. Las propiedades clave son:
  • **color:** Se le da un tono morado (0x8c3cff).
  • **size:** Define el tamaño de cada partícula.
  • **transparent: true:** Permite que las partículas sean translúcidas.
  • **blending: THREE.AdditiveBlending:** Este es un truco visual muy importante. Cuando las partículas se superponen, sus colores se suman. Esto crea el efecto de brillo intenso en las zonas más densas, similar a una nebulosa.
• **Points (Objeto de Puntos):** Es el objeto final que se añade a la escena. Es la combinación de la Geometry (las 15,000 posiciones) y el Material (cómo se ven esas posiciones).

3. Dinamismo e Interactividad

El efecto no es estático gracias a la animación y la interacción con el usuario:

• **Bucle de Animación (animate):** La función `animate` se ejecuta en un bucle infinito (`requestAnimationFrame`), unas 60 veces por segundo. En cada "fotograma":
  • **Rotación Constante:** La línea `particles.rotation.y = time;` hace que todo el sistema de partículas rote suavemente sobre su eje Y. Esto le da un movimiento de fondo constante y sutil, evitando que la escena se vea estática.
• **Seguimiento del Ratón:** El código detecta la posición del puntero del ratón en la pantalla (`onDocumentMouseMove`).
• **Movimiento de la Cámara (Parallax):** La interactividad principal ocurre aquí. La posición de la cámara se ajusta sutilmente en cada fotograma para moverse hacia la posición del ratón. El código `camera.position.x += (mouseX - camera.position.x) * 0.05;` crea un efecto de suavizado (easing), de modo que la cámara no salta bruscamente, sino que se desliza con inercia. Esto genera un efecto parallax: al mover el ratón, sientes que estás cambiando tu punto de vista dentro del espacio 3D, dando la impresión de que las estrellas más cercanas se mueven más rápido que las lejanas.

En resumen, el efecto combina la potencia de Three.js para renderizar miles de partículas en 3D con una rotación constante para darle vida y una interacción sutil con el ratón que mueve la cámara, creando una experiencia inmersiva, elegante y tecnológicamente avanzada que sirve como telón de fondo perfecto para la acción principal: la partida en juego.