Créer une imprimante 3D CSS qui imprime réellement!

Depuis un moment, j’ai pris l’habitude de créer des scènes 3D avec du CSS juste pour le plaisir — généralement lors de mes live streams.

Avion de voltige 3D CSS réactif! 🛩️

Il fait des loopings et des tonneaux! 😎

Réagit au mouvement de la souris 🐭

👉 https://t.co/A1zNmfEzzi via @CodePen pic.twitter.com/87D7LIXLr2

— Jhey 🐻🛠 (Exploring Opportunities ✨) (@jh3yy) March 27, 2021

Chaque démo est une occasion d’essayer quelque chose de différent ou de trouver des moyens d’accomplir des choses avec du CSS. Une chose que je fais souvent est de prendre des suggestions sur ce que nous devrions essayer de créer lors de la diffusion en direct. Une suggestion récente était une imprimante qui imprime en « 3D ». Et voici ce que j’ai assemblé!

📢 La boutique d’impression CSS est ouverte pour le business! 😅

Impression gratuite! 😮

Entrez une URL d’image pour la voir imprimée par l’imprimante CSS 3D 😁

👉 https://t.co/UWTDAyUadn via @CodePen pic.twitter.com/z3q9dJavYv

— Jhey 🐻🛠 (Exploring Opportunities ✨) (@jh3yy) April 22, 2021

Créer des choses en 3D avec du CSS

I’ve written about making things 3D with CSS before. The general gist is that most scenes are a composition of cuboids.

Pour créer un cuboïde, nous pouvons utiliser des transformations CSS pour positionner les côtés d’un cuboïde — la propriété magique étant transform-style. En la définissant sur preserve-3d, nous pouvons transformer des éléments dans la troisième dimension :

* {
  transform-style: preserve-3d;
}

Une fois que vous créez quelques-unes de ces scènes, vous commencez à trouver des moyens d’accélérer les choses. J’aime utiliser Pug comme préprocesseur HTML. La possibilité de créer des mixins me permet de créer des cuboïdes plus rapidement. Les exemples de balisage de cet article utilisent Pug. Mais pour chaque démo CodePen, vous pouvez utiliser l’option « Afficher le HTML compilé » pour voir la sortie HTML :

mixin cuboid()
  .cuboid(class!=attributes.class)
    - let s = 0
    while s < 6
      .cuboid__side
      - s++

L’utilisation de +cuboid()(class="printer__top") produira ceci :

<div class="cuboid printer__top">
  <div class="cuboid__side"></div>
  <div class="cuboid__side"></div>
  <div class="cuboid__side"></div>
  <div class="cuboid__side"></div>
  <div class="cuboid__side"></div>
  <div class="cuboid__side"></div>
</div>

Ensuite, j’ai un bloc de CSS que j’utilise pour disposer les cuboïdes. Le plaisir ici est que nous pouvons tirer parti des propriétés CSS personnalisées pour définir les propriétés d’un cuboïde (comme indiqué dans la vidéo ci-dessus) :

.cuboid {
  // Defaults
  --width: 15;
  --height: 10;
  --depth: 4;
  height: calc(var(--depth) * 1vmin);
  width: calc(var(--width) * 1vmin);
  transform-style: preserve-3d;
  position: absolute;
  font-size: 1rem;
  transform: translate3d(0, 0, 5vmin);
}
.cuboid > div:nth-of-type(1) {
  height: calc(var(--height) * 1vmin);
  width: 100%;
  transform-origin: 50% 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotateX(-90deg) translate3d(0, 0, calc((var(--depth) / 2) * 1vmin));
}
.cuboid > div:nth-of-type(2) {
  height: calc(var(--height) * 1vmin);
  width: 100%;
  transform-origin: 50% 50%;
  transform: translate(-50%, -50%) rotateX(-90deg) rotateY(180deg) translate3d(0, 0, calc((var(--depth) / 2) * 1vmin));
  position: absolute;
  top: 50%;
  left: 50%;
}
.cuboid > div:nth-of-type(3) {
  height: calc(var(--height) * 1vmin);
  width: calc(var(--depth) * 1vmin);
  transform: translate(-50%, -50%) rotateX(-90deg) rotateY(90deg) translate3d(0, 0, calc((var(--width) / 2) * 1vmin));
  position: absolute;
  top: 50%;
  left: 50%;
}
.cuboid > div:nth-of-type(4) {
  height: calc(var(--height) * 1vmin);
  width: calc(var(--depth) * 1vmin);
  transform: translate(-50%, -50%) rotateX(-90deg) rotateY(-90deg) translate3d(0, 0, calc((var(--width) / 2) * 1vmin));
  position: absolute;
  top: 50%;
  left: 50%;
}
.cuboid > div:nth-of-type(5) {
  height: calc(var(--depth) * 1vmin);
  width: calc(var(--width) * 1vmin);
  transform: translate(-50%, -50%) translate3d(0, 0, calc((var(--height) / 2) * 1vmin));
  position: absolute;
  top: 50%;
  left: 50%;
}
.cuboid > div:nth-of-type(6) {
  height: calc(var(--depth) * 1vmin);
  width: calc(var(--width) * 1vmin);
  transform: translate(-50%, -50%) translate3d(0, 0, calc((var(--height) / 2) * -1vmin)) rotateX(180deg);
  position: absolute;
  top: 50%;
  left: 50%;
}

