Erstelle einen 3D CSS-Drucker, der tatsächlich druckt!

Seit einer Weile erstelle ich aus Spaß diese 3D-Szenen mit CSS – meistens während meiner Live-Stream.

3D CSS Responsive Kunstflugzeug! 🛩️

Es macht Looping und Rollen! 😎

Reagiert auf Mausbewegungen 🐭

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

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

Jeder Demo ist die Gelegenheit, etwas Neues auszuprobieren oder Wege zu finden, Dinge mit CSS umzusetzen. Häufig nehme ich Vorschläge entgegen, was wir im Stream versuchen und erstellen sollen. Eine kürzliche Idee war eine Drucker, der in „3D“ druckt. Und hier ist, was ich zusammengebastelt habe!

📢 CSS Print Shop ist eröffnet! 😅

Kostenloses Drucken! 😮

Gib eine Bild-URL ein, um zu sehen, wie sie vom 3D CSS Drucker ausgedruckt wird 😁

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

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

Dinge in 3D mit CSS erstellen

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

Um einen Würfel zu erstellen, können wir CSS-Transformations zum Positionieren der Seiten eines Würfels verwenden – die magische Eigenschaft ist transform-style. Diese auf preserve-3d zu setzen ermöglicht es uns, Elemente in der dritten Dimension zu transformieren:

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

Sobald Sie einige dieser Szenen erstellen, beginnen Sie, Möglichkeiten zu entdecken, wie Sie die Dinge beschleunigen können. Ich bevorzuge Pug als HTML-Vorprozessor. Die Mixin-Fähigkeit gibt mir eine Möglichkeit, Quader schneller zu erstellen. Die Markup-Beispiele in diesem Artikel verwenden Pug. Für jeden CodePen-Demo können Sie die Option „View Compiled HTML“ verwenden, um die HTML-Ausgabe zu sehen:

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

Verwendung von +cuboid()(class="printer__top") erzeugt dies:

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

Dann habe ich einen festen Block von CSS, den ich verwende, um die Quader anzuordnen. Der Vorteil hier ist, dass wir CSS-Eigenschaften nutzen können, um die Eigenschaften eines Quaders zu definieren (wie im Video oben gezeigt):

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

Mit benutzerdefinierten Eigenschaften können wir verschiedene Eigenschaften der Quader steuern und so weiter:

• --width: die Breite eines Quaders in der Ebene
• --height: die Höhe eines Quaders in der Ebene
• --depth: die Tiefe eines Quaders in der Ebene
• --x: die X-Position in der Ebene
• --y: die Y-Position in der Ebene

Das ist noch nicht sehr beeindruckend, bis wir den Quader in eine Szene setzen und ihn drehen. Auch hier verwende ich benutzerdefinierte Eigenschaften, um die Szene zu manipulieren, während ich etwas erstelle. Dat.GUI ist hier super praktisch.

Wenn Sie die Demo inspizieren, aktualisiert die Steuerungskonsole benutzerdefinierte CSS-Eigenschaften in der Szene. Diese Sichtbarkeit von benutzerdefinierten CSS-Eigenschaften spart viel wiederholten Code und hält die Dinge DRY.

Mehr als eine Möglichkeit

Genau wie bei vielen Dingen in CSS gibt es mehr als eine Möglichkeit, es zu tun. Oft kann man eine Szene aus Würfeln zusammensetzen und Dinge positionieren, wenn man sie benötigt. Das kann jedoch schwierig zu verwalten sein. Oft besteht der Bedarf, Dinge zu gruppieren oder einen gewissen Behälter hinzuzufügen.

Betrachten Sie dieses Beispiel, bei dem der Stuhl ein eigener Unterszenen ist, der herumbewegt werden kann.

Viele aktuelle Beispiele sind nicht so komplex. Ich greife lieber auf Extrusion zurück. Das bedeutet, dass ich in der Lage bin, alles, was ich mache, in 2D-Elementen abzubilden. Hier ist zum Beispiel ein Hubschrauber, den ich kürzlich erstellt habe:

.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

