Configuración

Todas las opciones del constructor, sus valores exactos y si pueden cambiar durante la ejecución.

createFlagCloth() acepta un objeto FlagClothOptions. El componente de React acepta las mismas opciones salvo container, porque crea ese elemento por ti. Los grupos anidados son parciales: proporciona solo los valores que quieras cambiar.

import type { FlagClothOptions } from 'flag-cloth';

Valores obligatorios

Opción	Tipo	Predeterminado	Función
`container`	`HTMLElement`	obligatorio	Elemento que contiene y define el tamaño del canvas. Solo API vanilla.
`texture`	`string \| TexImageSource \| null`	obligatorio	URL, fuente de imagen lista para el navegador o `null` para renderizar `material.baseColor`.

Topología y ciclo de vida

Opción	Tipo	Predeterminado	Función
`width`	`number`	`3`	Ancho de la tela en unidades de simulación, no píxeles CSS.
`height`	`number`	`2`	Alto de la tela en unidades de simulación, no píxeles CSS.
`segments.x`	`number`	`32`	Cantidad de celdas horizontales. Hay `x + 1` columnas de partículas.
`segments.y`	`number`	`20`	Cantidad de celdas verticales. Hay `y + 1` filas de partículas.
`attachment`	`Attachment`	`'left'`	Borde, esquina, borde parcial, puntos personalizados o `'none'`.
`autoStart`	`boolean`	`true`	Inicia la instancia inmediatamente y programa su bucle de animación propio.

Cambiar width, height o segments reconstruye la topología, pero conserva el canvas, el contexto WebGL2, el renderizador, los observadores y los controladores de eventos. Cambiar attachment solo reconstruye la máscara de puntos fijos. Consulta Sujeciones para ver todas las formas aceptadas.

Viento

Propiedad	Tipo	Predeterminado	Función
`direction`	`[number, number, number]`	`[1, 0.08, 0.3]`	Dirección en el espacio del mundo, normalizada internamente. Un vector cero desactiva el viento direccional.
`strength`	`number`	`7`	Velocidad base del viento.
`turbulence`	`number`	`0.35`	Intensidad de las ráfagas con ruido y de la variación lateral.
`gustFrequency`	`number`	`0.5`	Velocidad de variación temporal del campo de viento.
`spatialScale`	`number`	`0.8`	Frecuencia de variación espacial sobre la tela.
`aerodynamicCoefficient`	`number`	`0.35`	Multiplicador que convierte la presión de cada triángulo en fuerza sobre las partículas.

Simulación

Propiedad	Tipo	Predeterminado	Función
`damping`	`number`	`0.985`	Velocidad conservada durante un intervalo de 1/60 de segundo.
`gravity`	`[number, number, number]`	`[0, 0, 0]`	Aceleración en el espacio del mundo. Está desactivada por defecto para una bandera convencional.
`fixedTimeStep`	`number`	`1 / 60`	Paso estable del acumulador en segundos.
`maxFrameDelta`	`number`	`0.1`	Intervalo máximo entre frames aceptado por el acumulador, en segundos.
`substeps`	`number`	`2`	Subdivisiones de integración por paso fijo. Se redondea hacia abajo y nunca puede ser menor que 1.
`constraintIterations`	`number`	`6`	Pasadas de las restricciones estructurales, diagonales y de flexión por subpaso.
`structuralStiffness`	`number`	`1`	Rigidez de las distancias horizontales y verticales.
`shearStiffness`	`number`	`0.9`	Rigidez de las distancias diagonales.
`bendStiffness`	`number`	`0.4`	Rigidez de las distancias de dos celdas.
`maxCorrection`	`number`	`0.25`	Corrección máxima por restricción. Usa `0` para desactivar el límite.
`mass`	`number`	`1`	Masa total de la tela, independiente de la densidad de la cuadrícula.

El solver limita la rigidez entre 0 y 1 y la convierte en una corrección independiente de la cantidad de iteraciones. Consulta Simulación de tela antes de aumentar la resolución o el trabajo del solver.

Interacción con el puntero

Propiedad	Tipo	Predeterminado	Función
`enabled`	`boolean`	`true`	Habilita el arrastre con ratón, lápiz y tacto mediante Pointer Events.
`touchAction`	`'pan-y' \| 'pan-x' \| 'none' \| 'auto'`	`'pan-y'`	Política táctil del navegador. El valor predeterminado conserva el desplazamiento vertical y el arrastre horizontal de la tela.
`dragRadius`	`number`	`1`	Radio en la cuadrícula alrededor de la partícula seleccionada.
`dragStiffness`	`number`	`0.9`	Intensidad de la restricción posicional temporal.
`maxDragDistance`	`number`	`4`	Movimiento máximo desde el punto inicial. Usa `0` para no limitarlo.
`allowPinned`	`boolean`	`false`	Permite seleccionar temporalmente partículas fijas.
`releaseImpulse`	`[number, number, number]`	`[0, 0, 0]`	Impulso de velocidad aplicado al soltar, en el espacio del mundo.

Renderizador

La tabla muestra el perfil quality. El perfil performance cambia maxPixelRatio a 1, shadows a false y shadingUpdateInterval a 2. Los valores explícitos proporcionados junto al perfil tienen prioridad.

