Cómo poner un logo 3D interactivo en tu sitio web

¿Qué necesitas para poner un logo 3D interactivo en un sitio web?

Cinco piezas. A la mayoría de los logos 3D que fallan les faltan las dos últimas.

El trabajo se divide limpiamente: el modelado se hace una vez en una herramienta 3D, y la página solo carga un archivo terminado. Si todavía no creaste el modelo, convertir un logo plano en 3D explica la extrusión y el bisel en Blender.

¿Cómo conviertes un logo en un modelo GLB para la web?

Empieza con el logo vectorial, dale profundidad en una herramienta 3D y luego exporta glTF. El manual de three.js dice: "Siempre que sea posible, recomendamos usar glTF (GL Transmission Format). Las versiones .GLB y .GLTF del formato tienen buena compatibilidad." Khronos, que mantiene el formato, señala que el núcleo JSON "puede almacenarse en un solo archivo glTF binario (.glb)", que es la forma más fácil de alojar.

El exportador glTF de Blender tiene algunas reglas que importan para los logos:

• Convierte las curvas en mallas. Un SVG importado en Blender llega como curvas, y el exportador dice que "las curvas y otros datos que no son mallas no se conservan, y deben convertirse en mallas antes de exportar."
• Usa el Principled BSDF. El exportador lee de él el color base, el metallic y el roughness. Un Coat distinto de cero agrega la extensión KHR_materials_clearcoat y Transmission agrega KHR_materials_transmission.
• Cuidado con el vidrio. La documentación de Blender advierte que la transmisión "es compleja de implementar para los motores de render en tiempo real" y que la compatibilidad con la extensión "todavía no está generalizada." El GLTFLoader de three.js sí la incluye como compatible, pero pruébala en un teléfono.
• Las luces no se transfieren. "El tipo de luz Area y la iluminación World de Blender no son compatibles con glTF y se ignorarán durante la exportación." Planea iluminar el logo en three.js.

Para mantener el archivo pequeño, three.js admite compresión de mallas Draco y texturas KTX2 a través del loader. La documentación de DRACOLoader dice que la geometría comprimida "puede ser bastante más pequeña, a costa de tiempo adicional de decodificación en el dispositivo del cliente," así que vale la pena más para mallas detalladas que para un símbolo extruido simple.

¿Cómo cargas e iluminas un logo 3D con three.js?

Crea un renderer con fondo transparente, carga el GLB y dale a la escena un environment map. El RoomEnvironment de three.js produce iluminación basada en imagen para materiales PBR sin tener que incluir un archivo HDR.

import * as THREE from "three";
import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
import { RoomEnvironment } from "three/addons/environments/RoomEnvironment.js";

const canvas = document.querySelector("#logo3d");
const renderer = new THREE.WebGLRenderer({ canvas, alpha: true, antialias: true });
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(30, 1, 0.1, 100);
camera.position.set(0, 0, 6);

const pmrem = new THREE.PMREMGenerator(renderer);
scene.environment = pmrem.fromScene(new RoomEnvironment()).texture;

const gltf = await new GLTFLoader().loadAsync("/logo.glb");
const logo = gltf.scene;
scene.add(logo);

Mantén alpha: true para que se vea el fondo de la página. Las buenas prácticas de WebGL de MDN explican que alpha: false hace que el navegador componga el canvas "como si fuera opaco."

Si no aparece nada, se aplica la lista de comprobación del manual de three.js: registra los errores del loader, "prueba a escalar el modelo hacia arriba o hacia abajo por un factor de 1000" y "prueba a agregar y posicionar una fuente de luz. El modelo puede estar oculto en la oscuridad."

¿Cómo haces que un logo 3D reaccione al puntero y al scroll?

Escucha pointermove, guarda un ángulo objetivo y mueve el logo una parte del camino hacia él en cada fotograma. Los pointer events cubren "un mouse, un lápiz/stylus o el tacto" con un solo conjunto de handlers, según MDN.

let targetX = 0, targetY = 0, last = 0;

window.addEventListener("pointermove", (e) => {
  targetY = ((e.clientX / innerWidth) * 2 - 1) * 0.35;  // radians, left/right
  targetX = ((e.clientY / innerHeight) * 2 - 1) * 0.2;  // radians, up/down
});