Dann können wir Würfel in alle Behälter einfügen, indem wir die Mixin verwenden. Dann wird jedem Würfel eine erforderliche „Dicke“ zugewiesen. Die Dicke wird von sichtbaren benutzerdefinierten Eigenschaften bestimmt. Diese Demo schaltet die --thickness-Eigenschaft für die Würfel, die den Hubschrauber bilden, um. Es gibt einen Eindruck davon, wie das 2D-Mapping ausgesehen hat, um loszulegen.

Das ist im Großen und Ganzen, wie man mit CSS 3D-Dinge erstellt. Indem man in den Code eintaucht, wird man sicher einige Tricks entdecken. Im Allgemeinen aber: Erstelle eine Szene, bevolke sie mit Würfeln und färbe die Würfel. Man wird oft verschiedene Farbnuancen einer Farbe wünschen, damit wir die Seiten eines Würfels unterscheiden können. Jegliche zusätzlichen Details sind entweder Dinge, die wir einer Würfelseite hinzufügen können, oder Transformationen, die wir auf einen Würfel anwenden können. Zum Beispiel Drehen und Bewegen auf der Z-Achse.

Betrachten wir ein vereinfachtes Beispiel:

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

Die neue CSS zum Erstellen eines Würfels mit Extrusion könnte so aussehen. Beachten Sie, wie wir auch benutzerdefinierte Eigenschaften für die Farbe jeder Seite einschließen. Es wäre ratsam, hier einige Standardwerte unter :root oder Fallback-Werte einzufügen:

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

Wir haben für dieses Beispiel drei Farbtöne gewählt. Manchmal benötigen Sie jedoch möglicherweise mehr. Diese Demo bringt das zusammen, ermöglicht Ihnen aber auch, eingebettete benutzerdefinierte Eigenschaften zu ändern. Der „Dicke“-Wert ändert die Extrusion des Würfels. Die Transformationen und Abmessungen beeinflussen das enthaltende Element mit der Klasse „Extrusion“.

Gerüstbau für einen Drucker

Zum Anfang können wir alle benötigten Teile gerüstet herausarbeiten. Mit Übung wird dies offensichtlicher. Aber die allgemeine Regel ist, sich alles als Kisten vorzustellen. Das gibt Ihnen eine gute Vorstellung davon, wie man etwas aufteilt:

.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

Sehen Sie, ob Sie sich vorstellen können, wohin wir hier hinwollen. Die beiden Seitenteile lassen eine Lücke in der Mitte. Dann haben wir einen Würfel, der über der Oberseite sitzt und einen, der die Rückseite füllt. Dann zwei Würfel, um den Papierträger aufzubauen.

Sobald Sie an diesem Punkt angelangt sind, geht es darum, die Würfel zu bevölkern, was so aussieht:

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

Beachten Sie, wie wir die Klassennamen wie cuboid--side wiederverwenden können. Diese Würfel sind wahrscheinlich gleich dick und verwenden die gleichen Farben. Ihre Position und Größe wird durch das enthaltende Element bestimmt.

Zusammenfügen ergibt so etwas.

Die Demo in Einzelteile aufbrechen zeigt die verschiedenen Würfel, aus denen der Drucker besteht. Schalten Sie die Extrusion aus, können Sie die flachen enthaltenden Elemente sehen.

Detail hinzufügen

Jetzt haben Sie vielleicht bemerkt, dass es mehr Detail gibt, als Sie nur durch Farben zu jeder Seite hinzufügen würden. Und das liegt daran, Wege zu finden, um zusätzliche Details hinzuzufügen. Wir haben verschiedene Optionen, je nachdem, was wir hinzufügen möchten.

Wenn es sich um ein Bild oder einige grundlegende Farbänderungen handelt, können wir background-image verwenden, um Farbverläufe usw. zu erstellen.

Zum Beispiel hat die Oberseite des Druckers Details sowie die Öffnung des Druckers. Dieser Code behandelt die obere Seite des oberen Quaders. Der Farbverlauf behandelt die Öffnung des Druckers und die 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);
}

Für das Bärenlogo könnten wir eine background-image verwenden oder sogar auf einen Pseudo-Element zugreifen und es positionieren:

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

Wenn wir detailliertere Elemente hinzufügen müssen, müssen wir wahrscheinlich auf unseren Quader-Mixin verzichten. Zum Beispiel wird die Oberseite unseres Druckers einen Vorschaufenster mit einem img-Element haben:

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