En utilisant des propriétés personnalisées, nous pouvons contrôler diverses caractéristiques des cuboïdes, et ainsi de suite :

• --width : la largeur d’un cuboïde sur le plan
• --height : la hauteur d’un cuboïde sur le plan
• --depth : la profondeur d’un cuboïde sur le plan
• --x : la position X sur le plan
• --y : la position Y sur le plan

Cela n’impressionne pas beaucoup jusqu’à ce que nous mettions le cuboïde dans une scène et que nous le rotions. Encore une fois, j’utilise des propriétés personnalisées pour manipuler la scène pendant que je travaille à créer quelque chose. Dat.GUI est d’un grand secours ici.

Si vous inspectez la démo, en utilisant le panneau de contrôle, les propriétés CSS personnalisées de la scène sont mises à jour. Ce scopement des propriétés CSS personnalisées évite beaucoup de code répétitif et maintient les choses DRY.

Plus d’une façon

Tout comme de nombreuses choses en CSS, il y a plus durs que d’une manière de le faire. Souvent, vous pouvez composer une scène à partir de cuboïdes et positionner les éléments comme et quand vous en avez besoin. Cela peut cependant devenir difficile à gérer. Souvent, il est nécessaire de regrouper des choses ou d’ajouter une sorte de conteneur.

Prenons cet exemple où la chaise est sa propre sous-scène qui peut être déplacée.

Beaucoup d’exemples récents ne sont pas aussi complexes. J’ai tendance à rechercher l’extrusion. Cela signifie que je suis en mesure de cartographier ce que je fabrique en éléments 2D. Par exemple, voici un hélicoptère que j’ai récemment créé:

.helicopter
  .helicopter__rotor
  .helicopter__cockpit
    .helicopter__base-light
    .helicopter__chair
      .helicopter__chair-back
      .helicopter__chair-bottom
    .helicopter__dashboard
  .helicopter__tail
  .helicopter__fin
    .helicopter__triblade
    .helicopter__tail-light
  .helicopter__stabilizer
  .helicopter__skids
    .helicopter__skid--left.helicopter__skid
    .helicopter__skid--right.helicopter__skid
  .helicopter__wing
    .helicopter__wing-light.helicopter__wing-light--left
    .helicopter__wing-light.helicopter__wing-light--right
  .helicopter__launchers
    .helicopter__launcher.helicopter__launcher--left
    .helicopter__launcher.helicopter__launcher--right
  .helicopter__blades

Ensuite, nous pouvons placer des cuboïdes dans tous les conteneurs en utilisant le mixin. Ensuite, appliquer une « épaisseur » requise à chaque cuboïde. L’épaisseur est dictée par des propriétés personnalisées scopées. Cette démo bascule la propriété --épaisseur pour les cuboïdes qui composent l’hélicoptère. Cela donne une idée de ce à quoi ressemblait la cartographie 2D au départ.

C’est l’essentiel de la manière de procéder pour créer des choses 3D avec CSS. La plongée dans le code révélera certainement quelques astuces. Mais, en général, échafauder une scène, peupler avec des cuboïdes, et colorer les cuboïdes. Vous voudrez souvent différentes nuances d’une couleur afin de différencier les côtés d’un cuboïde. Les détails supplémentaires sont soit des choses que nous pouvons ajouter à un côté d’un cuboïde, soit des transformations que nous pouvons appliquer à un cuboïde. Par exemple, rotation et déplacement sur l’axe Z.

