Rect
Rect es una forma con bordes redondeados calculada por SDF en el shader. Dibuja un solo mesh, sin geometría extra.
Uso
<Rect width={200} height={200} radius={20} color="#1d1d1e" x={-150} />Referencia de props
| Prop | Tipo | Default | Rango | Descripción |
|---|---|---|---|---|
width | number | requerido | | Ancho en píxeles (= unidades de mundo con cámara ortográfica 1:1) |
height | number | requerido | | Alto en píxeles |
radius | number | — | | Radio de esquinas en píxeles. Máximo efectivo: min(width, height) / 2 |
color | string | — | | Color CSS hex o nombre. Ej: '#1a1a2e', 'white' |
opacity | number | — | 0..1 | Opacidad global |
softness | number | — | | Suavidad del borde en píxeles (anti-aliasing). Valores bajos = bordes más nítidos pero con posible aliasing. Recomendado: 1.0–2.0 |
x | number | — | | Posición X en coordenadas de mundo (centro del rect) |
y | number | — | | Posición Y en coordenadas de mundo (centro del rect) |
z | number | — | | Posición Z para ordenamiento de capas. Z mayor = más cerca de la cámara (se renderiza encima). |