Cómo poner un modelo CAD 3D en tu web: 4 opciones comparadas

Para poner un modelo CAD 3D en tu web, exporta el ensamblaje como archivo STEP, conviértelo en un modelo de visualización ligero en formato glTF o GLB y muestra ese modelo en un visor web en tu página de producto. Tu archivo CAD nunca tiene que publicarse: el navegador descarga solo el modelo de visualización, que en el caso del colector de refrigerante ICM-21 de Tutamen, de 42 piezas, es una descarga de 2,0 MB generada a partir de su archivo STEP.

STEP es el formato 3D neutro que puede exportar cualquier sistema CAD habitual (ISO 10303). glTF es el formato abierto para el 3D en la web, del Khronos Group, y GLB es glTF en un solo archivo. Las cuatro vías para pasar de uno a otro se diferencian sobre todo en lo que puede hacer tu comprador, lo que entregas y quién se encarga de que siga funcionando.

¿Por qué una web no puede mostrar directamente un archivo STEP?

Un archivo STEP describe un producto como superficies matemáticas exactas, y un navegador solo puede dibujar triángulos planos. Primero hay que cubrir cada cara con pequeños triángulos (los polígonos a los que se refiere la gente cuando habla de una “malla”), un paso que se llama teselación. Más triángulos suavizan las curvas y hacen más pesado el archivo, así que un buen convertidor se detiene cuando las curvas ya se ven suaves a pantalla completa.

La conversión también decide lo que puede hacer la página. Un buen modelo de visualización mantiene cada pieza separada, con su nombre y su material, para que se pueda despiezar el ensamblaje y hacer clic en cada pieza. Guarda una sola vez las piezas repetidas: el archivo del ICM-21 contiene 214.168 triángulos y la pantalla dibuja 654.948. No lleva árbol de operaciones, croquis ni parámetros, así que cifras como la masa y el volumen se miden antes en el CAD exacto, y una buena página indica que los valores de la ficha técnica prevalecen si difieren de los del modelo de visualización.

Lo que dio este proceso de conversión con los cuatro modelos en vivo de Proofscene, medido en los archivos que cargan sus páginas:

La descarga es lo que tiene que esperar el visitante; la página y el visor que la acompañan suman cerca de medio megabyte. *STRAVIK, HALVORN y ARTIXO son marcas ficticias que Proofscene modeló con su propio equipo para mostrar otros sectores; el ICM-21 es el producto real de Tutamen, creado a partir de su archivo STEP.

¿Cuáles son las cuatro formas de poner un modelo CAD en tu web?

Las cuatro formas son la inserción de un visor online gratuito, una plataforma 3D alojada o un configurador, una página que creas por tu cuenta con un componente web abierto como model-viewer de Google y una página de producto interactiva creada para ti a partir del CAD. Así se comparan en las cuestiones que deciden la elección para un producto industrial:

¿Qué opción encaja con tu producto?

Un visor gratuito sirve para que un cliente eche un vistazo rápido a una pieza. Es la vía más rápida y la que más datos cede, porque un visor CAD gratuito trabaja directamente con tu archivo STEP.

Una plataforma alojada encaja con productos que se venden por su aspecto y sus opciones, en los que el comprador elige un color o un tamaño. Ese comprador los elige en un configurador.

Hacerlo por tu cuenta con model-viewer, el componente web gratuito de Google basado en la biblioteca three.js, encaja con un equipo web con tiempo y con piezas sencillas que solo necesitan girar. Resuelve bien el giro, las etiquetas y la realidad aumentada. El costo es convertir, simplificar, iluminar y probar cada producto, otra vez con cada cambio, y un corte de sección, un modo de rayos X o una lista de piezas en la que se pueda hacer clic son código que escribes tú.

Una página de producto interactiva hecha a medida encaja con productos industriales cuyo valor está dentro de la carcasa (bombas, válvulas, colectores, articulaciones robóticas) y con compradores que comprueban cada cifra. Proofscene la crea dentro de tu propia web, como una sola etiqueta iframe o como página alojada en tumarca.proofscene.com; el ICM-21 de Tutamen se publicó el mismo día en que llegó su archivo STEP.

