SVG en 3D

En trois gestes

1. Déposez votre dessin. Un fichier SVG passe directement. Un logo en PNG ou en JPEG est tracé au passage : ses contours deviennent des formes, que l'on peut alors mettre en volume.
2. Réglez. L'épaisseur, l'adoucissement des arêtes et leur arrondi, la matière parmi onze, la couleur, l'ombre, le mouvement. Tout se voit à l'écran pendant que vous bougez les curseurs.
3. Emportez. L'image PNG est gratuite, sans compte. Le code s'emporte avec un abonnement.

Mettre l'objet sur votre site

Deux façons, selon ce que vous avez téléchargé.

Le bloc à coller

C'est le cas courant, pour poser l'objet dans une page qui existe déjà — une page d'accueil, par exemple. Le bouton Copier le bloc met le code dans votre presse-papier et télécharge en même temps le fichier effect-labs-3d.js. Collez le bloc où vous voulez dans votre page, déposez le fichier dans le même dossier, rechargez.

La page autonome

Un fichier unique qui fonctionne seul, pratique pour voir le résultat tout de suite ou le montrer à quelqu'un. Pour l'intégrer sans y toucher, appelez-le dans un cadre :

<iframe src="effect-labs-3d.html" style="width:100%;height:380px;border:0"
        title="objet 3D" loading="lazy"></iframe>

L'avantage du cadre : l'objet est totalement isolé du CSS et du JavaScript de votre page, aucun risque de conflit. L'inconvénient : vous fixez sa hauteur à la main.

Pourquoi pas un simple copier-coller ?

Parce que la 3D repose sur Three.js, qui pèse environ 600 Ko. On ne met pas 600 Ko dans un presse-papier. Et je refuse les deux raccourcis habituels : charger la bibliothèque depuis un CDN vous rendrait dépendant d'un service tiers, la servir depuis mon serveur vous rendrait dépendant du mien. Un fichier posé chez vous ne dépend de personne.

Comment c'est fabriqué

Rien n'est caché : le chemin est celui de Three.js, et vous pouvez le refaire à la main. L'outil ne fait que vous éviter les allers-retours.

// 1. lire le SVG et en tirer des formes fermées
const paths = new THREE.SVGLoader().parse(svgText).paths;
const shapes = THREE.SVGLoader.createShapes(paths[0]);   // trous compris

// 2. donner de l'épaisseur
const geo = new THREE.ExtrudeGeometry(shapes, {
  depth: 20, bevelEnabled: true, bevelThickness: 2,
  bevelSize: 1.8, bevelSegments: 8   // < 4 : une facette plate, pas un arrondi
});

// 3. matière et lumière
const mesh = new THREE.Mesh(geo, new THREE.MeshPhysicalMaterial({
  color: 0x7c5cff, metalness: 1, roughness: 0.34, envMap: env
}));

Deux pièges m'ont coûté du temps, autant vous les épargner :

• Les dessins au trait ne donnent rien. Un chemin en fill:none avec un stroke n'a aucune surface à extruder : l'écran reste vide, sans le moindre message d'erreur. Or la plupart des icônes sont dans ce cas. Il faut traiter le trait à part, en le suivant par un tube.
• Les formes issues d'un traçage se recouvrent exactement. Leurs faces coïncident, et le rendu part en stries — ce qu'on appelle le z-fighting. Un décalage minuscule en profondeur les départage.

Ce qui marche, ce qui ne marche pas

• Un logo à aplats : parfait. C'est le cas pour lequel l'outil est fait.
• Une icône au trait : oui. Le trait devient un tube en volume.
• Une photographie : non, et ce n'est pas une limite qu'on lèvera. Une photo n'a pas de forme à extruder ; son traçage donne une bouillie de contours.
• PNG plutôt que JPEG. Les deux passent, mais la compression du JPEG laisse des halos autour des contours, que le traçage suit fidèlement. Un PNG à fond transparent donne le résultat le plus net.

Questions fréquentes

L'outil est-il gratuit ?

L'aperçu, tous les réglages et l'export en image PNG sont gratuits, sans compte. Seul l'export du code demande un abonnement.

Faut-il installer Three.js de son côté ?

Non. La bibliothèque est incluse dans le fichier que vous téléchargez. Vous n'avez rien à installer et aucune dépendance externe.

Est-ce que ça marche sur WordPress ou Webflow ?

Oui. Déposez le fichier JavaScript dans vos médias ou vos ressources, puis collez le bloc dans un module HTML en corrigeant le chemin du fichier.

Puis-je modifier les couleurs après coup ?

Oui. Les réglages sont écrits en clair à la fin du code livré : changez la valeur, rechargez.

Combien pèse l'effet sur ma page ?

Environ 690 Ko, dont 600 pour Three.js — soit à peu près 160 Ko réellement transférés si votre serveur compresse, ce que font la plupart. Le fichier est mis en cache par le navigateur : il n'est téléchargé qu'une fois.

À voir aussi : les effets SVG et les effets 3D du catalogue.