Un objeto Three.js que puede orbitar

Ya escribí cuándo elegiría Three.js frente a Pixi.js, y por qué un canvas en una URL de negocio es una factura, no un adorno. Eso era una decisión. Esto es el objeto. La escena encima de este párrafo es el mismo patrón que entregaría en una ficha de producto: una isla, perezosa, desechable, y la frase que está leyendo sigue en el documento.

Arrastre para orbitar. Cambie el nudo por un cristal o un anillo. Vidrio, cromo, brasa. Ese es el trabajo comercial: un SKU que el cliente puede sostener, no un carrusel de PNG con tres ángulos. Sin GLTF. Sin un sofá de 40 MB. Geometría procedural, un material físico, un environment map, bloom con presupuesto, partículas que paran cuando deja el viewport.

1. Qué está mirando de verdad

Un nudo toroidal, un icosaedro, un toro. Three.js los pinta como meshes. El vidrio es MeshPhysicalMaterial: transmission, thickness, IOR, iridescence. El cromo es metalness 1 y un roughness tenso. La brasa es emissive: la forma barata de que un SKU en modo noche se sienta caliente sin otra luz. Alrededor, una nube de puntos en ShaderMaterial: no puntos DOM, no una librería de partículas. Un draw call.

El vidrio sin environment es una mancha gris. RoomEnvironment más PMREM da al mesh algo que refractar, para que la transmission se lea como volumen, no como un bug. El bloom es UnrealBloomPass en un composer, más débil en tema claro, más débil en el teléfono. Limito devicePixelRatio. Bajo el recuento de partículas si hardwareConcurrency es bajo. Esa es la diferencia entre una demo que sobrevive al portátil de un recruiter y una que cocina un Android de gama media en el metro.

2. La isla, no la home

En el servidor no hay WebGL. Esta página es un static export. El HTML del artículo está en el first paint. La escena es una isla cliente: IntersectionObserver con root margin, luego un import dinámico de three, luego un renderer. Si nunca llega hasta aquí, no descarga el motor. Si se va, el bucle cede. En el unmount hago dispose de geometrías, materiales, composer, PMREM, renderer. Navegue a otro lado en esta app y el contexto GPU no se filtra al artículo siguiente.

No puse esto en la home. Un hero 3D ansioso pelea con LCP y luego roba INP. Un recruiter puede esperar un scroll. Un cliente en la URL del producto puede esperar el objeto que vino a tocar. No puede esperar un canvas que bloqueó el título. Reduced motion para el auto-rotate y la deriva de partículas; el drag sigue, porque es una elección, no una animación.

• Texto y título en el HTML de servidor. El canvas no es superficie para el crawler.
• Arranque en intersection, no al cargar la ruta.
• Dispose en el unmount. Pausa fuera de pantalla. Respetar prefers-reduced-motion.

3. Aquí Three.js crudo. En la app de producto, React Three Fiber

En esta página cableé el motor yo para que la isla sea un chunk y el bucle sea obvio: create, tick, dispose. En una app Next.js donde la escena debe hablar con el estado del carrito, un color picker y un flag de stock, usaría React Three Fiber. Misma GPU, un grafo de escena en el árbol de React, menos trampas en el unmount. El error es adoptar R3F para girar un cubo, o evitarlo cuando diez meshes deben seguir a Redux. Tome el wrapper cuando el producto ya piensa en componentes.

4. Cuándo lo entregaría a un cliente

Un SKU de joyería. Una botella. Un dispositivo cuyos colores son la venta. Arquitectura que hay que recorrer, no cuatro JPEG. No una home de marketing que debía «sentirse premium» — ese brief sigue siendo CSS y GSAP. No un rodillo de slot: eso es Pixi. Si el objeto es un GLTF de fábrica, lo mantengo flaco, añado LOD y un póster mientras arranca. Si WebGL no inicia, la página sigue teniendo fotos y un precio. El canvas es el mejor camino al SKU, nunca el único.

Conclusión: muestre el objeto, conserve el documento

Los equipos eligen Three.js cuando el cliente convierte orbitando, no leyendo. Aun así deben elegir un documento: título, precio, legal, una imagen de respaldo. Entrego esa separación como ingeniera web senior — islas Next.js, presupuesto GPU topeado, GSAP donde la página sigue siendo página. Si el brief es un SKU que hay que sostener en la pestaña, escriba por el formulario el objeto, el mix de dispositivos y si la misma URL debe posicionar. No empezaremos tirando un canvas a la home «para que el portfolio explote».