Si tu producto pertenece a ese último grupo, envía el archivo STEP y la ficha técnica y pon tu producto en 3D. Las páginas de producto hechas a medida vienen incluidas en Proofscene Business y Enterprise, y antes de empezar cualquier trabajo nuestro equipo te dice qué va a crear y cuándo estará en vivo.

¿Qué deberían poder hacer los compradores con el modelo?

Los compradores de productos industriales quieren ver el interior y comprobar las cifras, así que el modelo debería permitirles desmontar el producto, seccionarlo, ver a través de él y leer los datos de cada pieza, no solo girarlo. Cada una de estas funciones se ejecuta en un modelo en vivo que puedes abrir ahora mismo:

• Vista explosionada. La válvula de bola HALVORN BV25 se despieza en sus 14 piezas en orden de montaje.
• Vista en corte y flujo. Corta por la mitad la bomba STRAVIK SX 50-160 y hazla funcionar a cualquier caudal de 15 a 40 m³/h.
• Rayos X. Mira el motor, el reductor de onda de deformación 50:1 y el rodamiento de salida a través de la carcasa de la articulación robótica ARTIXO RA90.
• Datos de piezas y medición. Haz clic en cualquier pieza del colector ICM-21 de Tutamen para ver su nombre, su material y su cantidad, mide entre aristas reales y haz circular el refrigerante con el reparto de caudal de la ficha técnica.
• Compartir. Un enlace y un código QR para cada vista, y un breve recorrido guiado para los visitantes que no van a explorar por su cuenta.

Con el mismo modelo se pueden renderizar videos de lanzamiento: consulta animación 3D de productos o el video de 35 segundos de una página de producto 3D interactiva que se desmonta en un navegador.

¿Cómo hacer que un modelo 3D vaya rápido en el teléfono?

Mantén el modelo en unos pocos megabytes, cárgalo cuando el visitante llegue a él y asegúrate de que la página se entienda bien sin él. Un modelo que se carga primero retrasa el texto y las imágenes que buscan los compradores.

• Comprime el archivo. glTF puede guardar los números en menos bytes y comprimir la geometría con las extensiones Draco o meshopt, y el servidor debería enviarlo comprimido. Los modelos de Proofscene guardan las direcciones de las superficies en números de 16 bits y viajan comprimidos con gzip: el GLB de 3,6 MB del ICM-21 llega como 2,0 MB.
• Gasta los triángulos donde miran los compradores. El detalle de las roscas, los redondeos diminutos y el interior de piezas que nadie abre le cuestan tiempo al teléfono y no aportan nada.
• Muestra primero una imagen fija. Carga el 3D cuando entre en pantalla al desplazarse o al tocarlo; model-viewer lo hace con una imagen de póster y carga diferida.
• No bloquees el desplazamiento. Los visores insertados de Proofscene se desplazan con la página y solo hacen zoom con Ctrl o al pellizcar, y en el teléfono sus paneles se recogen en hojas deslizantes para que el producto siga a la vista.
• Deja los datos en el texto. Los buscadores y los asistentes de IA leen la página, no el modelo, así que pon la descripción, los nombres de las piezas y las especificaciones en el HTML. Las páginas de demos públicas de Proofscene agregan datos estructurados para el modelo 3D, y un navegador que no puede ejecutar 3D recibe igualmente ese texto.

¿Está seguro tu CAD cuando el modelo está en una página pública?

Sí, porque un modelo de visualización no es tu CAD: contiene triángulos con precisión de pantalla, sin árbol de operaciones, croquis, parámetros ni superficies exactas, y sin ninguno de los detalles internos que hayas dejado fuera. Protege lo importante antes de publicar:

• Simplifica o elimina todo lo que sea comercialmente sensible, como un canal interno o el perfil de una junta.
• Nunca subas el archivo STEP a un visor cuyos visitantes puedan descargar el original.
• Revisa en un enlace protegido con contraseña antes del lanzamiento y firma un acuerdo de confidencialidad (NDA) con quien tenga acceso al CAD. Proofscene trabaja así, y conservas la propiedad de tu CAD y de tu contenido.

Lecturas relacionadas

Lee cómo el ICM-21 de Tutamen pasó de un archivo STEP a una página de producto en vivo, explora los cuatro modelos en la página de demo 3D interactiva de producto o mira el video de 36 segundos de un visor 3D de producto que se integra en tu web.