Le Plugin STL3D_Gallery

Mon plugin STL3D_Gallery est une application web autonome en HTML destinée à parcourir un dossier de fichiers 3D au format STL, à générer automatiquement des vues PNG de chaque modèle et à permettre leur visualisation en 3D. Le moteur 3D repose sur Three.js, avec STLLoader pour lire les STL et OrbitControls pour manipuler les modèles.

Le fonctionnement global est :

Sélection d’un dossier → recherche des STL → lecture des modèles → calcul des dimensions → génération de 10 images par STL → affichage sous forme de cartes → visualisation 3D interactive → téléchargement des PNG/STL → gestion des descriptions.

Lorsqu’un dossier est sélectionné, la page parcourt également les sous-dossiers de manière récursive. Elle conserve le chemin relatif de chaque fichier afin de pouvoir retrouver le STL et son éventuel fichier .txt de description associé.

Facile à intégrer dans WordPress, il suffit de copier son code dans un Widget HTML

Interface

À quoi sert cette application ?

Cette page web est un outil de consultation et de classement de modèles 3D au format STL.

Son principe est simple :

On lui donne un dossier contenant des fichiers STL, et elle transforme ce dossier en une bibliothèque visuelle de modèles 3D.

Pour chaque modèle, elle affiche automatiquement :

  • son nom ;
  • son emplacement dans le dossier ;
  • ses dimensions ;
  • le nombre de triangles qui le composent ;
  • plusieurs images du modèle sous différents angles ;
  • éventuellement une description ;
  • une visionneuse 3D interactive ;
  • la possibilité de récupérer le fichier STL ;
  • la possibilité de télécharger les images.

1. On commence par choisir un dossier

  • L’utilisateur clique sur « Sélectionner un dossier ».
  • Il choisit alors un dossier de son ordinateur.
  • L’application regarde ce qu’il contient, y compris les éventuels sous-dossiers.

Par exemple :

Dossier Modèles

  • Voiture
    • carrosserie.stl
    • roue.stl
    • châssis.stl
  • Maison
    • mur.stl
    • toit.stl
  • prototype.stl

L’application va retrouver les différents fichiers STL même s’ils sont rangés dans plusieurs niveaux de dossiers.


2. Elle repère les modèles 3D

L’application ne s’intéresse qu’aux fichiers STL.
Les autres fichiers présents dans le dossier ne sont pas traités comme des modèles 3D.
Elle compte ensuite combien de STL ont été trouvés et commence à les traiter un par un.
Une barre de progression permet de voir où en est le travail.

Par exemple : Traitement : 23 / 100
Cela signifie que le 23ᵉ modèle sur les 100 modèles trouvés est actuellement traité.


3. Chaque modèle est examiné

Pour chaque STL, l’application « ouvre » le modèle 3D afin d’en comprendre la forme.
Elle vérifie notamment que le fichier contient bien une géométrie exploitable.
Si un STL est incorrect ou inutilisable, l’application signale le problème pour ce modèle et peut continuer avec les suivants.

C’est important : un fichier défectueux ne fait pas nécessairement échouer toute la bibliothèque.


4. Elle calcule les dimensions du modèle

Pour chaque pièce, l’application détermine sa taille dans les trois directions.
Elle peut par exemple afficher : 120 × 80 × 35 mm
Cela donne une idée immédiate de l’encombrement du modèle.
Elle indique également le nombre de triangles utilisés pour représenter la surface du modèle 3D.

Par exemple : 120 × 80 × 35 mm · 18 500 triangles.

Plus le nombre de triangles est élevé, plus le modèle peut être détaillé et lourd à manipuler.


5. Elle fabrique automatiquement des images du modèle

C’est l’une des fonctions principales de l’application.
Elle prend chaque modèle 3D et fabrique automatiquement plusieurs images.

Il y a :

6 vues classiques

Le modèle est regardé depuis différentes directions :

  • devant ;
  • derrière ;
  • dessus ;
  • dessous ;
  • côté ;
  • côté opposé.
4 vues en perspective

Le modèle est également regardé depuis quatre angles en diagonale, de manière à donner une bonne impression de son volume.

Cela donne donc :

