Wir stellen vor Vectary Canvas, ein neuer Raum für AI-beschleunigte Ideenfindung. → Canvas

Von der 3D-Modellierung bis zum Einbetten im Web

Ein komplettes Tutorial für Produktdesign.

Erfahre, wie du verschiedene boolesche Operationen einrichtest und das gesamte Produkt in nur wenigen einfachen Schritten erstellst. Am Ende widmen wir uns der Szenenoptimierung, um sie für das Teilen im Web und für AR vorzubereiten.

1. Bereite die Szene vor

Wir starten mit der Grundform des Wasserkochers. Diese dient als Referenzobjekt. 

Umgebungseinstellungen

Stelle sicher, dass das Raster eingeschaltet ist, um dich im Raum besser orientieren zu können. Klicke mit der rechten Maustaste auf eine freie Stelle in der Szene und wähle aus dem Menü: Raster anzeigen. 

Um den Schatten zu sehen, füge eine Bodenebene hinzu. Verwende für die Beleuchtung keine Standardumgebung, sondern das Preset „Skate park“. Diese Umgebung ist großartig und sorgt für eine sehr natürliche Lichtstimmung. Sie ist weder über- noch unterbelichtet und erzeugt zudem schöne Reflexionen. Die Umgebungs-Presets in Vectary sind extrem praktisch und sparen super viel Zeit.

Um die Umgebung zu ändern, drücke die ESC-Taste auf deiner Tastatur, um die Auswahl aller Objekte in der Szene aufzuheben. Klicke im rechten Seitenpanel auf „Environment“. Wähle im Dropdown-Menü die Option „Outdoor“ und scrolle zu „Skate park“. Gehe in die Einstellungen und experimentiere etwas herum, um den besten Effekt zu erzielen. Für diese Szene haben wir uns für folgende Werte entschieden: Intensität auf 70, Rotation auf 200, Sättigung auf -100, und Schatten auf 75. 

Optimierte Beleuchtung

Für das Setup der Beleuchtung nutzen wir ein gerichtetes Licht, da dies einige Vorteile bietet. Mit nur einer Lichtquelle können wir den gesamten Bereich der Szene abdecken. Wir können sowohl die Intensität steuern als auch die Schattenschärfe erhöhen oder verringern. Um Realismus zu erzeugen und den Look der Szene aufzuwerten, denke immer daran, die Schatten einzuschalten. 

Da das fertige Projekt am Ende im Web eingebettet werden soll, solltest du mit den Schatten vorsichtig sein. Sie können die Performance beeinträchtigen. Genau aus diesem Grund nutzen wir in dieser Szene ein gerichtetes Licht: Es ist performancefreundlicher, da es Schatten nur in eine Richtung wirft. 

Auch das Anpassen von Winkel und Farbe des Lichts ist möglich und sehr effektiv. Wir stellen den Zielpunkt auf etwa 45 Grad ein und bringen statt des standardmäßigen Weiß mit einem linearen Verlauf etwas Abwechslung hinein. Richte diesen von oben links nach unten rechts aus. 

Effekte hinzufügen

Gehen wir noch etwas mehr ins Detail und nutzen weitere Effekte wie  Ambient Occlusion, Soft Shadows und Adjustments. 

Mit AO können wir Schatten in Bereichen hinzufügen, in denen zwei Objekte nah beieinander liegen. Verwende einen Wert von 10 % und stelle den Radius auf 10 ein. Um einen natürlichen Schatten-Look zu erzielen, ist der Effekt „Soft Shadows“ wirklich klasse. Ein tolles Ergebnis erhältst du auch, wenn du ihn mit den Umgebungsschatten kombinierst.

Das Farbprofil kann einen riesigen Unterschied für die Szene machen. Diese Parameteranpassungen beeinflussen das gesamte Look and Feel der Szene erheblich. Ändere dafür das Farbprofil von „None“ auf „ACES“. Kontrast und Sättigung lassen wir unverändert und erhöhen nur die Belichtung auf 85 %. 

