Wir machen einen 3D-Konfigurator ohne Programmierung und Layout

3D-Produktkonfiguratoren sind ein relativ neuer Trend im Online-Marketing und im E-Commerce. Die Erstellung solcher Webanwendungen wurde durch die schnelle Entwicklung der WebGL-Browsertechnologie möglich, mit der Sie 3D-Grafiken direkt auf den Webseiten der Benutzer zeichnen können.

Meiner Meinung nach ist das einzige Problem, das die Entwicklung dieses Trends behindert, das Fehlen wirksamer Instrumente. Die meisten von ihnen sind dreidimensionale Motoren, die für einen Programmierer, aber keinen gewöhnlichen Künstler sehr nützlich sein können. Es gibt jedoch Ausnahmen: Das Verge3D-Addon zu den Paketen 3ds Max und Blender bietet die Möglichkeit, mit der ein gewöhnlicher Mensch dreidimensionale Konfiguratoren erstellen kann. Dieses Tool werden wir in unserem Artikel analysieren.

Als Beispiel erstellen wir einen Schmuckkonfigurator. Jetzt tun solche Konfiguratoren alles für alle, daher ist das Beispiel mehr als relevant.



Klicken Sie hier , um den Konfigurator in einem neuen Fenster zu starten.


Da Verge3D sowohl mit 3ds Max als auch mit Blender arbeiten kann, werden wir beide Tools analysieren. In diesem Artikel wird davon ausgegangen, dass Verge3D bereits installiert ist. Wenn nicht, laden Sie es von der Entwicklerseite herunter und installieren Sie es. Es gibt auch eine gute Installationsanleitung und Schulungsvideo-Tutorials.

Unser Plan


Hören Sie nicht auf Leute, die sagen, dass das Erstellen von 3D-Konfiguratoren schwierig und teuer ist. Alles ist viel einfacher, wenn Sie den Prozess klar studieren:

  1. Wir erstellen Inhalte (3D-Modelle und Materialien).
  2. Wir machen die Anwendung interaktiv, dh sie reagiert auf Benutzeraktionen.
  3. Wir veröffentlichen den Konfigurator im Netzwerk.

Schauen wir uns den gesamten Prozess der Reihe nach an.

Erstellung von 3D-Inhalten


Dieser Schritt ist der schwierigste. Wenn Sie jedoch mindestens Erfahrung in der Arbeit mit 3ds Max- und Blender-Paketen haben oder einen Freund / Mitarbeiter mit ähnlichen Erfahrungen haben, ist alles recht schnell erledigt.

Zunächst erstellen wir eine 3D-Anwendung mit dem Verge3D-Anwendungsmanager. Geben Sie den Projektnamen in das unten gezeigte Dialogfeld ein und lassen Sie die restlichen Einstellungen unverändert.



Als nächstes müssen Sie dreidimensionale Modelle erstellen. Bitte beachten Sie, dass Ihre 3D-Objekte für optimale Ergebnisse ein mittleres Polygon sein sollten. Im Prinzip ist es sehr gut, wenn Sie weniger als 100.000 Polygone pro Modell haben.



Die nächste Stufe ist die Erstellung von Materialien und Texturen. Denken Sie daran, dass Sie sich jederzeit mit den Materialien vertraut machen können, indem Sie sich die Quelldateien in der installierten Verge3D-Assembly ansehen (sie befinden sich im Verzeichnis applications/ring für die Blender-Version und in applications/ring_max für die 3ds Max-Version).

Silber und Gold


So sieht Silbermaterial in Blender aus. Die Basis des Materials ist eine kugelförmige Textur ("ring_matcap" genannt), die mit einer Rauschkarte und einer normalen Karte gemischt wird. Die erste ist eine „Metall“ -Oberfläche, und die anderen beiden machen das Material realistischer. Da wir 3 verschiedene Metalle haben: Silber, Rot- und Gelbgold, nehmen wir nur kleine Farbanpassungen im ColorRamp-Block des im Bild gezeigten Materials vor.