6 vues classiques + 4 vues en perspective = 10 images par modèle.


6. Pourquoi fabriquer autant d’images ?

L’objectif est de pouvoir comprendre rapidement ce qu’est une pièce sans devoir ouvrir une visionneuse 3D.

Par exemple, si le dossier contient 500 pièces, on peut parcourir les résultats et reconnaître immédiatement les modèles grâce aux différentes vues.
Cela transforme en quelque sorte un dossier rempli de fichiers :

piece_001.stl
piece_002.stl
piece_003.stl

en une sorte de catalogue visuel.


7. Les images deviennent des vignettes

Les différentes vues sont affichées dans la fiche de chaque modèle.

On retrouve donc quelque chose comme :
ROUE_AVANT.STL
120 × 120 × 35 mm · 24 000 triangles

Puis plusieurs petites images :
Vue 1/6 | Vue 2/6 | Vue 3/6 | …
et les vues en perspective.

Chaque image peut être téléchargée individuellement au format PNG.


8. L’application peut aussi afficher une vraie vue 3D

Les images servent à consulter rapidement les modèles.

Mais si l’utilisateur veut examiner une pièce plus précisément, il peut demander l’ouverture de la Visionneuse 3D.

Dans cette visionneuse, il peut :

  • faire tourner la pièce ;
  • zoomer ;
  • déplacer la pièce ;
  • revenir à la vue initiale ;
  • regarder la face ;
  • regarder le dessus ;
  • regarder le côté ;
  • passer en vue isométrique ;
  • utiliser le plein écran.

L’application indique directement à l’écran les commandes disponibles :

Rotation · Zoom · Déplacement


9. Pourquoi la visionneuse n’est-elle pas ouverte pour toutes les pièces ?

C’est un choix important du fonctionnement.
Les images sont préparées pour toutes les pièces.
En revanche, la visionneuse 3D interactive n’est activée que lorsque l’utilisateur en a besoin.
Cela évite d’avoir des dizaines ou des centaines de modèles 3D interactifs ouverts simultanément.

En pratique :
les images servent à parcourir rapidement la bibliothèque ; la visionneuse sert à examiner précisément une pièce.


10. Les descriptions des pièces

L’application peut également associer une description à chaque STL.
Le principe est très simple :
Si le dossier contient support.stl et support.txt

le texte contenu dans support.txt peut être associé au modèle support.stl.
La fiche du modèle peut alors contenir une zone de description.

Cela permet par exemple de noter :

  • à quoi sert la pièce ;
  • où elle est utilisée ;
  • une référence ;
  • des remarques de fabrication ;
  • une version ;
  • des informations techniques ;
  • etc.

11. On peut modifier cette description

La description n’est pas seulement consultable.
L’utilisateur peut la modifier puis cliquer sur « Valider ».
Lorsque le navigateur autorise l’accès en écriture au dossier, l’application peut enregistrer directement la description dans un fichier .txt placé avec le STL correspondant.

Par exemple : Pièces / Moteur

  • moteur.stl
  • moteur.txt

Si on modifie la description du moteur, c’est le fichier moteur.txt qui est mis à jour.


12. Que se passe-t-il si l’application ne peut pas écrire dans le dossier ?

Dans certains cas, le navigateur ne permet pas à la page web de modifier directement le dossier choisi.
L’application prévoit alors une solution de secours :

elle télécharge le fichier .txt sur l’ordinateur.

L’utilisateur peut donc récupérer la description même lorsque l’écriture directe n’est pas possible.


13. On peut télécharger le STL

La fiche de chaque modèle propose également :
« Télécharger STL »

Cela permet de récupérer le fichier STL correspondant.
L’application conserve donc le lien entre :
le modèle affiché → son fichier STL original.


14. On peut rechercher un modèle

Lorsque beaucoup de modèles sont présents, l’utilisateur peut utiliser la recherche.
Il peut rechercher un nom ou un élément du chemin du fichier.

Par exemple, avec : roue
l’application peut retrouver :

  • roue_avant.stl ;
  • roue_arriere.stl ;
  • voiture/roue_secours.stl ;
  • etc.