Prenons maintenant considérer un exemple simplifié:

.scene
  .extrusion
    +cuboid()(class="extrusion__cuboid")

Le nouveau CSS pour créer un cuboïde avec extrusion pourrait ressembler à ceci. Notez comment nous incluons également des propriétés personnalisées scopées pour la couleur de chaque côté. Il serait sage de déposer quelques valeurs par défaut sous le :root ici ou des valeurs de secours :

.cuboid {
  width: 100%;
  height: 100%;
  position: relative;
}
.cuboid__side:nth-of-type(1) {
  background: var(--shade-one);
  height: calc(var(--thickness) * 1vmin);
  width: 100%;
  position: absolute;
  top: 0;
  transform: translate(0, -50%) rotateX(90deg);
}
.cuboid__side:nth-of-type(2) {
  background: var(--shade-two);
  height: 100%;
  width: calc(var(--thickness) * 1vmin);
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(50%, -50%) rotateY(90deg);
}
.cuboid__side:nth-of-type(3) {
  background: var(--shade-three);
  width: 100%;
  height: calc(var(--thickness) * 1vmin);
  position: absolute;
  bottom: 0;
  transform: translate(0%, 50%) rotateX(90deg);
}
.cuboid__side:nth-of-type(4) {
  background: var(--shade-two);
  height: 100%;
  width: calc(var(--thickness) * 1vmin);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-50%, -50%) rotateY(90deg);
}
.cuboid__side:nth-of-type(5) {
  background: var(--shade-three);
  height: 100%;
  width: 100%;
  transform: translate3d(0, 0, calc(var(--thickness) * 0.5vmin));
  position: absolute;
  top: 0;
  left: 0;
}
.cuboid__side:nth-of-type(6) {
  background: var(--shade-one);
  height: 100%;
  width: 100%;
  transform: translate3d(0, 0, calc(var(--thickness) * -0.5vmin)) rotateY(180deg);
  position: absolute;
  top: 0;
  left: 0;
}

Nous avons choisi trois nuances pour cet exemple. Mais parfois, vous pourriez en avoir besoin de plus. Cette démo regroupe cela tout en vous permettant de modifier des propriétés personnalisées scopées. La valeur « épaisseur » modifiera l’extrusion du cuboïde. Les transformations et les dimensions affecteront l’élément contenant avec la classe « extrusion ».

Échafaudage d’une Imprimante

Pour commencer, nous pouvons échafauder toutes les pièces dont nous avons besoin. Avec la pratique, cela devient plus évident. Mais la règle générale est d’essayer de visualiser tout sous forme de boîtes. Cela vous donne une bonne idée de la manière de décomposer quelque chose :

.scene
  .printer
    .printer__side.printer__side--left
    .printer__side.printer__side--right
    .printer__tray.printer__tray--bottom
    .printer__tray.printer__tray--top
    .printer__top
    .printer__back

Voyez si vous pouvez visualiser ce vers quoi nous nous dirigeons. Les deux pièces de côté laissent un espace au milieu. Ensuite, nous avons un cuboïde qui s’étend sur le dessus et un autre qui comble l’arrière. Puis deux cuboïdes pour constituer le bac à papier.

Une fois à ce stade, il s’agit simplement de remplir les cuboïdes, ce qui ressemble à ceci :

.scene
  .printer
    .printer__side.printer__side--left
      +cuboid()(class="cuboid--side")
    .printer__side.printer__side--right
      +cuboid()(class="cuboid--side")
    .printer__tray.printer__tray--bottom
      +cuboid()(class="cuboid--tray")
    .printer__tray.printer__tray--top
      +cuboid()(class="cuboid--tray")
    .printer__top
      +cuboid()(class="cuboid--top")
    .printer__back
      +cuboid()(class="cuboid--back")      

Notez comment nous sommes en mesure de réutiliser les noms de classe tels que cuboid--side. Ces cuboïdes sont susceptibles d’être de la même épaisseur et d’utiliser les mêmes couleurs. Leur position et leur taille sont dictées par l’élément contenant.

