Professionelle Produktkonfiguratoren in Unity erstellen

Dieser Artikel bietet Entwicklern und technischen Künstlern Anleitungen zum Erstellen eines interaktiven 3D-Produktkonfigurators in Unity, unter Verwendung des Produktkonfigurator-Pakets, und basiert auf diesem Video-Tutorial.

Es deckt den gesamten Workflow ab, von der anfänglichen Projektkonfiguration in der Universal Render Pipeline (URP) bis zur endgültigen Webbereitstellung. Wichtige Themen sind das Importieren und Optimieren von CAD-Modellen mit Tools wie dem Asset Transformer oder Unity Asset Manager, das Erstellen dynamischer Materialvarianten für die Echtzeit-Anpassung und der Aufbau einer responsiven Benutzeroberfläche mit klickbaren Steuerelementen.

Zusätzlich wird erläutert, wie man Kameratransitionen mit Cinemachine implementiert und es werden Best Practices für die Optimierung und den Aufbau der Anwendung für das Web angeboten, um ein reibungsloses, barrierefreies Benutzererlebnis in jedem Browser zu gewährleisten.

Häufig gestellte Fragen

Was ist der Ausgangspunkt für den Aufbau eines Produktkonfigurators mit Unity?

Um schnell zu starten, können Sie das mit dem Produktkonfigurator-Paket bereitgestellte Musterprojekt verwenden.

Beginnen Sie mit der Erstellung eines neuen Universal Render Pipeline (URP)-Projekts im Unity Hub.

Laden Sie das Musterprojekt von dem GitHub-Repository herunter.

Öffnen Sie das Musterprojekt in Unity, um seine Struktur und Komponenten zu erkunden.

Untersuchen Sie die Hierarchie, um zu verstehen, wie die Variantensätze, die Benutzeroberfläche und die Kameras organisiert sind.

Da das Paket Open Source ist, können Sie jeden Teil davon an Ihre spezifischen Bedürfnisse anpassen, bevor Sie Ihre eigenen 3D-Modelle hinzufügen.

• (0:44) - Der erste Schritt besteht darin, ein neues URP-Projekt über den Unity Hub zu erstellen.
• (0:49) - Laden Sie das Muster aus dem GitHub-Repository herunter.
• (0:54) - Sobald der Download abgeschlossen ist, öffnen Sie das Muster im Unity Editor.
• (1:19) - Erkunden Sie die Hierarchie des Projekts, um zu verstehen, wie es funktioniert.

Was sind die empfohlenen Methoden zum Importieren und Optimieren von CAD-Modellen für Unity?

Um sicherzustellen, dass Ihre CAD-Daten für eine Echtzeitanwendung bereit sind, müssen sie konvertiert und optimiert werden. Das Video hebt zwei Hauptmethoden dafür hervor:

Asset Transformer Plugin: Dieses Plugin, das direkt im Unity Editor verwendet wird, ist dafür ausgelegt, verschiedene CAD-Dateiformate zu verarbeiten und umfasst erweiterte Funktionen zur Optimierung von Geometrie und Materialien während des Importprozesses.

Unity Asset Manager: Diese cloudbasierte Lösung ermöglicht es Ihnen, Ihre Quellmodelle hochzuladen und die Funktion Optimieren und Konvertieren zu nutzen. Es bietet eine benutzerfreundliche Oberfläche, um Ihre Daten in Unity-bereite Formate zu transformieren, bevor Sie sie für Ihr Projekt herunterladen.

• (1:36) - Dieser Abschnitt des Videos behandelt das Hinzufügen Ihres 3D-Modells in eine neue Szene
• (1:46) - Überblick über das Asset Transformer Plugin
• (1:55) - Dieser Abschnitt behandelt den Unity Asset Manager als Alternative zum Optimieren und Konvertieren von Modellen

Schauen Sie sich die Dokumentationsseite des Unity Asset Managers und dieses Video-Tutorial an, um mehr zu erfahren.

Wie richte ich das Materialwechsel-System für einen Produktkonfigurator ein?

