Retour au blog BIM & IFC
Outils & comparatifs · 2026-10-01 · 9 min
Comment intégrer une visionneuse IFC dans un site web, un CDE ou un rapport Power BI
Un modèle 3D interactif dans une offre, une page projet, un panneau de CDE ou un tableau de bord Power BI — avec une seule iframe, sans build, et sans envoyer le modèle sur le serveur de qui que ce soit. Ce que font les paramètres d'URL, et quand il vous faut le SDK.
Comment intégrer une visionneuse IFC dans un site web, un CDE ou un rapport Power BI — IFC Viewer Online article cover
Des captures d'écran d'une maquette BIM, c'est un drôle de contenu pour une offre. Tout l'intérêt de la maquette est d'être en trois dimensions et pleine de données, et la capture jette les deux. Une visionneuse intégrée les conserve : le lecteur peut tourner autour, couper, cliquer sur un élément et lire ses propriétés, sur n'importe quel appareil, sans rien installer.
Le faire demande une iframe. Bien le faire demande de connaître quatre paramètres et une règle de sécurité du navigateur.
L'intégration minimale
<iframe
src="https://www.ifcvieweronline.eu/?model=https://your-host.com/model.ifc&embed=1"
width="100%" height="600"
style="border:0;border-radius:12px;max-width:100%"
loading="lazy" allow="fullscreen"
title="3D IFC model">
</iframe>
Le navigateur du visiteur télécharge l'IFC directement depuis votre hébergement et l'analyse en local. Le modèle ne nous est jamais envoyé, ce qui est généralement la première question de quiconque a signé un accord de confidentialité — et une vraie différence avec les intégrations qui vous obligent d'abord à téléverser le modèle dans le cloud d'un éditeur.
Créez votre intégration
Collez une URL IFC publique, choisissez un mode et copiez l'iframe. L'aperçu se met à jour en direct.
Ouvrir IFC Viewer
Les paramètres à connaître
| Paramètre | Rôle | À utiliser pour |
|---|
| model | Charge une ou plusieurs URL IFC (séparées par des virgules pour un ensemble fédéré) | Tout |
| ui | Mode d'interface : minimal, full, kiosk ou client | S'adapter au public |
| validate | Lance la validation au chargement et affiche le Health Score | Montrer la qualité, pas seulement la géométrie |
| isolate / select | S'ouvre avec une classe IFC isolée ou un élément sélectionné | Désigner ce dont vous parlez |
| accent | Teinte la visionneuse d'une couleur hexadécimale | Tableaux de bord et pages aux couleurs de la marque |
| lang | Force la langue de l'interface | Sites localisés |
| map | Place le modèle sur le fond de carte d'après son géoréférencement | Contexte du site dans les offres |
La référence complète, y compris études d'ensoleillement et nuages de points, figure dans la documentation d'intégration.Le mode ui est le plus important. minimal convient aux articles de blog et à la documentation. kiosk retire tout pour les écrans d'un hall ou d'un espace de vente. client est pensé pour un envoi au maître d'ouvrage : une vue épurée et un badge qualité, sans les outils dont un coordinateur a besoin et qu'un client n'utilise pas.
Où ça fonctionne
- Sites web et blogs — tout CMS qui accepte du HTML : WordPress, Webflow, Ghost, un site statique.
- Power BI — un visuel de contenu web ou de visionneuse HTML, avec accent réglé sur le thème du rapport. Un modèle à côté des graphiques de coûts et de planning qu'il explique.
- Notion, Confluence, SharePoint — collez l'URL comme bloc intégré.
- Panneaux de CDE et outils internes — une iframe, avec des événements de cycle de vie envoyés à la fenêtre parente pour que l'hôte réagisse quand le modèle est prêt ou validé.
- Offres et appels d'offres — sous forme de lien si le format n'accepte pas l'intégration. Un lien vers un modèle vivant dans une réponse d'appel d'offres reste assez rare pour être remarqué.
Pourquoi ça ne charge pas : CORS, et deux autres causes
Le modèle va de votre stockage au navigateur du visiteur. Sans en-tête CORS côté hébergeur, le navigateur refuse de le transmettre.
- Des liens de partage qui renvoient une page web, pas le fichier. Les liens Dropbox, OneDrive et Google Drive ouvrent généralement une page d'aperçu ; il vous faut la forme « téléchargement direct » du lien.
- Des liens qui exigent une connexion. Le navigateur du visiteur n'a pas de session sur votre CDE, donc un lien privé renvoie une page de connexion.
- De très gros fichiers sur des hébergements lents. Le modèle est téléchargé en entier avant l'analyse ; hébergez les gros ensembles fédérés sur un service rapide et envisagez de les découper.
Si les modèles sont trop lourds pour être intégrés confortablement, comment réduire la taille d'un fichier IFC présente les réductions sans risque.
Quand une iframe ne suffit plus : le SDK
Une iframe affiche un modèle. Dès que votre page doit dialoguer avec lui — mettre en évidence un élément quand on clique sur une ligne de votre tableau, remonter le Health Score dans votre tableau de bord, exécuter une spécification IDS et lister les échecs dans votre propre interface, lancer une visite guidée —, il vous faut le SDK. Il enveloppe la même visionneuse dans une API typée et bidirectionnelle, disponible sous forme de script ou de web component <ifc-viewer>.
Si vous préférez construire votre propre visionneuse à partir des bibliothèques sous-jacentes, afficher de l'IFC sur le web avec three.js et Fragments explique ce que cela implique — et pourquoi la plupart des équipes qui commencent par là finissent par intégrer.
Pour les projets confidentiels, la même architecture côté client qui fait fonctionner les intégrations est celle qui garde le modèle hors des serveurs tiers ; les détails sont dans visionneuses IFC pour projets confidentiels et sous NDA.
Comment intégrer une visionneuse IFC dans un site web, un CDE ou un rapport Power BI