Das silberne Material in 3ds Max sieht ebenfalls ungefähr gleich aus. Es ist etwas einfacher, da es eine zusätzliche diffuse Farbtextur hat, die für die Farbe der Metalloberfläche verantwortlich ist.



Genial


Zeit, das Diamantmaterial herauszufinden. Um ein charakteristisches Leuchten und Flackern zu erzielen, haben wir es mit zwei Ebenen modelliert. Die innere Schicht des Edelsteins hat eine unregelmäßige Maschenstruktur und das folgende Material:



Aber dies ist das Material der äußeren Schicht des Edelsteins, es ist für den Rand eines Diamanten verantwortlich:



Absolut auch ein Diamant in 3ds Max gemacht. Das Bild unten zeigt beide Schichten des Edelsteins.



Ich werde Ihnen ein wenig erklären, wie Sie Texturen für solche Materialien erstellen. Es ist nichts kompliziert. Die meisten davon sind primitive Texturen aus Rauschen / Reflexionen und Umgebung, die Sie selbst erstellen oder fertige Bilder im Internet finden können. Die Ausnahme bilden normale Karten, die aus High-Poly-Modellen gebacken werden müssen.

Interaktivität hinzufügen


Mit dem visuellen Editor von Puzzles müssen Sie kein Programmierer sein, um einen anständigen 3D-Konfigurator zu erstellen. Verwenden Sie einfach das "On Click" -Puzzlespiel, damit die Anwendung auf Benutzeraktionen reagiert, "Einblenden" / "Ausblenden", um die Form des Rings zu ändern, und "Material zuweisen", um Materialien zu ändern. In dieser Schmuckanwendung haben wir 4 verschiedene Ringe, von denen jeder aus drei verschiedenen Materialien besteht, jeweils Silber und Gold in Pink und Gelb.

So sieht die gesamte Baugruppe aus:



Wie Sie sehen können, gibt es nichts Kompliziertes. Auf der linken Seite befindet sich eine Ringauswahleinheit, und auf der rechten Seite ist der Materialwechsel verantwortlich.

Als Ergebnis stellt sich heraus, dass der Benutzer zwischen 12 Optionen für die Ausführung des Rings wählen kann. Stellen Sie sich vor, wie viel Zeit und Mühe ein Juwelier aufwenden muss, um eine solche Kollektion zu produzieren. Und hier haben wir den Puzzles-Editor, der für alles verantwortlich ist (in solchen Momenten verstehen Sie, dass es ziemlich gut ist, als Programmierer oder dreidimensional zu arbeiten).

Veröffentlichen


Das ist das einfachste. Jede Verge3D-Anwendung kann auf Ihren eigenen Ressourcen bereitgestellt oder auf das Cloud-Hosting von Verge3D Network hochgeladen werden. Im letzteren Fall klicken Sie einfach im Anwendungsmanager auf das grüne Globussymbol. Innerhalb weniger Sekunden / Minuten befindet sich Ihr Konfigurator in der Cloud. Am Ende des Downloads sehen Sie ungefähr Folgendes:



Im Dialogfeld erhalten Sie einen direkten Link zu Ihrer Anwendung, einen HTML-Code zum Einbetten des Konfigurators, Ihre eigene Website oder Ihr eigenes Blog (oder einen vorgefertigten Online-Shop). Es gibt Schaltflächen zum Teilen von Anwendungen über soziale Netzwerke.

Fazit


Nach meinen Beobachtungen hat sich die Online-Handelsbranche im Laufe des Jahres radikal verändert. Der Einzelhandel reduziert die Verkaufsfläche schnell und geht ins Internet. Facebook hat es möglich gemacht, dreidimensionale Modelle hochzuladen.

Dreidimensionale Konfiguratorlösungen wachsen nach Regen wie Pilze, aber die Verwendung von Verge3D für diese Zwecke bietet mehrere Vorteile. Dazu gehören eine gute Integration in Modellierungspakete, mangelnde Abhängigkeit von Cloud-Lösungen und Flexibilität bei der Entwicklung dreidimensionaler Anwendungen. Im Allgemeinen leben wir in einer interessanten Zeit!

Source: https://habr.com/ru/post/de420315/


All Articles