Sports Mockup
- Identité visuelle
- Application web
- 3D temps réel
Le projet
Sports Mockup est un configurateur 3D de tenues de sport, en ligne sur sportsmockup.com. Un club, un équipementier ou un designer y habille un joueur de basket en trois dimensions — couleurs zone par zone, logos, textes, motifs — puis exporte les visuels qui serviront à présenter la tenue. Tout se passe dans le navigateur, sans logiciel à installer. Orealys a conçu le produit de bout en bout : le nom et le logo, le modèle 3D et ses textures, l’interface, le moteur de rendu, les comptes utilisateurs et l’hébergement.
Intervention agence
- Identité visuelle
- Conception de l’interface (UX / UI)
- Modélisation et textures 3D
- Développement 3D temps réel (WebGL)
- Développement back-end et comptes
- Hébergement et mise en ligne
01 — Ce que fait l’outil
Les
fonctionnalités
Un seul écran : le joueur au centre, les réglages à droite, les actions en haut. Derrière cette sobriété, de quoi aller du premier essai de couleurs à l’image livrée au client.
-
01
Un joueur en 3D temps réel
Le modèle est rendu dans le navigateur, en WebGL. On le tourne à la souris ou au doigt, on zoome, on saute d’un clic sur le col, les emmanchures, le short, les pieds ou le visage ; la rotation automatique le fait tourner tout seul.
-
02
Les couleurs, zone par zone
Maillot : corps, côtés, col, emmanchures. Short : corps, bandes, ceinture, bas de chaque jambe. Puis chaussettes, chaussures et manchon. On coche plusieurs zones et on applique une couleur à toutes d’un coup.
-
03
Tissu, lumière et ombre
Effet maille et brillance réglables, texture du col et des emmanchures. Trois lumières orientables et colorables, fond, exposition, occlusion ambiante et ombre au sol : la tenue se juge dans l’éclairage de son choix.
-
04
Logos importés
PNG transparent ou SVG, glissés sur le panneau ou directement sur le vêtement, puis déplacés à la souris. Le visuel est projeté sur le patron des pièces : il suit le tissu sans se déformer sur les flancs. L’option « Embossed » lui donne l’épaisseur d’un flocage.
-
05
Textes et polices
N’importe quelle police Google Fonts, chargée à la demande, et un catalogue de polices sport, display ou script à parcourir en aperçu. Graisse, couleur, contour, courbure en arc vers le haut ou vers le bas : de quoi poser un nom d’équipe comme un vrai marquage.
-
06
Motifs
Une bibliothèque de motifs — losanges, nid d’abeille, étoiles, trames — recolorables, à l’échelle réglable, sur fond transparent ou coloré, devant, dans le dos ou sur le short.
-
07
Générateur aléatoire
Un dé en haut de l’écran : chaque clic compose une tenue complète, palette, motif, nom et numéros compris.
-
08
Calques
Chaque zone du vêtement a sa pile de calques, réordonnable au glisser.
-
09
Comptes et sauvegarde
Connexion par e-mail ou avec Google ; créations enregistrées, dupliquées, partagées par lien.
-
10
Export d’images
Face, trois quarts et dos sur une même image, fond transparent, jusqu’à 3840 × 2160 px.
-
11
Cinq langues
Français, anglais, espagnol, allemand et italien. L’outil prend la langue du navigateur et retient le choix du visiteur.
-
12
Sur ordinateur comme sur téléphone
Sur petit écran, le panneau devient un tiroir qui se replie sous le joueur ; on tourne le modèle et on déplace les calques au doigt.
02 — En gros plan
Le générateur aléatoire
Un clic sur le dé, et une tenue complète apparaît : une palette harmonieuse tirée au hasard — complémentaire, analogue ou triade, parfois un maillot clair avec les couleurs en rappel —, les couleurs posées zone par zone, un motif ton sur ton, un nom d’équipe en arc, un numéro petit et centré sur la poitrine, grand dans le dos, dans une police sport et la couleur la plus contrastée. La vue ne bouge pas : on compare les propositions sur place, et l’outil prévient avant de remplacer une création qui n’est pas enregistrée.
Les calques
Maillot devant, maillot dos, short devant, short dos : chaque zone a sa pile de calques — logos, textes, motifs. On les réordonne au glisser, on les monte, les descend, les supprime. Un calque se règle dans le panneau ou se déplace directement sur le vêtement, à la souris ; les flèches du clavier affinent. Le visuel s’arrête de lui-même au col, aux emmanchures et aux coutures.
La lumière
Trois lumières, réglées une par une : la principale et deux contre-jours, à gauche et à droite. Pour chacune, la puissance, l’angle, la hauteur et la couleur ; puis une ambiance générale, la couleur du fond, l’exposition et l’occlusion des plis. De l’éclairage neutre d’un catalogue à l’ambiance d’une salle, contre-jours orange et bleu compris — et un bouton pour revenir aux réglages par défaut.
La sauvegarde
Une création enregistrée garde tout : couleurs, réglages de la scène, calques et images importées. La fenêtre « Mes créations » dit à tout moment où l’on en est — nouvelle, enregistrée, modifiée depuis — et sépare « Enregistrer », qui met à jour la création ouverte, d’« Enregistrer une copie », qui laisse l’original intact. Ouvrir, renommer, dupliquer, supprimer ; et un lien de partage en lecture seule pour faire valider une tenue par quelqu’un qui n’a pas de compte.
L’export
L’image de présentation en un clic : la vue de face, de trois quarts et de dos, rapprochées sur une même image. Fond du studio ou transparent pour un montage, ombre au sol au choix, format 16:9, 4:3 ou 1:1, en taille standard ou en HD jusqu’à 3840 × 2160 px. L’aperçu suit chaque réglage, avant le téléchargement du PNG.
03 — Ce qui en sort
Côte à
côte
Tous les joueurs de cette page sortent de l’outil tel qu’il est en ligne : tenues tirées par le générateur, rendues en 3D dans le navigateur — sur ordinateur comme sur téléphone.
Contact
Parlons-en.
Un projet, une refonte, une nouvelle identité ? Parlons-en simplement pour poser les bases et voir comment avancer ensemble.