Damit ist alles vorbereitet und wir können uns ganz auf den Modellierungsprozess konzentrieren – genauer gesagt auf die booleschen Operationen. 

2. 3D-Modellierung

Der Hauptkörper des Wasserkochers besteht aus nur drei Formen: dem äußeren Rohr mit dem Zickzack-Muster, dem inneren Rohr und dem Zylinder für die Innenseite. 

Der Körper des Wasserkochers mit einem 3D-Muster

Hole dir zuerst das Rohr-Objekt aus der Toolbar. Passe den inneren Radius an und setze die Höhe auf 155. Nutze die XYZ-Koordinaten und die Werte in der oberen rechten Ecke des Panels zur Orientierung. 

Mach das Gleiche für den Zylinder. Passe seinen Radius so an, dass er in den inneren Radius des Rohrs passt. Wähle beide aus, wende den Taper-Modifikator an und übernehme die Standardwerte.

Die letzte Komponente des Wasserkocher-Körpers ist das Zickzack-Muster, das durch boolesche Subtraktion erzeugt wird. Dafür brauchst du ein zweites Rohr. Passe wieder die Höhe und den Radius an und wende einen Taper-Modifikator an. Füge einen Zylinder hinzu, passe seinen Radius an und drehe ihn ein wenig, um einen ähnlichen Winkel zu erhalten. Platziere den kleinen Zylinder unter einem Array-Modifikator und stelle die Anzahl auf 24 ein. Wenn du die booleschen Linien parallel halten willst, wende auch auf den kleinen Zylinder einen Taper-Modifikator an und passe ihn an. Wir haben die Stärke auf 55 % eingestellt.

Die Hauptform ist fertig. Zeit, die Materialien einzurichten. Wähle den Zylinder in der Mitte aus und gib den Hex-Wert ein. Stelle Roughness auf 60 % und Metalness auf 100 % ein. Gib für die äußeren Teile des Wasserkochers den Hex-Wert ein, stelle Roughness auf 60 % und Metalness auf 70 % ein.

Der Kunststoffschalter

Füge zuerst zwei Würfel hinzu, passe ihre Größe an und nutze einen booleschen Union-Modifikator. Dieser verschmilzt die beiden miteinander. Um ein Loch zu machen, dupliziere die Form und verschiebe sie in die boolesche Gruppe des Wasserkocher-Körpers. Dadurch wird die Form automatisch vom Körper subtrahiert. Dupliziere den Schalter noch einmal, da wir zwei verschiedene Materialien dafür nutzen werden. Passe die Position des Schalters an und ändere seine Größe leicht, damit er in das Loch passt. Führe nun die Materialien zusammen und passe Refraction und Thickness an. Wähle den inneren Teil des Schalters aus. Um das Material anzupassen, wähle zuerst eine Farbe und stelle dann Emission auf 100 ein. Dadurch fängt es an zu leuchten. Passe die Position und Skalierung so an, dass der Teil genau in die andere Form passt. So sieht es aus, als wäre der Schalter von transparentem Kunststoff umgeben.

Der Deckel des Wasserkochers

Hier nutzen wir ein ähnliches Prinzip wie schon beim Hauptkörper. Starte mit einem kleinen Zylinder für die Basis. Dupliziere ihn als Nächstes und passe die Größe an. Füge einen weiteren Zylinder hinzu, von dem wir die Form mithilfe von boolescher Subtraktion und einem Radial-Grid-Modifikator abziehen.

Der Griff

Wir starten mit einem Würfel aus der Toolbar. Das Ziel ist es, ihn lang genug zu machen, damit wir schöne, abgerundete Ecken erstellen können. Füge einen weiteren Würfel hinzu, der sich mit der ersten Form schneiden soll. Sobald du mit die Position und dem Ergebnis zufrieden bist, dupliziere ihn und skaliere ihn auf der Z-Achse, um einen Bevel-Modifikator hinzuzufügen. Auf diese Weise erhalten wir den oberen und unteren Teil des Griffs, was ihn optisch viel interessanter macht. Führe die Materialien zusammen. Wähle mit der Pipette das Material vom Hauptkörper des Wasserkochers aus. Um die Kanten zu formen und ihnen den abgerundeten Look zu verleihen, nutzt du dieselbe Technik wie schon beim Deckel. Füge einen Zylinder hinzu, passe Skalierung und Position an und nutze einen Skew-Modifikator, um die Form noch weiter anzupassen. 

