- 1
Ajouter le cadre
Insérez un iframe pointant vers Any3D et indiquez l'adresse de votre modèle dans le paramètre src. Le cadre n'affiche que le canevas, avec un bouton en bas à droite pour ouvrir la visionneuse complète. Un exemple figure ci-dessous.
<iframe src="https://any3d.cc/fr-FR/embed?src=https%3A%2F%2Fcdn.example.com%2Fmodel.glb" title="Modèle 3D" style="width:100%;height:480px;border:0" loading="lazy" allow="fullscreen" allowfullscreen referrerpolicy="strict-origin-when-cross-origin" ></iframe>Astuce : vous pouvez copier le prompt ci-dessous et le transmettre à un assistant IA (comme Cursor, Claude ou ChatGPT) pour générer et intégrer rapidement le code.Prompt d'intégration IA (cliquer pour déplier/replier)
Veuillez générer un extrait de code <iframe> pour intégrer le visualiseur 3D Any3D dans une page Web. Si vous modifiez une page ou un composant existant, placez l'<iframe> là où le modèle 3D doit apparaître. URL de base de l'intégration : https://any3d.cc/fr-FR/embed Règles d'URL et paramètres : - Paramètre obligatoire : `src` doit être l'URL HTTPS du modèle, encodée en pourcent (encodeURIComponent) et passée en tant que paramètre de requête distinct (ex. https://any3d.cc/fr-FR/embed?src=...). N'ajoutez pas l'URL brute directement au chemin. Pour 3D Tiles, utilisez l'adresse du fichier tileset.json. - Paramètres facultatifs (omettez ceux qui ne sont pas nécessaires) : - `autorotate=1` : fait tourner le modèle automatiquement. Omettez-le pour le laisser immobile. - `theme=light`, `theme=dark` ou `theme=system` : définit le thème d'affichage. - `bg=transparent` : utilise un arrière-plan transparent. - `controls` : choisit la disposition de la souris. Laissez vide ou définissez sur `auto` pour une sélection automatique selon le type de fichier ; ou définissez sur `standard`, `cad`, `solidworks`, `blender`, `splat` ou `custom`. Commandes de souris : - auto : les fichiers CAO utilisent les commandes CAO, Gaussian Splatting utilise l'orbite fluide, les autres fichiers utilisent l'orbite standard. - standard : orbite. Glisser gauche fait tourner, glisser droit translate, la molette zoome. - cad : style AutoCAD. Clic molette maintenu translate, Shift+clic molette orbite, la molette zoome vers le curseur, sans inertie. Glisser gauche orbite également, glisser droit translate. - solidworks : style SolidWorks. Clic molette orbite, Ctrl ou Commande+clic molette translate, Shift+clic molette zoome. Molette vers l'avant dézoome au curseur, sans inertie. - blender : style Blender. Clic molette orbite, Shift+clic molette translate, Ctrl ou Commande+clic molette zoome. La molette zoome vers le centre de la vue, sans inertie. - splat : orbite fluide conçue pour les scènes volumineuses de Gaussian Splatting. Glisser pour tourner en douceur, double-cliquer pour centrer la vue. - custom : identique à standard. Exigences de l'iframe et remarques : - Attributs et style : incluez loading="lazy" et style="width:100%;height:480px;border:0" (ajustez selon le conteneur). - Autorisations : doit inclure allow="fullscreen", allowfullscreen et referrerpolicy="strict-origin-when-cross-origin". - Sandbox : si la page parente restreint l'iframe avec sandbox, ajoutez allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox pour que le bouton en bas à droite puisse ouvrir la visionneuse complète dans un nouvel onglet. - Hébergement et CORS : le serveur hôte du modèle doit autoriser https://any3d.cc via CORS. Le visualiseur télécharge un fichier unique (ex. GLB, STL, OBJ, FBX, PLY). Les textures dans des fichiers externes distincts seront manquantes sauf si elles sont intégrées au modèle (comme en GLB). Exemple de référence : <iframe src="https://any3d.cc/fr-FR/embed?src=https%3A%2F%2Fcdn.example.com%2Fmodel.glb" title="Modèle 3D" style="width:100%;height:480px;border:0" loading="lazy" allow="fullscreen" allowfullscreen referrerpolicy="strict-origin-when-cross-origin" ></iframe> Remarque : L'adresse du modèle dans l'exemple est un substitut. Remplacez src par la véritable adresse HTTPS encodée en pourcent. Ne spécifiez pas controls si la souris doit suivre automatiquement le fichier. - 2
Où se trouve le modèle
L’adresse doit être en https, et l’hébergeur doit autoriser https://any3d.cc à lire le fichier. Le navigateur du visiteur télécharge ce seul fichier, par exemple GLB, STL, OBJ, FBX ou PLY. Pour les 3D Tiles, utilisez l’adresse de tileset.json. Any3D n’en garde pas de copie. Les textures et les données dans des fichiers séparés manquent, sauf si elles sont déjà dans le modèle, comme dans un GLB.
- 3
Options de la page
Les paramètres ci-dessous sont facultatifs. Le bouton ouvrant la visionneuse complète reste visible.
Paramètre Valeur Effet autorotate1Fait tourner le modèle. Sans ce paramètre, il reste immobile. themelight | dark | systemRègle le thème de la page. bgtransparentRend le fond transparent. controlsauto | standard | cad | solidworks | blender | splat | customDisposition de la souris. Vide signifie auto et suit le fichier. https://any3d.cc/fr-FR/embed ?src=https%3A%2F%2Fcdn.example.com%2Fmodel.glb &autorotate=1 &theme=dark &bg=transparent - 4
Ouvrir la visionneuse complète
Le bouton ouvre la visionneuse Any3D correspondante dans un nouvel onglet et transmet la même adresse. Les Gaussian splats, les 3D Tiles et les dessins DWG ou DXF utilisent leur propre visionneuse. Les autres fichiers utilisent la visionneuse de modèles 3D. Si la page parente place l’iframe dans un sandbox, il faut allow-popups et allow-popups-to-escape-sandbox pour que le bouton ouvre un onglet.
Intégrer une visionneuse
Placez une visionneuse Any3D sur votre page. Le cadre charge un modèle depuis une adresse https, avec un bouton qui ouvre la visionneuse complète.