function frame(t) {
  const dt = last ? t - last : 16;
  last = t;
  const k = 1 - Math.exp(-dt / 120); // same easing at 60 Hz and 120 Hz
  logo.rotation.y += (targetY - logo.rotation.y) * k;
  logo.rotation.x += (targetX - logo.rotation.x) * k;
  renderer.render(scene, camera);
  requestAnimationFrame(frame);
}
requestAnimationFrame(frame);

El timestamp importa. MDN advierte que si no lo usas para medir el progreso, "la animación correrá más rápido en pantallas de alta frecuencia de actualización."

Scroll: lee la posición del scroll dentro del mismo loop de fotogramas y conviértela en un giro o una elevación suave mientras el logo está a la vista. El criterio Animation from Interactions de WCAG menciona el parallax y el movimiento activado por scroll como ejemplos típicos de movimiento que los usuarios deben poder desactivar, así que los efectos de scroll van detrás de la comprobación de movimiento reducido de abajo.

Táctil: los teléfonos no tienen un puntero en reposo. MDN señala que en dispositivos sin hover, los eventos enter y leave llegan con la pulsación y la liberación, así que el logo solo reacciona mientras hay un dedo apoyado. Dales a los usuarios táctiles un movimiento lento en reposo o una reacción al tocar, y no pongas touch-action: none en un canvas grande, o la página dejará de hacer scroll debajo de él.

¿Qué presupuesto de rendimiento debería tener un logo 3D?

No hay un número universal. web.dev define un presupuesto de rendimiento como "un conjunto de límites impuestos a métricas que afectan el rendimiento del sitio": define uno para el tamaño del GLB, el JavaScript que agrega three.js y el tiempo hasta que tu hero es visible, y luego mide contra él. Las palancas:

Para un logo, renderizar bajo demanda significa detener el loop de fotogramas cuando el logo llega al reposo y reiniciarlo con el siguiente movimiento del puntero. Los navegadores ya pausan requestAnimationFrame "en pestañas en segundo plano o en <iframe>s ocultos," así que solo tienes que manejar tú el caso en que se hizo scroll fuera de la vista.

La carga también importa. La lista de web.dev de elementos que cuentan para el Largest Contentful Paint incluye imágenes, pósters de video, imágenes de fondo y texto, y no menciona <canvas>. En la práctica, lo que se mide es tu imagen póster o tu titular, así que haz que el póster cargue rápido y carga three.js después.

¿Qué deberían ver los visitantes sin WebGL o con movimiento reducido?

El mismo logo, quieto. Renderiza un fotograma del modelo en su pose de reposo a WebP o PNG, muéstralo como un <img> normal con texto alternativo y cámbialo por el canvas solo cuando el modelo haya cargado.

• Sin WebGL. El manual de three.js muestra WebGL.isWebGL2Available() para comprobar la compatibilidad "antes de intentar renderizar algo." Si devuelve false, conserva el póster.
• Lectores de pantalla. MDN señala que el contenido del canvas "no se expone a las herramientas de accesibilidad," así que el nombre de la marca debe estar en el texto alternativo de la imagen o en texto cercano, no en el canvas.
• Movimiento reducido. prefers-reduced-motion te indica que el usuario "activó en su dispositivo el ajuste de movimiento reducido." El W3C incluye esta media query como técnica suficiente (C39) para WCAG 2.3.3.

const still = matchMedia("(prefers-reduced-motion: reduce)").matches;
if (!still && WebGL.isWebGL2Available()) {
  startLogo(); // load three.js and the GLB, then hide the poster
}

Hay más patrones para los ajustes de movimiento en animación accesible y movimiento reducido.

¿Cuándo son Spline o un video mejor opción que three.js?

La documentación de Spline (a noviembre de 2026) dice que el Viewer usa carga diferida por defecto, y carga el canvas "solo cuando el canvas es visible en la pantalla," puede seguir los eventos del mouse de forma global o solo dentro de su contenedor, y puede mostrar una imagen de sugerencia cuando nadie interactúa. La exportación de código cubre Vanilla JS, three.js, React, Next.js y react-three-fiber, pero "las animaciones y los eventos solo se habilitan al exportar a Vanilla js y React." Spline también "dibuja con WebGPU por defecto y recurre a WebGL automáticamente." Las ventajas y desventajas se comparan en Rive vs Spline.

