Creare una Stampante 3D CSS che Stampa Davvero!

Per un po’ ormai, ho creato queste scene 3D con CSS per divertimento — di solito durante la mia live stream.

Aereo Stunt 3D CSS Responsivo! 🛩️

Fa looping e roll! 😎

Risponde al movimento del mouse 🐭

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

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

Ogni demo è un’opportunità per provare qualcosa di diverso o trovare modi per fare cose con CSS. Una cosa che spesso faccio è prendere suggerimenti su cosa dovremmo provare a creare durante la live. Un recente suggerimento era una stampante che stampa in “3D”. E ecco cosa ho assemblato!

📢 CSS Print Shop è aperta per affari! 😅

Stampa gratuita! 😮

Inserisci un URL dell’immagine per vederla stampata dalla Stampante CSS 3D 😁

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

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

Creare Cose 3D con CSS

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

Per creare un cuboide, possiamo utilizzare le trasformazioni CSS per posizionare i lati di un cuboide — la proprietà magica è transform-style. Impostando questo a preserve-3d ci permette di trasformare gli elementi nella terza dimensione:

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

Una volta creati alcuni di questi scenari, inizi a individuare metodi per velocizzare le cose. Mi piace utilizzare Pug come preprocessore HTML. La capacità di creare mixin mi consente di creare cuboidi più rapidamente. Gli esempi di markup in questo articolo utilizzano Pug. Ma per ogni demo CodePen puoi utilizzare l’opzione “Visualizza HTML compilato” per vedere l’output HTML:

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

Utilizzando +cuboid()(class="printer__top") produrrà questo:

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

Quindi ho un blocco di CSS che uso per posizionare i cuboidi. La gioia qui è che possiamo sfruttare le proprietà CSS personalizzate per definire le proprietà di un cuboide (come mostrato nel video sopra):

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

Utilizzando proprietà personalizzate, possiamo controllare varie caratteristiche dei cuboidi, e così via:

• --width: la larghezza di un cuboide sul piano
• --height: l’altezza di un cuboide sul piano
• --depth: la profondità di un cuboide sul piano
• --x: la posizione X sul piano
• --y: la posizione Y sul piano

Questo non è molto impressionante finché non inseriamo il cuboide in una scena e lo ruotiamo. Ancora una volta, uso proprietà personalizzate per manipolare la scena mentre lavoro alla creazione di qualcosa. Dat.GUI si rivela estremamente utile in questo contesto.

Se analizzi la demo, usando il pannello di controllo aggiorna le proprietà CSS personalizzate sulla scena. Questa limitazione delle proprietà CSS personalizzate risparmia molto codice ripetuto e mantiene le cose DRY.

Più di un modo

Proprio come molte cose in CSS, ci sono più modi per farlo. Spesso puoi comporre una scena da cuboidi e posizionare gli elementi quando e dove ne hai bisogno. Tuttavia, può risultare difficile da gestire. Spesso c’è bisogno di raggruppare cose o aggiungere una sorta di contenitore.

Considera questo esempio in cui la sedia è una propria sotto-scena che può essere spostata.

Molti esempi recenti non sono così complessi. Ho avuto a che fare con l’estrusione. Ciò significa che sono in grado di mappare qualsiasi cosa sto creando con elementi 2D. Ad esempio, ecco un elicottero che ho creato di recente:

.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

Quindi possiamo inserire cuboidi in tutti i contenitori utilizzando il mixin. Quindi applicare uno “spessore” richiesto a ciascun cuboide. Lo spessore viene determinato dalle proprietà personalizzate nello scope. Questo demo attiva la proprietà --thickness per i cuboidi che compongono l’elicottero. Dà un’idea di come appariva la mappatura 2D per iniziare.

Questo è sostanzialmente il modo in cui si procede per creare cose 3D con CSS. Indagare nel codice rivelerà sicuramente alcune scorciatoie. Tuttavia, in generale, si scaffalizza una scena, si popola con cuboidi e si colorano i cuboidi. Spesso si desidera diverse sfumature di un colore in modo da differenziare i lati di un cuboide. Ogni dettaglio aggiuntivo è qualcosa che possiamo aggiungere a un lato del cuboide o trasformazioni che possiamo applicare a un cuboide. Ad esempio, ruotare e spostare sull’asse Z.

Consideriamo un esempio semplificato:

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

Il nuovo CSS per creare un cuboide con estrusione potrebbe apparire così. Nota come stiamo includendo anche proprietà personalizzate nello scope per il colore di ciascun lato. Sarebbe opportuno inserire alcuni valori predefiniti sotto il :root qui o valori di fallback:

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

Abbiamo scelto tre sfumature per questo esempio. Ma a volte potresti aver bisogno di più. Questa demo mette insieme queste sfumature ma ti permette di modificare le proprietà personalizzate con ambito. Il valore di “spessore” cambierà l’estrusione del cuboide. Le trasformazioni e le dimensioni influenzeranno l’elemento contenitore con la classe “estrusione”.