Les résultats ne sont pas recalculés : l’application masque simplement les fiches qui ne correspondent pas à la recherche.


15. Il existe également un filtre

On peut filtrer les modèles selon leur état.
Le principe est : 
Tous → afficher tous les modèles.
STL réussis → afficher uniquement les modèles correctement traités.
STL en erreur → afficher uniquement ceux qui ont rencontré un problème.

Cela permet notamment de retrouver rapidement les fichiers qui nécessitent une vérification.


16. On peut organiser l’affichage

Lorsque beaucoup de modèles sont affichés, l’utilisateur peut : 
Tout déplier ou Tout replier.

Cela permet de transformer une longue liste de fiches détaillées en une liste beaucoup plus compacte.
On peut donc avoir uniquement les noms des modèles visibles, puis ouvrir uniquement celui que l’on souhaite examiner.


17. On peut modifier la taille des vignettes

L’application propose également des paramètres d’affichage.
On peut modifier :

  • la largeur des images ;
  • leur hauteur ;
  • l’espace entre les images.

Cela permet d’adapter l’affichage à la taille de l’écran ou au nombre de modèles consultés.

Ces réglages modifient essentiellement la présentation à l’écran, sans avoir à refaire le travail de génération des images.


18. Le fonctionnement complet, vu par un utilisateur

On peut finalement résumer l’utilisation en 7 étapes :

① Choisir un dossier

L’utilisateur indique où se trouvent ses modèles STL.

② L’application parcourt le dossier

Elle recherche les STL, y compris dans les sous-dossiers.

③ Les modèles sont analysés

Elle vérifie les fichiers et récupère leurs caractéristiques.

④ Les dimensions sont calculées

Chaque modèle reçoit notamment ses dimensions et son nombre de triangles.

⑤ Les images sont générées

Pour chaque modèle, l’application crée 10 vues différentes.

⑥ Le catalogue est affiché

Chaque STL devient une fiche visuelle avec ses images, ses informations et éventuellement sa description.

⑦ L’utilisateur peut approfondir

Il peut :

  • rechercher une pièce ;
  • filtrer les résultats ;
  • consulter les images ;
  • télécharger une image ;
  • ouvrir le modèle en 3D ;
  • télécharger le STL ;
  • lire/modifier sa description.

19. En résumé :

C’est un catalogue automatique de modèles 3D :
On lui donne un dossier de fichiers STL, et elle construit une présentation visuelle de toutes les pièces, avec leurs dimensions, plusieurs vues, une visionneuse 3D et leurs descriptions.

Et surtout, elle ne demande pas à l’utilisateur de préparer manuellement les images de chaque pièce : elle les produit elle-même à partir des modèles 3D.

Téléchargez le Plugin

Commencez par télécharger le Plugin en cliquant sur le bouton « Télécharger ». Vous récupérez ainsi le Plugin au format Zip que vous enregistrez sur votre bureau.

Installez le Plugin

Dans le Tableau de Bord de WordPress, cliquez sur Extensions puis successivement sur les bouton « Ajouter une extension » puis « Téléverser une extension » puis « Parcourir ». L’explorateur de fichiers s’ouvre. Sélectionnez votre « Bureau » puis le fichier .zip du plugin que vous avez précédemment téléchargé.  Vous pouvez vérifier que le Plugin est bien installé en cliquant sur le Tableau de Bord de WordPress, puis Extensions. Le plugin apparait alors dans la liste des extensions. Il ne vous reste plus qu’a l’activer en cliquant sur « Activer ».

Désinstaller le Plugin

J’ai intégré un désinstalleur pour supprimer le Plugin en toute sécurité si besoin.
Dans le Tableau de Bord de WordPress, cliquez sur Extensions, puis Réglages pour accéder à la configuration du Plugin. Après avoir cliqué sur Désactiver, l’onglet Supprimer apparait. 
Il suffit de cliquer dessus pour désinstaller le plugin.
Les pages utilisant le Plugin ne sont pas effacées lors de la désinstallation du Plugin.

Pour afficher la galerie

Pour faire apparaitre la galerie, il suffit de taper le shortcode [stl_library] dans la page ou l’article qui doit afficher la galerie.
C’est tout !

Retour en haut