Elige video cuando nada necesita reaccionar. Un video renderizado puede mostrar refracción y sombras suaves que son costosas en tiempo real. Para un fondo transparente necesitas dos archivos: WebM VP9 para Chrome y Firefox y HEVC en un MOV para Safari, con la fuente HEVC primero para que Safari la elija (el artículo de Jake Archibald explica por qué). Consulta video con fondo transparente en un sitio web.

¿Puedes tener un logo 3D interactivo sin construirlo tú mismo?

Sí. Motion Studio de Charmotion crea un hero web a partir de tu propio archivo de logo: encuentra las partes del logo y las mueve, así que nada se redibuja. El hero sigue al puntero, reacciona al hover y se repite en loop en reposo. Recibes un embed alojado que se pausa fuera de pantalla y respeta el movimiento reducido, archivos para alojar tú mismo, un componente React, y MP4 más WebM con fondo transparente.

Los tres conceptos son gratis en todos los planes. Generar uno empieza en Starter ($9/mes a noviembre de 2026, 3 animaciones de logo al mes), que genera con Rive y three.js interactivo. Un video 3D cinematográfico renderizado está en Todo en uno ($100/mes). Si quieres control total sobre el código, los pasos de arriba son todo lo que necesitas.

Cómo agregar un logo 3D interactivo a un sitio web

1. Modela el logo. Extruye y bisela el logo vectorial en una herramienta 3D, convierte las curvas en mallas y usa materiales Principled BSDF.
2. Exporta un GLB. Exporta glTF como un solo archivo .glb, y comprime la geometría con Draco solo si la malla es detallada.
3. Cárgalo e ilumínalo. Carga el GLB con el GLTFLoader de three.js en un canvas transparente y define scene.environment a partir de RoomEnvironment.
4. Agrega la reacción al puntero. Convierte pointermove en una pequeña rotación objetivo y acércate a ella con easing en cada fotograma usando el timestamp del fotograma.
5. Ahorra energía. Deja de renderizar cuando el logo está en reposo o fuera de pantalla, y limita el pixel ratio en pantallas de alta densidad.
6. Agrega alternativas de respaldo. Muestra primero una imagen póster fija, y consérvala para navegadores sin WebGL y para prefers-reduced-motion.

Preguntas frecuentes

¿Un logo 3D debe ser un archivo GLB o glTF?

Cualquiera funciona: el manual de three.js dice que ambos tienen buena compatibilidad. Un .glb empaqueta el JSON, la geometría y las texturas en un solo archivo binario, así que es una sola solicitud y es más difícil de romper al mover archivos. Un .gltf con archivos separados es más fácil de inspeccionar a mano.

¿Un logo 3D afecta el Largest Contentful Paint?

Normalmente no de forma directa. La lista de web.dev de elementos LCP incluye imágenes, pósters de video, imágenes de fondo y texto, y no menciona el canvas. Lo que se mide es tu imagen póster o tu titular, así que mantén el póster liviano y carga three.js y el modelo después.

¿Un logo 3D interactivo funciona en teléfonos?

Sí, con dos cambios. Las pantallas táctiles no tienen hover, así que el logo solo recibe input del puntero mientras hay un dedo apoyado; agrega un movimiento en reposo o una reacción al tocar. Las pantallas de alta densidad multiplican los píxeles a renderizar, así que limita la resolución del canvas para mantener la tasa de fotogramas.

Fuentes

• Loading 3D models, three.js manual
• GLTFLoader, three.js docs
• DRACOLoader, three.js docs
• RoomEnvironment, three.js docs
• Rendering on demand, three.js manual
• Responsive design (HD-DPI displays), three.js manual
• WebGL compatibility check, three.js manual
• glTF overview, Khronos Group
• glTF 2.0 import and export, Blender Manual
• WebGL best practices, MDN Web Docs
• Pointer events, MDN Web Docs
• Window: requestAnimationFrame() method, MDN Web Docs
• Intersection Observer API, MDN Web Docs
• <canvas>: the Graphics Canvas element, MDN Web Docs
• Largest Contentful Paint (LCP), web.dev
• Performance budgets 101, web.dev
• prefers-reduced-motion, MDN Web Docs
• Understanding SC 2.3.3: Animation from Interactions, W3C WAI
• C39: Using the CSS prefers-reduced-motion query to prevent motion, W3C WAI
• Exporting as Spline Viewer, Spline docs
• Exporting as code, Spline docs
• Video with alpha transparency on the web, Jake Archibald