Fügen Sie einige weitere Details hinzu und wir sind bereit, Papier in die Mischung zu bringen!

Papierreise

Was ist ein Drucker ohne Papier? Wir möchten eine Animation erstellen, bei der Papier in den Drucker hineingeflogen und am anderen Ende ausgestoßen wird. Etwas wie diese Demo: Klicken Sie überall, um ein Stück Papier in den Drucker einzuführen und zu drucken.

Wir können ein Papiervolumen zur Szene hinzufügen und dann ein separates Element als einzelnes Blatt Papier verwenden:

.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

Die Animation des fliegenden Papiers in den Drucker erfordert jedoch einige Versuche und Irrtümer. Es ist ratsam, verschiedene Transformationen im DevTools-Inspektor auszuprobieren. Dies ist eine gute Möglichkeit, um zu sehen, wie sich die Dinge anfühlen. Oft ist es auch einfacher, Wrapperelemente zu verwenden. Wir verwenden das .paper-Element, um die Übertragung zu machen, und dann .paper__flyer, um das Einlegen des Papiers zu animieren:

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

Sie werden feststellen, dass dort eine ziemlich große Verwendung von calc vorhanden ist. Um die Animationszeitachse zusammenzustellen, können wir CSS-Eigenschaften nutzen. Indem wir auf eine Eigenschaft verweisen, können wir die richtigen Verzögerungen für jede Animation in der Kette berechnen. Das Papier wird gleichzeitig übertragen und fliegt. Eine Animation bewegt den Container, eine andere dreht das Papier. Sobald diese Animationen beendet sind, wird das Papier mit der feed Animation in den Drucker gefüttert. Die Animationsverzögerung entspricht der Dauer der ersten beiden Animationen, die gleichzeitig laufen.

Führen Sie dieses Beispiel aus, bei dem ich die Container-Elemente rot und grün eingefärbt habe. Wir nutzen das Pseudo-Element von .paper__flyer zur Darstellung des Papierstücks. Aber die Container-Elemente erledigen die schwere Arbeit:

Sie fragen sich vielleicht, wann das Papier am anderen Ende herauskommt. Tatsächlich ist das Papier jedoch nicht das gleiche Element durchgehend. Wir verwenden ein Element, um in den Drucker zu gehen. Und ein anderes Element für das Papier, wenn es aus dem Drucker fliegt. Dies ist ein weiterer Fall, in dem zusätzliche Elemente unser Leben erleichtern.

Das Papier nutzt mehr als ein Element, um den Kreislauf zu machen, und dann wird das Papier an den Rand dieses Elements positioniert. Das Ausführen dieses Beispiels mit mehr gefärbten Container-Elementen zeigt, wie es funktioniert.

Wieder einmal erfordert es ein bisschen Probieren und Irrtum, sowie darüber nachzudenken, wie wir die Nutzung von Container-Elementen ausnutzen können. Ein Container mit einem versetzten transform-origin ermöglicht es uns, den Kreislauf zu erstellen.

Drucken

Wir haben alles bereitgestellt. Jetzt geht es darum, tatsächlich etwas zu drucken. Dazu werden wir ein Formular hinzufügen, das Benutzern ermöglicht, die URL eines Bildes einzugeben:

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

Mit einigen Stilen erhalten wir etwa Folgendes.

Das native Verhalten von Formularen und die Verwendung von required und type="url" bedeutet, dass wir nur eine URL akzeptieren. Wir könnten dies weiter mit einem pattern vorantreiben und nach bestimmten Bildtypen prüfen. Aber einige gute URLs für zufällige Bilder enthalten das Bildtyp nicht, wie zum Beispiel https://source.unsplash.com/random.

Das Absenden unseres Formulars verhält sich nicht so, wie wir es möchten, und auch die Druckanimation läuft beim Laden einmalig ab. Eine Möglichkeit, dies zu umgehen, wäre, die Animation nur dann auszuführen, wenn eine bestimmte Klasse auf den Drucker angewendet wird.

Beim Absenden des Formulars können wir eine Anfrage für die URL stellen und dann die src für Bilder in unserer Szene setzen — ein Bild ist der Bildvorschau auf dem Drucker, das andere ist ein Bild auf einer Seite des Papiers. Tatsächlich werden wir beim Drucken ein neues Element für jedes gedruckte Stück Papier hinzufügen. Auf diese Weise sieht es so aus, als würde jeder Druck zu einem Stapel hinzugefügt. Wir können das Stück Papier, das beim Laden vorhanden ist, entfernen.

