Bouw een 3D CSS-printer die echt print!

Al enige tijd creëer ik deze 3D-scènes met CSS voor de lol — meestal tijdens mijn live stream.

3D CSS Responsieve Stunt Vliegtuig! 🛩️

Het doet loops en rollen! 😎

Reageert op muisbeweging 🐭

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

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

Elke demo is een kans om iets anders te proberen of manieren te bedenken om dingen te doen met CSS. Een ding dat ik vaak doe, is suggesties inpikken voor wat we op de stream zouden moeten proberen te maken. Een recente suggestie was een printer die in “3D” print. En hier is wat ik heb samengesteld!

📢 CSS Print Shop is open voor zaken! 😅

Gratis printen! 😮

Voer een afbeeldings-URL in om te zien hoe deze wordt afgedrukt door de 3D CSS Printer 😁

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

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

Dingen maken in 3D met CSS

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

Om een balk te maken, kunnen we CSS-transformaties gebruiken om de zijden van een balk te positioneren — de magische eigenschap is transform-style. Deze instellen op preserve-3d stelt ons in staat om elementen in de derde dimensie te transformeren:

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

Nadat je een paar van deze scènes hebt gemaakt, begin je manieren te ontdekken om dingen te versnellen. Ik gebruik graag Pug als HTML-voorverwerker. De mogelijkheid tot mixins geeft me een manier om kubussen sneller te creëren. De markup-voorbeelden in dit artikel gebruiken Pug. Maar voor elke CodePen-demo kun je de optie “View Compiled HTML” gebruiken om de HTML-uitvoer te zien:

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

Gebruik van +cuboid()(class="printer__top") zal dit opleveren:

<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>

Dan heb ik een vast blok CSS dat ik gebruik om de kubussen te plaatsen. De vreugde hier is dat we CSS-aangepaste eigenschappen kunnen gebruiken om de eigenschappen van een kubus te definiëren (zoals getoond in de video hierboven):

.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%;
}

Met aangepaste eigenschappen kunnen we verschillende kenmerken van de kubussen beheren, enzovoort:

• --width: de breedte van een kubus op het vlak
• --height: de hoogte van een kubus op het vlak
• --depth: de diepte van een kubus op het vlak
• --x: de X-positie op het vlak
• --y: de Y-positie op het vlak

Dit is niet erg indrukwekkend totdat we de kubus in een scène plaatsen en deze roteren. Nogmaals, ik gebruik aangepaste eigenschappen om de scène te manipuleren terwijl ik iets aan het maken ben. Dat.GUI is hier super handig bij.

Als je de demo inspecteert, met behulp van het bedieningspaneel worden aangepaste CSS-eigenschappen op de scène bijgewerkt. Dit scopes van aangepaste CSS-eigenschappen bespaart veel herhaald code en houdt dingen DRY.

Meer Dan Eén Manier

Net als veel dingen in CSS, is er meer dan één manier om het te doen. Vaak kun je een scène samenstellen uit balken en dingen positioneren wanneer je dat nodig hebt. Het kan echter moeilijk te beheren worden. Vaak is er behoefte aan het groeperen van dingen of het toevoegen van een soort container.

Overweeg dit voorbeeld waarbij de stoel zijn eigen sub-scène is die verplaatst kan worden.

Veel recente voorbeelden zijn niet zo complex. Ik heb de neiging naar extrusie te grijpen. Dit betekent dat ik in staat ben om in 2D-elementen uit te tekenen wat ik maak. Bijvoorbeeld, hier is een helikopter die ik onlangs heb gemaakt:

.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

Vervolgens kunnen we balken in alle containers plaatsen met behulp van de mixin. Vervolgens wordt aan elke balk een vereiste “dikte” toegepast. De dikte wordt bepaald door scoped aangepaste eigenschappen. Deze demo schakelt de --dikte eigenschap voor balken die de helikopter vormen om. Het geeft een idee van hoe de 2D-mapping er in eerste instantie uitzag.

Dat is in feite hoe je 3D-dingen met CSS kunt maken. Een kijkje achter de schermen in de code zal zeker enkele trucs onthullen. Maar in het algemeen: een scène opzetten, vullen met balken en de balken inkleuren. Je zult vaak verschillende tinten van een kleur willen hebben, zodat we de zijkanten van een balk kunnen onderscheiden. Eventuele extra details zijn ofwel dingen die we aan een zijde van een balk kunnen toevoegen, of transformaties die we aan een balk kunnen toepassen. Bijvoorbeeld, draaien en verplaatsen op de Z-as.

Laten we een vereenvoudigd voorbeeld beschouwen:

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

De nieuwe CSS voor het creëren van een balk met extrusie zou er zo kunnen uitzien. Merk op hoe we ook scoped aangepaste eigenschappen voor de kleur van elke zijde opnemen. Het zou verstandig zijn om hier enkele standaardwaarden onder :root te plaatsen of fallback-waarden:

.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;
}

We hebben voor dit voorbeeld drie tinten gekozen. Maar soms heb je misschien meer nodig. Deze demo brengt dat samen, maar stelt je in staat om scoped aangepaste eigenschappen te wijzigen. De “dikte” waarde zal de uitsparing van de balk veranderen. De transformaties en afmetingen zullen het omhullende element met de klasse “extrusie” beïnvloeden.

