Comment intégrer un modèle CAO 3D à votre site web : 4 méthodes comparées

Pour intégrer un modèle CAO 3D à votre site web, exportez l'assemblage en fichier STEP, convertissez-le en modèle d'affichage léger au format glTF ou GLB, puis affichez ce modèle dans une visionneuse web sur votre page produit. Votre fichier CAO lui-même n'a jamais besoin d'être publié : le navigateur ne télécharge que le modèle d'affichage. Pour le collecteur de refroidissement ICM-21 de Tutamen, qui compte 42 pièces, c'est un téléchargement de 2,0 Mo créé à partir de son fichier STEP.

Le STEP est le format 3D neutre que tous les grands logiciels de CAO savent exporter (ISO 10303). Le glTF est le format ouvert de la 3D sur le Web, publié par le Khronos Group, et le GLB est un glTF en un seul fichier. Les quatre méthodes pour passer de l'un à l'autre diffèrent surtout par ce que votre acheteur peut faire, ce que vous transmettez et qui en assure la maintenance.

Pourquoi un site web ne peut-il pas afficher directement un fichier STEP ?

Un fichier STEP décrit un produit sous forme de surfaces mathématiques exactes, alors qu'un navigateur ne sait dessiner que des triangles plats. Chaque face doit d'abord être recouverte de petits triangles (les polygones qui forment ce qu'on appelle un « maillage »), une étape appelée tessellation. Plus il y a de triangles, plus les courbes sont lisses et plus le fichier est lourd : un bon convertisseur s'arrête là où les courbes paraissent lisses en plein écran.

La conversion décide aussi de ce que la page peut faire. Un bon modèle d'affichage garde chaque pièce séparée, nommée et dotée d'un matériau, pour que l'on puisse éclater l'assemblage et cliquer sur chaque pièce. Il ne stocke qu'une fois les pièces répétées : le fichier de l'ICM-21 contient 214 168 triangles, et l'écran en dessine 654 948. Il ne comporte ni arbre de construction, ni esquisses, ni paramètres : les valeurs comme la masse et le volume sont donc d'abord mesurées sur la CAO exacte, et une bonne page précise que la fiche technique fait foi en cas d'écart entre les deux.

Voici ce qu'a produit cette chaîne pour les quatre modèles en ligne de Proofscene, mesuré sur les fichiers que chargent leurs pages :

Le téléchargement, c'est ce qu'attend le visiteur ; la page et la visionneuse qui l'entourent ajoutent environ un demi-mégaoctet. *STRAVIK, HALVORN et ARTIXO sont des marques fictives que Proofscene a modélisées en interne pour illustrer d'autres secteurs ; l'ICM-21 est le vrai produit de Tutamen, créé à partir de son fichier STEP.

Quelles sont les quatre méthodes pour intégrer un modèle CAO à votre site web ?

Les quatre méthodes sont l'intégration d'une visionneuse en ligne gratuite, une plateforme 3D hébergée ou un configurateur, une page que vous construisez vous-même avec un composant web ouvert (model-viewer de Google, par exemple) et une page produit interactive créée pour vous à partir de la CAO. Voici comment elles se comparent sur les questions décisives pour un produit industriel :

Quelle méthode convient à votre produit ?

Une visionneuse gratuite convient pour montrer rapidement une pièce à un client. C'est la méthode la plus rapide, et celle où vous transmettez le plus, car une visionneuse CAO gratuite travaille à partir de votre fichier STEP lui-même.

Une plateforme hébergée convient aux produits vendus sur leur aspect et leurs options, quand l'acheteur choisit une couleur ou une taille. Cet acheteur fait son choix dans un configurateur.

Le faire vous-même avec model-viewer, le composant web gratuit de Google construit sur la bibliothèque three.js, convient à une équipe web qui a du temps et à des pièces simples qu'il suffit de faire tourner. Il gère bien la rotation, les annotations et la RA. Le prix à payer : convertir, simplifier, éclairer et tester chaque produit, et recommencer à chaque modification ; une vue en coupe, un mode rayons X ou une liste de pièces cliquable, c'est du code à écrire vous-même.

Une page produit interactive sur mesure convient aux produits techniques dont la valeur se trouve à l'intérieur du carter (pompes, vannes, collecteurs, articulations de robot) et aux acheteurs qui vérifient chaque chiffre. Proofscene l'intègre à votre propre site, sous la forme d'une seule balise iframe ou d'une page hébergée sur votremarque.proofscene.com ; l'ICM-21 de Tutamen était en ligne le jour même de l'arrivée de son fichier STEP.

Si votre produit entre dans cette dernière catégorie, envoyez le fichier STEP et la fiche technique, et passez votre produit en 3D. Les pages produit sur mesure sont incluses dans les forfaits Proofscene Business et Enterprise, et notre équipe vous indique ce qu'elle va créer et quand ce sera en ligne, avant le début de tout travail.

Que doivent pouvoir faire les acheteurs avec le modèle ?

Les acheteurs de produits techniques veulent voir l'intérieur et vérifier les chiffres : le modèle doit donc leur permettre de démonter le produit, de l'ouvrir en coupe, de voir à travers et de lire les données de chaque pièce, pas seulement de le faire tourner. Chacune de ces fonctions est à essayer dans un modèle en ligne que vous pouvez ouvrir dès maintenant :

• Vue éclatée. La vanne à boisseau sphérique HALVORN BV25 se démonte en 14 pièces, dans l'ordre d'assemblage.
• Vue en coupe et flux. Coupez la pompe STRAVIK SX 50-160 en deux et faites-la fonctionner à n'importe quel débit entre 15 et 40 m³/h.
• Vue rayons X. Voyez le moteur, le réducteur harmonique 50:1 et le roulement de sortie à travers le boîtier de l'articulation de robot ARTIXO RA90.
• Données des pièces et mesure. Cliquez sur n'importe quelle pièce du Tutamen ICM-21 pour voir son nom, son matériau et sa quantité, mesurez entre les vraies arêtes et faites circuler le liquide de refroidissement selon la répartition de la fiche technique.
• Partage. Un lien et un QR code pour chaque vue, et une courte visite guidée pour les visiteurs qui n'explorent pas d'eux-mêmes.

Des films de lancement peuvent être réalisés à partir du même modèle : voyez nos animations 3D produit, ou le film de 35 secondes où l'on démonte un produit sur une page produit 3D interactive, dans un navigateur.

Comment garder un modèle 3D rapide sur mobile ?

Visez quelques mégaoctets pour le modèle, chargez-le quand le visiteur arrive à sa hauteur et veillez à ce que la page se lise bien sans lui. Un modèle qui se charge en premier retarde les textes et les images que les acheteurs sont venus voir.

• Compressez le fichier. Le glTF peut stocker les nombres sur moins d'octets et compresser la géométrie avec les extensions Draco ou meshopt, et le serveur doit l'envoyer compressé. Les modèles de Proofscene stockent les normales des surfaces sur 16 bits et voyagent compressés en gzip : le GLB de 3,6 Mo de l'ICM-21 arrive en 2,0 Mo.
• Réservez les triangles à ce que regardent les acheteurs. Le détail des filetages, les minuscules congés et l'intérieur des pièces que personne n'ouvre ralentissent le rendu sur téléphone sans rien apporter.
• Montrez d'abord une image fixe. Chargez la 3D quand elle arrive à l'écran ou au toucher ; model-viewer le fait avec une image d'aperçu et le chargement différé.
• Ne bloquez pas le défilement. Les visionneuses intégrées de Proofscene défilent avec la page et ne zooment qu'avec Ctrl ou un pincement ; sur téléphone, leurs panneaux se replient en volets pour que le produit reste visible.
• Gardez les faits dans le texte. Les moteurs de recherche et les assistants IA lisent la page, pas le modèle : mettez donc la description, les noms des pièces et les caractéristiques dans le HTML. Les pages de démo publiques de Proofscene ajoutent des données structurées pour le modèle 3D, et un navigateur qui ne peut pas afficher la 3D reçoit quand même ce texte.

Votre CAO est-elle en sécurité une fois le modèle sur une page publique ?

Oui, car un modèle d'affichage n'est pas votre CAO : il contient des triangles à la précision de l'écran, sans arbre de construction, esquisses, paramètres ni surfaces exactes, et sans aucun des détails internes que vous avez retirés. Protégez l'essentiel avant de publier :

• Simplifiez ou retirez tout ce qui est sensible sur le plan commercial, comme un canal interne ou un profil de joint.
• N'importez jamais le fichier STEP dans une visionneuse dont les visiteurs peuvent télécharger l'original.
• Vérifiez le résultat sur un lien protégé par mot de passe avant la mise en ligne, et signez un accord de confidentialité (NDA) avec quiconque manipule la CAO. Proofscene travaille ainsi, et vous restez propriétaire de votre CAO et de vos contenus.

À lire aussi

Découvrez comment l'ICM-21 de Tutamen est passé d'un fichier STEP à une page produit en ligne, essayez les quatre modèles sur la page démo produit 3D interactive ou regardez le film de 36 secondes où une visionneuse produit 3D s'installe sur votre site web.