Der Kern des Konfigurators ist die Fähigkeit, Materialien in Echtzeit auszutauschen. Dies wird mit einem Material-Variantensatz verwaltet, der die Wechsel-Logik ohne Code automatisiert.

Im Hierarchie, klicken Sie mit der rechten Maustaste und navigieren Sie zu Produktkonfigurator > Variantensatz > Material-Variantensatz.

Mit dem neuen Variantensatz, der im Inspector ausgewählt ist, verwenden Sie die Funktion Automatisch alle Mesh-Renderer finden, um alle Objekte zu lokalisieren, die Ihr Zielmaterial verwenden.

Erstellen Sie Slots für jedes Material, zwischen dem Sie wechseln möchten (z.B. "Rotes Metall", "Blaues Metall").

Ziehen Sie Ihre gewünschten Material-Assets aus dem Projektfenster in die entsprechenden Variantenslots im Inspector.

Sie können den Materialwechsel sofort direkt im Editor mit dem Vorschau-Schieberegler testen.

• (2:06) - Das Video stellt die Kernfunktion des Echtzeit-Materialwechsels vor
• (2:10) - Dieser Abschnitt behandelt, wie man einen Material-Variantensatz aus dem Hierarchiemenü erstellt
• (2:20) - Das System kann automatisch alle Mesh-Renderer finden, die ein bestimmtes Material verwenden
• (2:37) - Wie man verschiedene Material-Assets den Variantfeldern zuweist
• (2:52) - Testen Sie den Variantenschalter im Editor mit dem Vorschau-Schieberegler im Inspector

Wie sollte ich die Leinwand für eine responsive Benutzeroberfläche konfigurieren?

Um sicherzustellen, dass Ihre Benutzeroberfläche auf verschiedenen Bildschirmgrößen und -auflösungen korrekt skaliert, sollten Sie die Canvas Scaler Einstellungen anpassen.

Suchen Sie im Canvas GameObject die Canvas Scaler Komponente.

Setzen Sie den UI-Skalierungsmodus auf Scale With Screen Size.

Geben Sie eine Reference Resolution ein, wie z.B. 1920 x 1080. Dies ist die Auflösung, für die Ihre Benutzeroberfläche entworfen wurde.

Setzen Sie den Match-Wert auf 0,5. Dies bietet einen ausgewogenen Skalierungsansatz, der die Skalierung zwischen der Breite und Höhe des Bildschirms mischt, um Verzerrungen zu vermeiden.

• (3:27) - Dieser Abschnitt des Videos zeigt, wie man die Leinwand so einstellt, dass sie mit der Bildschirmgröße skaliert.
• (3:30) - Geben Sie die 1920x1080 Auflösung für den Canvas Scaler an.
• (3:33) - Wie man den Match-Wert auf 0,5 setzt, um eine ausgewogene UI-Skalierung über verschiedene Seitenverhältnisse hinweg zu erreichen.

Wie kann ich UI-Schaltflächen erstellen, um die Materialvarianten zu steuern?

Um Benutzern die Auswahl verschiedener Materialien zu ermöglichen, verbinden Sie UI-Schaltflächen mit dem Material Variant Set, das Sie erstellt haben.

Erstellen Sie eine UI-Schaltfläche, indem Sie ein Panel und dann einen Button zu Ihrer Szene hinzufügen.

Fügen Sie die Variant Select Komponente zu Ihrem Schaltflächen-GameObject hinzu.

Suchen Sie im Inspektor der Schaltfläche den Abschnitt On Click() Ereignisse und klicken Sie auf das + Symbol.

Ziehen Sie die Variant Select Komponente, die Sie gerade hinzugefügt haben, in das Objektfeld des Ereignisses.

Wählen Sie im Dropdown-Menü der Funktion VariantSelect > SelectVariant () aus. Dies verknüpft den Schaltflächenklick mit der Aktion zum Wechseln der Variante.

Wiederholen Sie diesen Prozess für jede Materialoption und erstellen Sie eine separate Schaltfläche für jede Variante.