Het opstellen van een Printer

Om te beginnen kunnen we alle onderdelen die we nodig hebben opstellen. Met oefening wordt dit duidelijker. Maar de algemene regel is om alles te proberen te visualiseren als dozen. Dat geeft je een goed idee van hoe je iets kunt opsplitsen:

.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

Zie of je kunt visualiseren waar we naartoe willen. De twee zijstukken laten een opening in het midden. Dan hebben we een balk die over de bovenkant ligt en een die de achterkant opvult. Dan twee balken om de papiervoorziening te maken.

Zodra je op dat stadium bent, komt het erop neer de balken te vullen, wat er zo uitziet:

.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")      

Merk op hoe we in staat zijn de klasse namen zoals balk--zij opnieuw te gebruiken. Deze balken zullen waarschijnlijk dezelfde dikte hebben en dezelfde kleuren gebruiken. Hun positie en grootte wordt bepaald door het omhullende element.

Door het geheel te plaatsen, kunnen we zoiets krijgen.

Het ontplooien van de demo toont de verschillende balken die de printer vormen. Als je de extrusie uitzet, kun je de platte omhullende elementen zien.

Extra Detail Toevoegen

Nu heb je misschien gemerkt dat er meer detail is dan je zou krijgen door gewoon kleuren aan elke zijde toe te voegen. En dit komt neer op het vinden van manieren om extra detail toe te voegen. We hebben verschillende opties afhankelijk van wat we willen toevoegen.

Als het gaat om een afbeelding of enkele basale kleurwijzigingen, kunnen we gebruik maken van `background-image` om gradiënten te stapelen, enzovoort.

Bijvoorbeeld, de bovenkant van de printer heeft details, evenals de opening van de printer. Deze code behandelt de bovenkant van het bovenste rechthoekige blok. De gradiënt houdt rekening met de opening van de printer en de details:

.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);
}

Voor het beerlogo kunnen we een `background-image` gebruiken of zelfs een pseudo-element aanraken en het positioneren:

.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);
}

Als we meer uitgebreide details moeten toevoegen, zullen we waarschijnlijk moeten stoppen met het gebruik van onze rechthoekige mixin. Bijvoorbeeld, de bovenkant van onze printer zal een voorschouwschijf hebben met behulp van een `img` element:

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

Voeg wat meer details toe en we zijn klaar om wat papier in de mix te krijgen!

Papierreis

Wat is een printer zonder papier? We willen een animatie van papier dat in de printer vliegt en aan de andere kant wordt weggeschoten. Iets als deze demo: klik ergens om een stuk papier te zien dat in de printer wordt gevoerd en gedrukt.

We kunnen een blok papier aan de scène toevoegen met een rechthoek en vervolgens een afzonderlijk element gebruiken als een enkel vel 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

Maar het animeren van het papier dat in de printer vliegt kost wat trial and error. Het is verstandig om te spelen met verschillende transformaties in de DevTools-inspecteur. Dit is een goede manier om te zien hoe dingen eruit zullen zien. Vaak is het ook gemakkelijker om wrapper-elementen te gebruiken. We gebruiken het `.paper` element om de overdracht te maken en vervolgens `.paper__flyer` om het papier te animeren:

: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);
  }
}

Je zult merken dat er een behoorlijk aantal calc gebruikt wordt hier. Om de animatietijdlijn samen te stellen kunnen we CSS-aangepaste eigenschappen gebruiken. Door naar een eigenschap te verwijzen, kunnen we de juiste vertragingen berekenen voor elke animatie in de keten. Het papier wordt overgebracht en vliegt tegelijkertijd. Een animatie houdt het verplaatsen van de container in, een andere houdt het draaien van het papier in. Zodra die animaties eindigen, wordt het papier in de printer gevoerd met de feed animatie. De animatievertraging is gelijk aan de duur van de eerste twee animaties die tegelijkertijd lopen.

Voer deze demo uit waar ik de container-elementen rood en groen heb gekleurd. We maken gebruik van .paper__flyer’s pseudo-element om het stukje papier te vertegenwoordigen. Maar de container-elementen doen het zware werk:

Je vraagt je misschien af wanneer het papier aan de andere kant uitkomt. Maar in feite is het papier niet hetzelfde element geheel door. We gebruiken één element om in de printer te gaan. En een ander element voor het papier wanneer het uit de printer vliegt. Dit is een ander voorbeeld waar extra elementen ons leven gemakkelijker maken.

Het papier gebruikt meer dan één element om de lus te doen, en vervolgens wordt het papier geplaatst aan de rand van dat element. Het uitvoeren van deze demo met meer gekleurde container-elementen toont hoe het werkt.

Nogmaals, het vereist een beetje trial en error, evenals nadenken over hoe we het gebruik van container-elementen kunnen benutten. Een container met een offset transform-origin stelt ons in staat om de lus te creëren.

Printen