En assemblant les morceaux, nous pouvons obtenir quelque chose comme ceci.

L’explosion de la démo montre les différents cuboïdes qui composent l’imprimante. Si vous désactivez l’extrusion, vous pouvez voir les éléments contenants plats.

Ajout de Détails

Maintenant, vous avez peut-être remarqué qu’il y a plus de détails que ce que vous obtiendriez simplement en ajoutant des couleurs à chaque côté. Et cela revient à trouver des moyens d’ajouter des détails supplémentaires. Nous avons différentes options en fonction de ce que nous voulons ajouter.

Si c’est une image ou des changements de couleur de base, nous pouvons utiliser le background-image pour superposer des dégradés, etc.

Par exemple, le haut de l’imprimante comporte des détails, ainsi que l’ouverture de l’imprimante. Ce code traite le côté supérieur du cuboïde supérieur. Le dégradé gère l’ouverture de l’imprimante et les détails :

.cuboid--top {
  --thickness: var(--depth);
  --shade-one: linear-gradient(#292929, #292929) 100% 50%/14% 54% no-repeat, linear-gradient(var(--p-7), var(--p-7)) 40% 50%/12% 32% no-repeat, linear-gradient(var(--p-7), var(--p-7)) 30% 50%/2% 12% no-repeat, linear-gradient(var(--p-3), var(--p-3)) 0% 50%/66% 50% no-repeat, var(--p-1);
}

Pour le logo de l’ours, nous pourrions utiliser un background-image ou même recourir à un pseudo-élément et le positionner :

.cuboid--top > div:nth-of-type(1):after {
  content: '';
  position: absolute;
  top: 7%;
  left: 10%;
  height: calc(var(--depth) * 0.12vmin);
  width: calc(var(--depth) * 0.12vmin);
  background: url("https://assets.codepen.io/605876/avatar.png");
  background-size: cover;
  transform: rotate(90deg);
  filter: grayscale(0.5);
}

Si nous devons ajouter des détails plus étendus, nous devrons probablement sortir de l’utilisation de notre mixin cuboïde. Par exemple, le haut de notre imprimante va avoir un écran de prévisualisation à l’aide d’un img élément :

.printer__top
  .cuboid.cuboid--top
    .cuboid__side
    .cuboid__side
    .cuboid__side
    .cuboid__side
      .screen
        .screen__preview
          img.screen__preview-img
    .cuboid__side
    .cuboid__side

Ajoutez quelques détails supplémentaires et nous sommes prêts à introduire du papier dans le mélange !

Le voyage du papier

Qu’est-ce qu’une imprimante sans papier ? Nous voulons animer du papier volant dans l’imprimante et éjecté de l’autre côté. Quelque chose comme cette démo : cliquez n’importe où pour voir un morceau de papier introduit dans l’imprimante et imprimé.

Nous pouvons ajouter un bloc de papier à la scène avec un cuboïde, puis utiliser un élément distinct pour agir comme une seule feuille de papier :

.paper-stack.paper-stack--bottom
  +cuboid()(class="cuboid--paper")
.paper-stack.paper-stack--top
  .cuboid.cuboid--paper
    .cuboid__side
      .paper
        .paper__flyer
    .cuboid__side
    .cuboid__side
    .cuboid__side
    .cuboid__side
    .cuboid__side

Mais animer le papier volant dans l’imprimante nécessite des essais et erreurs. Il est sage de jouer avec différentes transformations dans l’inspecteur DevTools. C’est une bonne façon de voir à quoi les choses vont ressembler. Souvent, il est plus facile d’utiliser des éléments enveloppants aussi. Nous utilisons l’élément .paper pour effectuer la transfert, puis utilisons .paper__flyer pour animer l’alimentation du papier :

:root {
  --load-speed: 2;
}

.paper-stack--top .cuboid--paper .paper {
  animation: transfer calc(var(--load-speed) * 0.5s) ease-in-out forwards;
}
.paper-stack--top .cuboid--paper .paper__flyer {
  animation: fly calc(var(--load-speed) * 0.5s) ease-in-out forwards;
}
.paper-stack--top .cuboid--paper .paper__flyer:after {
  animation: feed calc(var(--load-speed) * 0.5s) calc(var(--load-speed) * 0.5s) forwards;
}

@keyframes transfer {
  to {
    transform: translate(0, -270%) rotate(22deg);
  }
}

@keyframes feed {
  to {
    transform: translate(100%, 0);
  }
}

@keyframes fly {
  0% {
    transform: translate3d(0, 0, 0) rotateY(0deg) translate(0, 0);
  }
  50% {
    transform: translate3d(140%, 0, calc(var(--height) * 1.2)) rotateY(-75deg) translate(180%, 0);
  }
  100% {
    transform: translate3d(140%, 0, var(--height)) rotateY(-75deg) translate(0%, 0) rotate(-180deg);
  }
}

Vous remarquerez qu’il y a un usage assez important de calc là-dedans. Pour composer la timeline de l’animation, nous pouvons utiliser des propriétés CSS personnalisées. En se référant à une propriété, nous pouvons calculer les délais corrects pour chaque animation de la chaîne. Le papier se transfère et vole en même temps. Une animation s’occupe du déplacement du conteneur, une autre s’occupe de la rotation du papier. Une fois que ces animations se terminent, le papier est alimenté dans l’imprimante avec l’animation feed. Le délai d’animation est égal à la durée des deux premières animations qui s’exécutent en même temps.

Exécutez cette démo où j’ai coloré les éléments de conteneur en rouge et en vert. Nous utilisons le pseudo-élément de .paper__flyer pour représenter la pièce de papier. Mais les éléments de conteneur font le travail difficile :

Vous pourriez vous demander quand le papier sort de l’autre côté. Mais, en réalité, le papier n’est pas le même élément tout au long. Nous utilisons un élément pour entrer dans l’imprimante. Et un autre élément pour le papier lorsqu’il s’envole de l’imprimante. C’est une autre occasion où des éléments supplémentaires facilitent notre vie.

Le papier utilise plus d’un élément pour faire le tour, puis le papier est positionné à l’extrémité de cet élément. En exécutant cette démo avec plus d’éléments de conteneur colorés, vous montre comment cela fonctionne.

Encore une fois, cela nécessite un peu d’essai et d’erreur, ainsi que de réfléchir à la manière dont nous pouvons exploiter l’utilisation d’éléments de conteneur. Avoir un conteneur avec une transform-origin décalée nous permet de créer le tour.

Impression

Nous avons tout en place. Maintenant, il s’agit de réellement imprimer quelque chose. Pour ce faire, nous allons ajouter un formulaire qui permet aux utilisateurs de passer l’URL d’une image:

form.customer-form
  label(for="print") Print URL
  input#print(type='url' required placeholder="URL for Printing")
  input(type="submit" value="Print")

Avec un peu de style, nous obtenons quelque chose comme ceci.

Le comportement natif des formulaires et l’utilisation de required et type="url" signifie que nous n’acceptons qu’une URL. Nous pourrions pousser cela plus loin avec un pattern et vérifier certains types d’images. Mais certaines bonnes URL pour des images aléatoires ne comprennent pas le type d’image, comme https://source.unsplash.com/random.

La soumission de notre formulaire ne se comporte pas comme nous le voulons, et aussi l’animation d’impression s’exécute une fois au chargement. Une solution pour contourner cela serait de n’exécuter l’animation que lorsqu’une certaine classe est appliquée à l’imprimante.

Lorsque nous soumettons le formulaire, nous pouvons faire une demande pour l’URL et ensuite définir le src pour les images dans notre scène — une image étant l’aperçu à l’écran sur l’imprimante, l’autre étant une image sur un côté du papier. En fait, lorsque nous imprimons, nous allons ajouter un nouvel élément pour chaque morceau de papier imprimé. De cette façon, chaque impression semble être ajoutée à un tas. Nous pouvons supprimer le morceau de papier que nous avons au chargement.

Commençons par gérer la soumission du formulaire. Nous allons empêcher l’événement par défaut et appeler une fonction PROCESS:

const PRINT = e => {
  e.preventDefault()
  PROCESS()
}

const PRINT_FORM = document.querySelector('form')
PRINT_FORM.addEventListener('submit', PRINT)

Cette fonction va gérer la demande pour notre source d’image:

let printing = false

const PREVIEW = document.querySelector('img.screen__preview-img')
const SUBMIT = document.querySelector('[type="submit"]')
const URL_INPUT = document.querySelector('[type="url"]')

const PROCESS = async () => {
  if (printing) return
  printing = true
  SUBMIT.disabled = true
  const res = await fetch(URL_INPUT.value)
  PREVIEW.src = res.url
  URL_INPUT.value = ''
}

Nous avons également défini une variable printing à true, que nous utiliserons pour suivre l’état actuel et désactiver le bouton du formulaire.

Pourquoi demandons-nous l’image au lieu de la définir sur l’image ? Nous voulons une URL absolue vers une image. Si nous utilisons l’URL « Unsplash » mentionnée ci-dessus, et que nous la partageons entre les images, cela pourrait ne pas fonctionner. C’est parce que nous pouvons rencontrer des scénarios où différentes images sont affichées.

Une fois que nous avons la source de l’image, nous définissons la source de l’image de prévisualisation sur cette URL et réinitialisons la valeur d’entrée du formulaire.

Pour déclencher l’animation, nous pouvons nous connecter à l’événement « load » de notre image de prévisualisation. Lorsque l’événement se déclenche, nous créons un nouvel élément pour la pièce de papier à imprimer et l’ajoutons à l’élément printer. En même temps, nous ajoutons une classe printing à notre imprimante. Nous pouvons l’utiliser pour déclencher la première partie de notre animation de papier :

PREVIEW.addEventListener('load', () => {
  PRINTER.classList.add('printing')
  const PRINT = document.createElement('div')
  PRINT.className = 'printed'
  PRINT.innerHTML = `
    <div class="printed__spinner">
      <div class="printed__paper">
        <div class="printed__papiere">
          <img class="printed__image" src=${PREVIEW.src}/>
        </div>
      </div>
      <div class="printed__paper-back"></div>
    </div>
  `
  PRINTER.appendChild(PRINT)
  // Après un certain laps de temps, réinitialisez l'état
  setTimeout(() => {
    printing = false
    SUBMIT.removeAttribute('disabled')
    PRINTER.classList.remove('printing')
  }, 4500)
})

Après un certain laps de temps, nous pouvons réinitialiser l’état. Une approche alternative consisterait à débouncer un événement animationend montant. Mais nous pouvons utiliser un setTimeout, car nous savons combien de temps durera l’animation.

Notre impression n’est cependant pas à la bonne échelle. Et c’est parce que nous devons redimensionner l’image à la pièce de papier. Nous avons besoin d’un petit morceau de CSS pour cela :

.printed__image {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

Ce serait également sympa si les lumières à l’avant de l’imprimante communiquaient que l’imprimante est occupée. Nous pourrions ajuster la teinte de l’une des lumières lorsque l’imprimante imprime :

.progress-light {
  background: hsla(var(--progress-hue, 104), 80%, 50%);
}
.printing {
  --progress-hue: 10; /* Correspond à rouge */
}

Mettez tout cela ensemble et nous avons une imprimante « fonctionnelle » réalisée avec CSS et un soupçon de JavaScript.

C’est tout!

Nous avons examiné comment nous pouvons fabriquer une imprimante 3D fonctionnelle avec CSS, un soupçon de JavaScript et en tirant parti de Pug. Essayez d’ajouter le lien d’image suivant dans le champ URL, ou un autre de votre choix, et essayez-le!

https://source.unsplash.com/random

Nous avons couvert un tas de choses différentes pour y parvenir, notamment celles-ci:

• comment créer des choses 3D avec CSS
• l’utilisation de mixins Pug
• l’utilisation de propriétés CSS personnalisées à portée limitée pour garder les choses DRY
• l’utilisation de l’extrusion pour créer des scènes 3D
• la gestion des formulaires avec JavaScript
• la composition de chronologies d’animation avec des propriétés personnalisées

Le plaisir de créer ces démos est que beaucoup d’entre elles posent des problèmes différents à surmonter, comme la création de certaines formes ou la construction de certaines animations. Il y a souvent plus d’une façon de faire quelque chose.

Quelles choses cool pourriez-vous créer avec du CSS 3D? J’adorerais voir!

Comme toujours, merci de votre lecture. Vous voulez en voir plus? Venez me trouver sur Twitter ou consultez mon live stream!

Questions Fréquemment Posées (FAQs) sur l’imprimante 3D CSS