• (3:01) - Dieser Abschnitt des Videos zeigt, wie man eine Benutzeroberfläche erstellt, um Konfigurationen zu steuern
• (3:14) - Fügen Sie einen Button zur UI-Leinwand hinzu und benennen Sie ihn entsprechend
• (3:40) - Die Variantenauswahl Komponente wird dem Button hinzugefügt, um die Logik zu steuern
• (3:47) - Dieser Abschnitt zeigt, wie man ein neues Laufzeitereignis zum Button hinzufügt
• (3:56) - Wählen Sie die WähleVariante aus dem Dropdown-Menü, um den Button mit dem System zu verknüpfen

Besuchen Sie die Dokumentationsseite für UI-Systeme, um mehr zu erfahren.

Wie richte ich mehrere Kamerawinkel ein und wechsle zwischen ihnen über die Benutzeroberfläche?

Cinemachine wird verwendet, um professionelle, sanfte Kameratransitionen zwischen verschiedenen Blickwinkeln zu erstellen.

Stellen Sie sicher, dass Cinemachine über den Package Manager installiert ist.

Erstellen Sie virtuelle Kameras, indem Sie zu GameObject > Cinemachine > Cinemachine erstellen Kamera gehen. Positionieren Sie zwei oder drei dieser Kameras an wichtigen Betrachtungswinkeln.

Fügen Sie UI-Buttons für jede Kameransicht hinzu, die der Benutzer auswählen soll.

Für das On Click () Ereignis jedes Buttons ziehen Sie das Ziel-GameObject der virtuellen Kamera in das Objektfeld.

Wählen Sie im Funktions-Dropdown CinemachineVirtualCamera > Priorisieren () aus.

Wenn ein Button zur Laufzeit angeklickt wird, wird die Priorität dieser Kamera auf den höchsten Wert gesetzt, wodurch das Cinemachine Brain sanft zu dieser Ansicht überblendet.

• (4:45) - Der Abschnitt beginnt mit dem Hinzufügen professioneller Kamerasteuerungen mit Cinemachine
• (4:58) - Erstellen Sie eine Cinemachine-Kamera aus dem GameObject-Menü
• (5:11) - Die Mit Ansicht ausrichten Verknüpfung wird empfohlen, um schnell eine anfängliche Kameraposition festzulegen
• (6:09) - Verwenden Sie UI-Buttons, um die Kamerasteuerung zu aktivieren
• (6:23) - Wählen Sie die Priorisieren Funktion aus, um die gewählte virtuelle Kamera zu aktivieren.

Schau dir die Cinemachine-Dokumentationsseite an, um mehr zu erfahren.

Was sind die wichtigsten Schritte, um einen Produktkonfigurator im Web bereitzustellen?

Um deinen Konfigurator von jedem Browser aus zugänglich zu machen, kannst du ihn für die Webplattform mit Unitys Build-Profilen erstellen.

Öffne im Editor das Build-Profile-Fenster, indem du zu Datei > Build-Profile navigierst.

Wähle „Web“ als deine Zielplattform aus der Liste aus.

Stelle sicher, dass deine Konfigurator-Szene die einzige ist, die in der Szellenliste des Builds enthalten ist.

Optimiere die Player-Einstellungen, indem du zu Bearbeiten > Projekteinstellungen > Player gehst. Finde im Web-Tab den Abschnitt Veröffentlichungseinstellungen.

Setze das Komprimierungsformat auf Brotli, um kleinere Build-Größen und schnellere Ladezeiten für die Benutzer zu erreichen.

Klicke auf Build und Ausführen, um das Projekt zu kompilieren und es automatisch in deinem Standard-Webbrowser zu öffnen.

• (7:12) - Der Abschnitt erklärt, wie man Unitys Build-Profile verwendet, um für das Web zu bauen.
• (7:20) - Wie man Web als Zielplattform auswählt.
• (7:32) - Wie man die Player-Einstellungen für die Webbereitstellung optimiert.
• (7:45) - Lerne, das Komprimierungsformat auf Brotli für kleinere Dateigrößen einzustellen.
• (7:58) - Klicke auf die Schaltfläche Build und Ausführen, um den Web-Build zu generieren.

Schau dir die Dokumentationsseite zur Plattformentwicklung und die Profilierung und Optimierung eines Unity-Web-Builds an, um mehr zu erfahren.