Alles is in orde. Nu gaan we echt iets printen. Hiervoor gaan we een formulier toevoegen waarmee gebruikers de URL van een afbeelding kunnen invoeren:

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

Met wat opmaak krijgen we zoiets als dit.

De standaardgedrag van formulieren en het gebruik van required en type="url" betekent dat we alleen een URL accepteren. We kunnen dit verder uitbreiden met een pattern en controleren op bepaalde afbeeldingsindelingen. Maar sommige goede URLs voor willekeurige afbeeldingen bevatten niet de afbeeldingsindeling, zoals https://source.unsplash.com/random.

Het indienen van ons formulier vertoont niet het gewenste gedrag, en ook de printanimatie loopt één keer bij laden. Een oplossing hiervoor zou zijn om de animatie alleen uit te voeren wanneer een bepaalde klasse aan de printer wordt toegepast.

Bij het indienen van het formulier kunnen we een aanvraag doen voor de URL en vervolgens de src instellen voor afbeeldingen in onze scène – één afbeelding is de vooraanzichtspreview op de printer, de andere is een afbeelding aan één kant van het papier. In feite, wanneer we printen, gaan we een nieuw element toevoegen voor elke geprijsde stuk papier. Op die manier lijkt elke print toegevoegd te worden aan een stapel. We kunnen het stuk papier dat we bij laden hebben verwijderen.

Laten we beginnen met het afhandelen van het formulier-indienen. We gaan de standaardgebeurtenis voorkomen en een PROCESS functie aanroepen:

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

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

Deze functie zal de aanvraag voor onze afbeeldingsbron afhandelen:

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 = ''
}

We hebben ook een printing variabele ingesteld op true, die we gaan gebruiken om de huidige staat bij te houden en de knop van het formulier te deactiveren.

Waarom maken we een aanvraag voor de afbeelding in plaats van deze rechtstreeks op de afbeelding te zetten? We willen een absolute URL naar een afbeelding. Als we de “Unsplash” URL hierboven gebruiken en deze vervolgens delen tussen de afbeeldingen, kan dit mogelijk niet werken. Dat komt omdat we scenario’s kunnen tegenkomen waarin we verschillende afbeeldingen weergeven.

Zodra we de afbeeldingsbron hebben, zetten we de voorbeeld-afbeeldingsbron in op die URL en resetten we de invoerwaarde van het formulier.

Om de animatie te activeren, kunnen we in de “load” gebeurtenis van onze voorbeeldafbeelding inspringen. Wanneer de gebeurtenis afgaat, maken we een nieuw element voor het stuk papier om te printen en voegen we het toe aan het printer element. Tegelijkertijd voegen we een printing klasse toe aan onze printer. We kunnen dit gebruiken om het eerste deel van onze papieranimatie te activeren:

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)
  // Na een bepaalde tijd reset de staat
  setTimeout(() => {
    printing = false
    SUBMIT.removeAttribute('disabled')
    PRINTER.classList.remove('printing')
  }, 4500)
})

Na een bepaalde tijd kunnen we de staat resetten. Een alternatieve aanpak zou zijn om een bubbelende animationend gebeurtenis te debounceren. Maar we kunnen een setTimeout gebruiken, aangezien we weten hoe lang de animatie zal duren.

Onze afdruk is echter niet op de juiste schaal. En dat komt omdat we de afbeelding moeten vermenigvuldigen met het stuk papier. We hebben hiervoor een klein stukje CSS nodig:

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

Het zou ook welkom zijn als de lichten aan de voorkant van de printer aangeven dat de printer bezet is. We kunnen de kleur van een van de lichten aanpassen wanneer de printer aan het printen is:

.progress-light {
  background: hsla(var(--progress-hue, 104), 80%, 50%);
}
.printing {
  --progress-hue: 10; /* Komt overeen met rood */
}

Doe dat samen en we hebben een “werkende” printer gemaakt met CSS en een klein beetje JavaScript.

Dat is het!

We hebben gekeken hoe we een functionele 3D-printer kunnen maken met CSS, een klein beetje JavaScript en door Pug te gebruiken. Probeer de volgende afbeeldingslink in het URL-veld toe te voegen, of een andere naar keuze, en test het uit!

https://source.unsplash.com/random

We hebben een hoop verschillende dingen behandeld om dit te bereiken, waaronder deze:

• hoe je 3D-dingen maakt met CSS
• het gebruik van Pug-mixins
• het gebruik van scoped aangepaste CSS-eigenschappen om dingen DRY te houden
• het gebruik van extrusie om 3D-scènes te creëren
• het afhandelen van formulieren met JavaScript
• het samenstellen van animatietijdlijnen met aangepaste eigenschappen

De vreugde van het maken van deze demo’s is dat velen van hen verschillende problemen oplossen, zoals het creëren van bepaalde vormen of het bouwen van bepaalde animaties. Er is vaak meer dan één manier om iets te doen.

Wat coole dingen zou je kunnen maken met 3D-CSS? Ik zou het graag willen zien!

Zoals altijd, bedankt voor het lezen. Wil je meer zien? Kom me vinden op Twitter of bekijk mijn live stream!

Veelgestelde vragen (FAQs) over 3D CSS Printer