Scoltatura di una Stampante

Per iniziare, possiamo scoltrare tutti i pezzi di cui abbiamo bisogno. Con la pratica diventa più evidente. Ma la regola generale è cercare di visualizzare tutto come scatole. Questo ti dà un’idea di come spezzare qualcosa:

.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

Vedi se riesci a visualizzare cosa stiamo cercando di ottenere qui. I due pezzi laterali lasciano uno spazio al centro. Poi abbiamo un cuboide che si trova sopra e uno che riempie il retro. Poi due cuboidi che compongono il porta-carta.

Una volta arrivati a questo stadio, si tratta di popolare i cuboidi, che appare così:

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

Nota come siamo in grado di riutilizzare i nomi di classe come cuboid--side. Questi cuboidi probabilmente saranno dello stesso spessore e useranno gli stessi colori. La loro posizione e dimensione viene determinata dall’elemento contenitore.

Unendo i pezzi, possiamo ottenere qualcosa di simile a questo.

L’esplosione della demo mostra i diversi cuboidi che compongono la stampante. Se disattivi l’estrusione, puoi vedere gli elementi contenitori piatti.

Aggiunta di Dettagli

Ora, potresti aver notato che ci sono più dettagli di quanti ne otterresti semplicemente aggiungendo colori a ogni lato. E questo dipende dalla ricerca di modi per aggiungere dettagli aggiuntivi. Abbiamo diverse opzioni a seconda di cosa vogliamo aggiungere.

Se si tratta di un’immagine o di alcuni semplici cambiamenti di colore, possiamo sfruttare `background-image` per sovrapporre gradienti e così via.

Ad esempio, la parte superiore della stampante presenta dettagli, così come l’apertura della stampante. Questo codice si occupa del lato superiore del cuboide superiore. Il gradiente gestisce l’apertura della stampante e i dettagli:

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

Per il logo dell’orso, potremmo utilizzare una `background-image` o addirittura ricorrere a un pseudo-elemento e posizionarla:

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

Se abbiamo bisogno di aggiungere dettagli più estesi, probabilmente dovremo abbandonare l’uso del nostro mixin cuboide. Ad esempio, la parte superiore della nostra stampante avrà uno schermo di anteprima utilizzando un `img` elemento:

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

Aggiungi ulteriori dettagli e siamo pronti a mettere un po’ di carta in gioco!

Viaggio della carta

Cos’è una stampante senza un po’ di carta? Vogliamo animare un po’ di carta che vola nella stampante e viene sparata dall’altra parte. Qualcosa come questo demo: clicca ovunque per vedere un pezzo di carta inserito nella stampante e stampato.

Possiamo aggiungere un blocco di carta alla scena con un cuboide e poi utilizzare un elemento separato per fungere da singola carta:

.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

Ma animare la carta che vola nella stampante richiede un po’ di tentativi ed errori. È saggio giocare con diverse trasformazioni nell’ispettore DevTools. Questo è un buon modo per vedere come le cose appariranno. Spesso, è più facile utilizzare anche elementi wrapper. Usiamo l’elemento `.paper` per effettuare la trasmissione e poi usiamo `.paper__flyer` per animare l’inserimento della carta:

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

Noterai che c’è un uso abbastanza consistente di calc lì. Per comporre la timeline dell’animazione possiamo fare uso delle proprietà CSS personalizzate. Riferendoci a una proprietà, possiamo calcolare i ritardi corretti per ciascuna animazione nella catena. Il trasferimento di carta e il volo avvengono contemporaneamente. Una animazione gestisce lo spostamento del contenitore, un’altra gestisce la rotazione del foglio di carta. Una volta che queste animazioni terminano, il foglio viene inserito nella stampante con l’animazione feed. Il ritardo dell’animazione è uguale alla durata delle prime due animazioni che vengono eseguite contemporaneamente.

Esegui questo demo dove ho colorato gli elementi del contenitore in rosso e verde. Facciamo uso del pseudo-elemento di .paper__flyer per rappresentare il pezzo di carta. Ma gli elementi del contenitore fanno il lavoro pesante:

Potresti chiederti quando esce il foglio dall’altro capo. Ma, in realtà, il foglio non è lo stesso elemento per tutta la durata. Usiamo un elemento per entrare nella stampante. E un altro elemento per il foglio quando esce dalla stampante. Questo è un altro caso in cui elementi extra rendono la nostra vita più semplice.

Il foglio utilizza più di un elemento per fare il loop, e poi il foglio viene posizionato all’estremità di quell’elemento. Eseguendo questo demo con più elementi di contenimento colorati mostra come funziona.

Ancora una volta, richiede un po’ di prove ed errori, nonché pensare a come possiamo sfruttare l’uso degli elementi di contenimento. Avere un contenitore con un transform-origin di offset ci permette di creare il loop.

Stam

