Démo technique : configurateur 3D de matériel embarqué.

01Ce que montre la démo

La démo est une application web qui s'ouvre dans le navigateur, sans installation. Elle sert de vitrine technique : elle montre ce que Kliq sait construire en 3D temps réel pour un outil métier.

L'écran a deux zones. À gauche, la scène 3D : le porteur, le matériel posé, les cotes et les charges affichées dans la scène. À droite, un panneau en cinq étapes : porteur, matériel embarqué, position et cotes, analyse de charge, export.

Les masses et les charges maximales sont des valeurs de démonstration. La fiche PDF produite porte la mention « non contractuelle ».

02Ce que fait la démo

Trois porteurs

Trois camions porteurs rigides : 19 t à deux essieux, 26 t à trois essieux, 32 t à quatre essieux. Chaque carte indique la longueur totale, la longueur utile du châssis et le nombre d'essieux.

Cinq matériels embarqués

Deux grues de manutention, une grue forestière à grappin, un bras ampliroll et un chariot élévateur embarqué. Un seul matériel est posé à la fois. Chaque carte indique sa masse, son moment et la longueur de sa base.

Positionnement au millimètre avec aimantation

Le matériel se déplace le long du châssis à la souris, aux flèches du clavier ou avec un curseur. Maj et les flèches le déplacent d'un millimètre. À la souris et au clavier, il s'aimante à l'approche d'une zone d'ancrage ou d'un essieu. Chaque porteur propose trois zones : arrière cabine, milieu châssis, porte-à-faux arrière.

Annuler, rétablir, verrouiller

Chaque déplacement s'annule avec Ctrl+Z et se rétablit avec Ctrl+Y, sur les trente dernières positions. La touche L verrouille la position pour éviter un déplacement accidentel.

Cotes et charges en direct

Pendant le déplacement, les cotes se mettent à jour : bords avant et arrière du matériel, distance à la face arrière de la cabine, à l'arrière du châssis et à l'essieu arrière le plus proche. La démo recalcule en même temps la masse totale rapportée au PTAC, la charge de chaque groupe d'essieux et de chaque essieu, et le centre de gravité. Un état Conforme, Marginal ou Surcharge résume le résultat.

Vues, capture PNG et configuration conservée

La scène se manipule à la souris : orbite, déplacement, zoom. Trois vues se choisissent d'un clic ou avec les touches 1, 2 et 3 : isométrique, côté, dessus. Un bouton télécharge une capture PNG de la scène. La configuration reste enregistrée dans le navigateur : porteur, matériel, position, vue et verrou se retrouvent au chargement suivant.

03La fiche technique PDF

Le bouton « Exporter la fiche technique » télécharge un PDF A4 de deux pages. La première porte les vues cotées de côté et de dessus, avec le cartouche du porteur et du matériel. La seconde détaille le porteur, le matériel, la position et les cotes, l'analyse de charge essieu par essieu, puis un bloc de signatures.

Le PDF est généré dans le navigateur avec React-PDF : aucun serveur ne le calcule.

04Stack et choix techniques

• Next.js (App Router) : la page est générée à l'avance et servie en fichier statique par Vercel.
• React Three Fiber et Three.js pour la scène 3D. Porteurs et matériels sont construits en volumes simples dans le code, sans fichier de modèle à télécharger.
• Drei pour les contrôles d'orbite, l'éclairage d'environnement, les ombres de contact, la grille et les étiquettes placées dans la scène.
• Zustand pour l'état de la configuration, l'historique des positions et l'enregistrement dans le navigateur.
• React-PDF pour la fiche technique, générée dans le navigateur.
• Tailwind CSS pour l'interface, avec une palette grise neutre inspirée des logiciels de CAO.

Tout le calcul se fait dans le navigateur : la 3D, les cotes, les charges et le PDF.

05Voir la démo

La démo est en ligne et ouverte à tous. Sous 900 px de large ou 520 px de haut, un écran recommande un ordinateur ou une tablette en paysage, et propose de l'ouvrir quand même.

06Ce qu'on retient

Générer la fiche technique dans le navigateur évite un service PDF distant : aucun serveur à payer ni à maintenir, et la configuration ne quitte pas le poste de l'utilisateur.