Implementación básica del mundo 3d con Three.js
Prueba concepto del mundo en un segundo paso atado al scroll con texto flotante
Animación de cámara entre países en base a clicks.
Falta resolver que sea en base al scroll y que cuando pasás de un lado a otro del mundo haga la rotación correcta en vez de pasar por adentro.
Acercamiento al diseño de Figma.
Falta resolver:
- Setear correctamente las luces y lograr el estilo adecuado (junto con @Flor)
- Lograr que la rotación de la cámara no afecte la iluminación del mundo
- Bloquear la rotación vertical del mundo
- Detectar la IP del usuario y dirigirlo al país
- Agregar Nav a la maqueta
Nuevo diseño de Hero:
- Globo girando con mockup en el frente.
- Transición al segundo scroll:
- Efecto Parallax en algunos elementos
- Anima el mundo a un estado fullscreen
- Anima la cámara a un país determinado
Falta implementar:
- Dirigir al país geolocalizado en el segundo scroll (Ahora está fijo Mexico)
- Marcar el país geolocalizado con el ripple
- Vinculo entre UI del mockup y mundo: Resaltar el país de la UI que se está mostrando.
En base a la iteración anterior se implementó:
- Nuevo diseño del segundo scroll con Copy.
- Geolocalización en el segundo scroll.
- Se dejó un fallback a LATAM en caso que no se pueda obtener la location del usuario.
- Ripple effect para mostrar el punto geolocalizado.
Falta implementar:
- Conexión entre países (arcos) en el segundo scroll
- Que la animación entre las secciones sea scroll-based y no en base a un Waypoint
- Vinculo entre UI del mockup y mundo