Abbiamo tutto a posto. Ora si tratta di effettivamente stampare qualcosa. Per fare ciò, aggiungeremo un modulo che consenta agli utenti di inserire l’URL di un’immagine:

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

Con un po’ di stile, otteniamo qualcosa di simile.

Il comportamento nativo dei moduli e l’uso di required e type="url" significa che accettiamo solo un URL. Potremmo andare oltre con un pattern e verificare per determinati tipi di immagini. Ma alcuni buoni URL per immagini casuali non includono il tipo di immagine, come ad esempio https://source.unsplash.com/random.

Inviare il nostro modulo non si comporta come vorremmo, e anche l’animazione di stampa viene eseguita una volta al caricamento. Un modo per aggirare questo problema sarebbe eseguire l’animazione solo quando una determinata classe viene applicata alla stampante.

Quando inviamo il modulo, possiamo fare una richiesta per l’URL e quindi impostare il src per le immagini nella nostra scena — una immagine è la anteprima sullo schermo della stampante, l’altra è un’immagine su un lato del foglio. In effetti, quando stampiamo, aggiungeremo un nuovo elemento per ogni pezzo di carta stampato. In questo modo, ogni stampa sembra essere aggiunta a un mucchio. Possiamo rimuovere il pezzo di carta che abbiamo al caricamento.

Iniziamo occupandoci dell’invio del modulo. Previamo l’evento predefinito e chiamiamo una funzione PROCESS:

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

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

Questa funzione gestirà la richiesta per la nostra fonte immagine:

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

Abbiamo anche impostato una variabile printing su true, che useremo per tracciare lo stato attuale e disabilitare il pulsante del form.

Perché facciamo una richiesta per l’immagine invece di impostarla sull’immagine? Vogliamo un URL assoluto per un’immagine. Se usiamo l’URL di “Unsplash” menzionato sopra e poi lo condividiamo tra le immagini, questo potrebbe non funzionare. Questo perché potremmo incontrare scenari in cui visualizziamo immagini diverse.

Una volta che abbiamo la sorgente dell’immagine, impostiamo la sorgente dell’immagine di anteprima su quell’URL e reimpostiamo il valore dell’input del form.

Per attivare l’animazione, possiamo agganciarci all’evento “load” della nostra immagine di anteprima. Quando l’evento si attiva, creiamo un nuovo elemento per la carta da stampare e lo appendiamo all’elemento printer. Allo stesso tempo, aggiungiamo una classe printing al nostro stampante. Possiamo usare questo per attivare la prima parte della nostra animazione della carta:

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)
  // Dopo un certo periodo di tempo reimpostiamo lo stato
  setTimeout(() => {
    printing = false
    SUBMIT.removeAttribute('disabled')
    PRINTER.classList.remove('printing')
  }, 4500)
})

Dopo un certo periodo di tempo, possiamo reimpostare lo stato. Un approccio alternativo sarebbe quello di debouncere un evento animationend bubbling. Ma possiamo usare un setTimeout, poiché sappiamo quanto tempo durerà l’animazione.

La nostra stampa però non è alla scala corretta. E questo perché dobbiamo ridimensionare l’immagine alla carta. Abbiamo bisogno di un piccolo pezzo di CSS per questo:

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

Sarebbe anche bello se le luci sulla parte anteriore della stampante comunicassero che la stampante è occupata. Potremmo regolare l’intensità di una delle luci quando la stampante sta stampando:

.progress-light {
  background: hsla(var(--progress-hue, 104), 80%, 50%);
}
.printing {
  --progress-hue: 10; /* Equivale al rosso */
}

Mettendo insieme tutto ciò, abbiamo ottenuto una stampante “funzionante” realizzata con CSS e un pizzico di JavaScript.

Ecco qua!

Abbiamo esaminato come possiamo creare una stampante 3D funzionante con CSS, un pizzico di JavaScript e sfruttando Pug. Prova ad aggiungere il seguente link immagine nel campo URL, o un altro a tua scelta, e dai un’occhiata!

https://source.unsplash.com/random

Abbiamo trattato un mucchio di cose diverse per realizzare questo, tra cui:

• come creare oggetti 3D con CSS
• l’uso di mixin Pug
• l’uso di proprietà CSS personalizzate con ambito per mantenere le cose DRY
• l’uso dell’estrusione per creare scene 3D
• gestione dei moduli con JavaScript
• comporre timeline di animazione con proprietà personalizzate

La gioia di creare questi demo è che molti di loro pongono problemi diversi da superare, come la creazione di certe forme o la costruzione di certe animazioni. Spesso c’è più di un modo per fare qualcosa.

Che cose interessanti potresti creare con il CSS 3D? Mi piacerebbe vederle!

Come sempre, grazie per la lettura. Vuoi vedere di più? Vieni a trovarmi su Twitter o dai un’occhiata al mio live stream!

Domande frequenti (FAQs) sulla stampante 3D CSS