Beginnen wir mit der Behandlung des Formularabsendens. Wir werden das Standardereignis verhindern und eine PROCESS Funktion aufrufen:

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

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

Diese Funktion wird die Anfrage für unseren Bildquellcode behandeln:

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

Wir haben auch eine printing-Variable auf true gesetzt, die wir zur Verfolgung des aktuellen Zustands verwenden und den Button des Formulars deaktivieren werden.

Warum fordern wir das Bild anstatt es direkt auf dem Bild einzustellen? Wir möchten eine absolute URL zu einem Bild. Wenn wir die oben erwähnte “Unsplash”-URL verwenden und dann zwischen den Bildern teilen, funktioniert dies möglicherweise nicht. Das liegt daran, dass wir in Szenarien geraten können, in denen unterschiedliche Bilder angezeigt werden.

Sobald wir die Bildquelle haben, setzen wir die Vorschaubildquelle auf diese URL und setzen den Eingabewert des Formulars zurück.

Um die Animation auszulösen, können wir in das “load”-Ereignis unseres Vorschaubildes eingehen. Wenn das Ereignis ausgelöst wird, erstellen wir ein neues Element für das zu druckende Papier und fügen es dem printer-Element hinzu. Gleichzeitig fügen wir unserem Drucker eine printing-Klasse hinzu. Wir können dies verwenden, um den ersten Teil unserer Papieranimation auszulösen:

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)
  // Nach einer festgelegten Zeit die Zustände zurücksetzen
  setTimeout(() => {
    printing = false
    SUBMIT.removeAttribute('disabled')
    PRINTER.classList.remove('printing')
  }, 4500)
})

Nach einer festgelegten Zeit können wir den Zustand zurücksetzen. Eine alternative Herangehensweise wäre, ein aufsteigendes animationend-Ereignis zu debouncen. Aber wir können ein setTimeout verwenden, da wir wissen, wie lange die Animation dauern wird.

Unser Drucken ist jedoch nicht im korrekten Maßstab. Und das liegt daran, dass wir das Bild auf das Stück Papier skalieren müssen. Dafür benötigen wir ein kleines Stück CSS:

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

Es wäre auch schön, wenn die Lichter an der Vorderseite des Druckers anzeigen würden, dass der Drucker beschäftigt ist. Wir könnten die Farbton eines der Lichter anpassen, wenn der Drucker druckt:

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

Zusammengesetzt ergibt das einen „funktionierenden“ Drucker, der mit CSS und einem Hauch von JavaScript erstellt wurde.

Das war’s!

Wir haben uns angesehen, wie wir mit CSS, einem Hauch von JavaScript und der Nutzung von Pug einen funktionsfähigen 3D-Drucker erstellen können. Probiere, den folgenden Bildlink im URL-Feld oder einen anderen deiner Wahl einzufügen und lass es dir zeigen!

https://source.unsplash.com/random

Wir haben eine Vielzahl von Dingen behandelt, um dies zu erreichen, darunter:

• wie man 3D-Dinge mit CSS erstellt
• die Verwendung von Pug-Mixins
• die Verwendung von eingeschränkten benutzerdefinierten CSS-Eigenschaften, um Dinge trocken zu halten
• die Verwendung von Extrusion zur Erstellung von 3D-Szenen
• das Handhaben von Formularen mit JavaScript
• das Zusammenstellen von Animationszeitlinien mit benutzerdefinierten Eigenschaften

Die Freude, diese Demos zu erstellen, liegt darin, dass viele von ihnen unterschiedliche Probleme aufwerfen, wie z.B. wie man bestimmte Formen erstellt oder bestimmte Animationen konstruiert. Es gibt oft mehr als eine Möglichkeit, etwas zu tun.

Was könntest du mit 3D-CSS cool machen? Ich würde gerne sehen!

Wie immer danke fürs Lesen. Möchtest du mehr sehen? Komm zu mir auf Twitter oder schau dir mein Live-Stream an!

Häufig gestellte Fragen (FAQs) zum 3D CSS Printer