Fast geschafft! Füge einen weiteren Zylinder zur Szene hinzu und passe Skalierung und Position an. Nutze nun eine boolesche Subtraktion und dann einen Radial-Array-Grid-Modifikator, um die finale Form zu erhalten. Kopiere die Materialeigenschaften vom Hauptkörper und passe die Position an. Jetzt sieht es definitiv schon so aus, wie es soll.

Aber bevor wir ins Detail gehen, benennen wir alle Objekte im Projektmenü richtig. Das macht spätere Änderungen viel einfacher. Ein kleiner Schritt, der langfristig eine große Hilfe ist.

Die Branding-Details

Produkte wie dieses haben in der Regel ein Logo, also fügen wir hier auch eines hinzu. Wähle “3D Text” aus dem Menü. Wir verwenden die Standardschriftart Open Sans. Die Stärke beträgt 700 und der Zeichenabstand 0.3. Skaliere ihn herunter, rotiere ihn und ziehe ihn mit dem Boolean-Subtract-Modifikator vom oberen Teil des Griffs ab. Der aktualisierte Boolean-Modifikator verfügt über eine “Separate by Material”-Funktion. Das bedeutet, dass du alle in der Boolean-Gruppe verwendeten Materialien beibehalten kannst. Der 3D-Text ist ein gutes Beispiel dafür.  Wende einen Bevel-Modifikator darauf an. Halte die Anzahl der Bevel-Segmente gering. Hinweis: Es wird empfohlen, den Bevel-Modifikator beim Verschieben des 3D-Texts zu deaktivieren. 

Der Kesselausguss

Der letzte Teil ist der Kesselausguss. Er wurde aus 3 Würfeln mit 2 verschiedenen Boolean-Operationen erstellt. Die Hauptform wurde mit Intersect erstellt. Das Loch wurde mit Boolean Subtract erstellt. Als letzte Änderung an der Form haben wir Taper- und Bevel-Modifikatoren hinzugefügt. 

3. Das Design in 3D und AR zeigen


Kamera für Turntable und Ansichtsbegrenzung hinzufügen

Jetzt können wir es präsentieren. Aber bevor wir das tun, fügen wir der Szene eine Kamera hinzu. Sie steuert den Blickwinkel. Ein ziemlich nützliches Feature für die Präsentation im Web. Zentriere dafür das Pivot-Ziel der Kamera auf den Kessel. 

Wenn das Design eingebettet ist, dreht der Turntable die Szene automatisch. Lege Dauer und Easing fest. Stelle die Ansichtsbegrenzung der Kamera für die Rotation ein. Das bedeutet, dass der Kamerawinkel für den Betrachter eingeschränkt wird und sich die Richtung der Turntable-Kamera automatisch ändert, sobald sie einen bestimmten Winkel erreicht.

Augmented Reality hinzufügen

Um diese Szene auf einer Website einzubetten und den Augmented-Reality-Viewer zu aktivieren, müssen wir ihn zuerst über das Advanced-Menü zur Szene hinzufügen. Warte, bis alle Modelle generiert wurden. 

3D mit transparentem Hintergrund einbetten

Ändere den Hintergrund auf transparent. Klicke in der Toolbar auf den Share-Button. Aktiviere “Share to the web” und kopiere den Einbettungscode. Verwende den kopierten Code auf der Website, auf der du das Modell einbetten möchtest. Um das Modell in Augmented Reality anzusehen, klicke auf den AR-Button oben rechts. Scanne den QR-Code mit deinem Smartphone und richte es auf die Stelle, an der es angezeigt werden soll.Und fertig! Tee gefällig?

Bereit, mit Vectary zu designen und einzubetten?
Jetzt loslegen