Propiedad	Tipo	Predeterminado	Función
`preset`	`'quality' \| 'performance'`	`'quality'`	Selecciona un perfil de renderizado probado.
`alpha`	`boolean`	`true`	Solicita un contexto WebGL2 con alfa. Solo durante la construcción.
`antialias`	`boolean`	`true`	Solicita antialiasing multisample del navegador. Solo durante la construcción.
`desynchronized`	`boolean`	`false`	Solicita un contexto desincronizado cuando sea compatible. Solo durante la construcción.
`powerPreference`	`WebGLPowerPreference`	`'high-performance'`	Preferencia de GPU al crear el contexto. Solo durante la construcción.
`maxPixelRatio`	`number`	`1.5`	Limita la resolución interna; los valores menores que `0.5` se ajustan.
`textureFiltering`	`'linear' \| 'nearest'`	`'linear'`	Modo de muestreo de la textura.
`transparent`	`boolean`	`true`	Limpia con alfa en lugar de `backgroundColor`.
`backgroundColor`	`string`	`'transparent'`	Color CSS utilizado cuando `transparent` es false.
`shadows`	`boolean`	`true`	Habilita la sombra suave de silueta con nueve muestras.
`shadingUpdateInterval`	`number`	`1`	Recalcula las normales cada N frames renderizados.

alpha, antialias, desynchronized y powerPreference no aparecen en FlagClothUpdateOptions.renderer, porque cambiar un atributo del contexto WebGL requiere una nueva instancia.

Material

Propiedad	Tipo	Predeterminado	Función
`baseColor`	`string`	`'#f2f4f3'`	Color de la tela cuando `texture` es null.
`ambient`	`number`	`0.58`	Brillo mínimo del material.
`diffuse`	`number`	`0.55`	Intensidad de la iluminación direccional de los pliegues.
`specular`	`number`	`0.16`	Intensidad del reflejo en el perfil quality.
`shininess`	`number`	`18`	Concentración del reflejo.
`foldContrast`	`number`	`0.42`	Contraste claro/oscuro de los pliegues.
`shadowColor`	`string`	`'rgba(0, 0, 0, 0.3)'`	Color CSS de la sombra de silueta.
`shadowBlur`	`number`	`18`	Radio de muestreo de la sombra en píxeles CSS.
`shadowOffsetX`	`number`	`10`	Desplazamiento horizontal de la sombra en píxeles CSS.
`shadowOffsetY`	`number`	`12`	Desplazamiento vertical de la sombra en píxeles CSS.

Iluminación

Propiedad	Tipo	Predeterminado	Función
`enabled`	`boolean`	`true`	Habilita la iluminación de los pliegues.
`intensity`	`number`	`1`	Multiplicador general de la luz direccional.
`direction`	`[number, number, number]`	`[-0.4, 0.7, 1]`	Dirección de la luz, normalizada internamente.

Cámara

Propiedad	Tipo	Predeterminado	Función
`fov`	`number`	`40`	Campo de visión vertical en grados.
`near`	`number`	`0.01`	Distancia del plano de recorte cercano.
`far`	`number`	`100`	Distancia del plano de recorte lejano.
`position`	`[number, number, number] \| null`	`null`	Posición de la cámara. `null` encuadra la tela automáticamente.
`lookAt`	`[number, number, number]`	`[0, 0, 0]`	Objetivo de la cámara en el espacio del mundo.

Visibilidad y depuración

Propiedad	Tipo	Predeterminado	Función
`visibility.pauseWhenOffscreen`	`boolean`	`true`	Pausa mediante `IntersectionObserver` cuando el contenedor está fuera del viewport.
`visibility.pauseWhenDocumentHidden`	`boolean`	`true`	Pausa cuando `document.visibilityState` está oculto.
`debug`	`boolean \| Partial<DebugOptions>`	`false`	Habilita o configura el panel opcional.
`debug.enabled`	`boolean`	`false`	Crea el panel de depuración.
`debug.updateInterval`	`number`	`500`	Intervalo de actualización en milisegundos, con un mínimo de 100.

debug: { updateInterval: 250 } no habilita el panel por sí solo; incluye enabled: true o utiliza debug: true.

Integración avanzada

Propiedad	Tipo	Predeterminado	Función
`canvas`	`HTMLCanvasElement`	creado por la biblioteca	Proporciona un canvas propiedad del usuario.
`context`	`WebGL2RenderingContext`	creado por la biblioteca	Proporciona un contexto propio; se utiliza su canvas si no se indica `canvas`.
`externalAnimationLoop`	`boolean`	`false`	Desactiva la programación interna de `requestAnimationFrame`.

advanced y autoStart son opciones de construcción y no forman parte de FlagClothUpdateOptions.

Actualizaciones durante la ejecución

await flag.setOptions({
  attachment: { points: [[0, 0], [0, 10], [4, 4]] },
  wind: { strength: 11 },
  interaction: { enabled: false },
  renderer: { preset: 'performance' },
});

setOptions() es asíncrono porque puede cargar una textura nueva. Los cambios de viento, sujeción, simulación, interacción, renderizador, material, iluminación, cámara, visibilidad y depuración no recrean el contexto WebGL2.

Configuración

En esta página