¿Qué es Three.js?
Es una biblioteca de JavaScript que facilita el uso de WebGL para renderizar gráficos 3D en el navegador.
Flashcards con solución de Animaciones 3D en la Web
¿Cuáles son los tres componentes esenciales para crear una escena en Three.js?
La escena (Scene), la cámara (Camera) y el renderizador (Renderer).
¿Qué función cumple el 'Renderer' en Three.js?
Convierte la escena 3D y la cámara en gráficos visibles dentro de un elemento canvas de HTML.
¿Qué tipo de cámara simula la visión humana con profundidad?
PerspectiveCamera.
¿Qué define la forma de un objeto 3D en Three.js?
La Geometría (Geometry).
¿Qué define la apariencia visual, como el color o la textura, de un objeto en Three.js?
El Material.
¿Qué es un 'Mesh' en Three.js?
Es un objeto que combina una geometría y un material para ser añadido a la escena.
¿Qué formato de archivo se recomienda para cargar modelos 3D en Three.js?
GLTF o GLB.
¿Qué luz ilumina todos los objetos de la escena por igual sin una dirección específica?
AmbientLight.
¿Qué utilidad permite al usuario rotar y hacer zoom en la escena con el ratón?
OrbitControls.
¿Para qué sirve el método `gsap.to()`?
Anima un objeto desde su estado actual hacia los valores definidos en la función.
¿Qué hace el método `gsap.from()`?
Anima un objeto desde valores específicos hacia su estado inicial actual.
¿Cómo se define un cambio de estado instantáneo en GSAP sin animación?
Usando el método `gsap.set()`.
¿Qué es un 'Timeline' en GSAP?
Es una herramienta para encadenar múltiples animaciones en una secuencia controlada.
¿Qué propiedad de ScrollTrigger vincula el progreso de la animación directamente a la posición del scroll?
La propiedad `scrub`.
¿Qué hace la propiedad `pin: true` en una configuración de ScrollTrigger?
Mantiene el elemento fijo en el viewport durante la duración de la animación.
¿Qué significa el parámetro `start: "top top"` en ScrollTrigger?
La animación comienza cuando la parte superior del elemento coincide con la parte superior del viewport.
¿Cuál es la función del parámetro `markers: true` en ScrollTrigger?
Muestra guías visuales de depuración en la página para identificar los puntos de inicio y fin.
En un Timeline de GSAP, ¿qué significa el símbolo `<` en la posición de una animación?
Indica que la animación debe comenzar al mismo tiempo que la animación anterior.
¿Qué es React Three Fiber (R3F)?
Es un renderizador de React para Three.js que permite escribir escenas 3D usando componentes declarativos.
¿Qué componente de R3F actúa como el punto de entrada para la escena 3D?
El componente `<Canvas>`.
¿Qué hook de R3F se utiliza para ejecutar animaciones o lógica en cada frame del bucle de renderizado?
El hook `useFrame`.
¿Por qué se usa `useRef` al animar objetos en React Three Fiber?
Para obtener una referencia directa al objeto 3D y modificar sus propiedades sin provocar re-renders de React.
¿Qué librería es una extensión de R3F que ofrece componentes listos para usar como 'Stars' o 'OrbitControls'?
Drei.
¿Qué es Prismic?
Es un CMS (Sistema de Gestión de Contenidos) basado en API que permite modelar y editar contenido dinámico.
¿Qué es un 'Slice' en el contexto de Prismic?
Es una sección de contenido modular y reutilizable que los editores pueden añadir y organizar en una página.
¿Qué herramienta de Prismic permite modelar los datos de los Slices localmente?
Slice Machine.
¿Qué componente se utiliza para mostrar campos de texto enriquecido desde Prismic en una aplicación React?
El componente `<PrismicRichText>`.
¿Qué utilidad tiene el archivo `tailwind.config.js` en un proyecto?
Permite personalizar el sistema de diseño, como fuentes, colores y animaciones de Tailwind CSS.
¿Qué hace la clase `overflow-x-hidden` de Tailwind CSS?
Oculta cualquier contenido que se desborde horizontalmente fuera del contenedor.
¿Qué es un 'Vertex Shader'?
Es un programa que se ejecuta para cada vértice de una geometría, determinando su posición en el espacio 3D.
¿Qué es un 'Fragment Shader'?
Es un programa que se ejecuta para cada píxel de una superficie, determinando su color final.
¿Qué es un 'Uniform' en GLSL?
Es una variable global que se pasa desde la CPU a la GPU y que permanece constante durante un frame.
¿Qué función de GLSL se usa para interpolar linealmente entre dos valores?
La función `mix()`.
¿Qué significan las siglas TSL en Three.js?
Three Shader Language.
¿Cuál es la principal ventaja de WebGPU frente a WebGL?
Ofrece un acceso más eficiente a la GPU y permite el uso de Compute Shaders para cálculos masivos.
En Three.js con WebGPU, ¿cómo se debe inicializar el renderizador?
Es un proceso asíncrono que requiere el uso de `await renderer.init()`.
¿Qué es un 'Compute Shader'?
Es un shader especializado en realizar cálculos generales en la GPU, como simulaciones de física o partículas.
¿Qué librería se usa para suavizar el scroll en una página web junto con GSAP?
ScrollSmoother.
¿Qué utilidad tiene la función `smoothstep(edge0, edge1, x)` en shaders?
Genera una transición suave entre 0 y 1 basada en los umbrales definidos por los bordes.
¿Cómo se llama el efecto en GSAP que permite animar elementos de forma escalonada?
Stagger.
¿Qué define la 'intensidad' de un movimiento en una animación (por ejemplo, lineal, rebote)?
El `ease` (suavizado).
¿Qué es el 'UV mapping'?
Es el sistema de coordenadas 2D que indica cómo se proyecta una textura sobre una geometría 3D.
¿Cuál es la diferencia entre un 'Page Type' simple y uno reutilizable en Prismic?
El simple solo permite crear una instancia (como una Home), mientras que el reutilizable permite muchas (como blogs).
¿Qué hace el plugin `SplitText` de GSAP?
Divide automáticamente el texto en caracteres, palabras o líneas para animarlos individualmente.
¿Qué es 'Raycasting' en Three.js?
Es una técnica para detectar qué objetos 3D intersectan con una línea proyectada (comúnmente desde el ratón).
¿Qué hook de React se activa después de que el DOM ha sido actualizado pero antes del pintado del navegador?
El hook `useLayoutEffect`.
¿Qué utilidad ofrece el componente `Environment` de Drei?
Permite añadir mapas de iluminación global (HDRI) a la escena de forma sencilla.
¿Qué propiedad de CSS permite que un elemento canvas ocupe todo el fondo sin afectar el scroll?
La propiedad `position: fixed`.
¿Qué es un 'Mock' en Prismic Slice Machine?
Es una generación de datos de prueba aleatorios para visualizar un Slice antes de introducir contenido real.
¿Cuál es la unidad básica de medida en Three.js?
No tiene una unidad fija, pero generalmente se trata como 1 unidad = 1 metro.
¿Qué hace el 'Ambient Occlusion' en un material?
Simula sombras suaves en los rincones y grietas de un objeto donde la luz llega con dificultad.
¿Qué es un 'Skybox'?
Es un cubo grande o esfera que envuelve toda la escena para representar el horizonte o el cielo.
¿Qué componente de R3F se usa para cargar texturas de forma asíncrona?
El hook `useLoader` junto con `TextureLoader`.
En GSAP, ¿qué valor de `repeat` indica que la animación debe ser infinita?
$-1$.
¿Qué es la 'Normal Map' de un material?
Es una textura que simula detalles de relieve y rugosidad en la superficie sin añadir geometría real.
¿Qué hace la función `clamp(x, min, max)`?
Restringe un valor $x$ para que no sea menor que $min$ ni mayor que $max$.
¿Qué es el 'Frustum' de una cámara?
Es la región del espacio 3D que es visible para la cámara en un momento dado.
¿Qué es 'Fog' (Niebla) en Three.js?
Es un efecto que oscurece los objetos a medida que se alejan de la cámara para dar sensación de profundidad.
¿Cuál es la diferencia entre `MeshBasicMaterial` y `MeshStandardMaterial`?
El `Basic` no reacciona a la luz, mientras que el `Standard` utiliza un modelo físico (PBR) que sí lo hace.
¿Qué es el 'Alpha Channel'?
Es el canal que define la transparencia de un píxel o material.
¿Qué librería de física es mencionada como alternativa para integrar con Three.js?
Cannon-es o Rapier.
¿Qué es el 'Z-index' en el contexto de capas HTML sobre un canvas 3D?
Determina el orden de apilamiento de los elementos; un valor mayor coloca el elemento al frente.
¿Qué es un 'Sprite' en Three.js?
Es un plano 2D que siempre mira hacia la cámara, útil para partículas o etiquetas.
¿Qué hook de R3F devuelve el estado global de la escena, incluyendo la cámara y el tamaño?
El hook `useThree`.
¿Qué es un 'Callback' en una animación de GSAP?
Una función que se ejecuta en un momento específico, como `onComplete` o `onStart`.
¿Qué hace el componente `Float` de la librería Drei?
Añade un movimiento de flotación suave y automático a sus componentes hijos.
¿Qué es 'Backface Culling'?
Es una optimización que evita renderizar las caras de un objeto que están mirando hacia el lado opuesto de la cámara.
¿Cómo se llama la extensión de Chrome para depurar escenas de Three.js?
Needle Inspector (o Three.js Editor Extension).
¿Qué es la 'Interpolación' en animación?
El proceso de calcular valores intermedios entre dos puntos clave (Keyframes).
¿Para qué sirve el comando `npx gltfjsx`?
Convierte un archivo GLTF en un componente de React listo para ser usado en R3F.
Página 1 / 1