Von Spline zu Webflow: Gamechanger in Web 3D

Kürzlich hat Webflow auf seiner letzten Konferenz in San Francisco die native Unterstützung für Spline eingeführt. Dies ist eines von vielen wichtigen Dingen, die sie eingeführt haben, aber in diesem Artikel werden wir nur darauf eingehen, was Spline in der Zukunft von 3D im Webdesign bedeuten wird.

‍

Das Wichtigste zuerst, was ist Spline?

Für diejenigen, die mit diesem großartigen Tool nicht vertraut sind, ist Spline eine kostenlose 3D-Designsoftware mit Zusammenarbeit in Echtzeit, um interaktive Weberlebnisse im Browser zu erstellen. Sie sind ein neu gegründetes Startup, das erst etwa 2020 veröffentlicht wurde und seitdem rasant wächst.

Sie sind unter Webdesignern und Entwicklern für ihre minimalistische Oberfläche und ihre supereinfache Art, interaktive Objekte für Websites zu erstellen, bekannt. Da sie nun native Unterstützung in Webflow haben, bedeutet das, dass viele Webdesigner und Entwickler Spline für ihre Arbeit verwenden werden und wir werden viel mehr 3Ds auf Websites sehen.

‍

Arbeiten mit Spline

Lassen Sie uns Ihre Hoffnungen klarstellen, Spline ist kein Tool, mit dem Sie komplexe Modellierungen mit erweiterten Blitz- und Textureinstellungen durchführen können. Es ist kein Tool für die Erstellung von Spielcharakteren, sondern ein Tool, mit dem Sie Z-Pinsel verwenden können, um reale Modelle zu formen. Das überlassen wir einer speziell dafür entwickelten Software wie Blender.

Spline ist ein Tool für einfache Modelle, mit dem Sie Ihr Webdesign-/Entwicklungsspiel verbessern und Ihre kreativen Grenzen ausloten können. Bei Broworks wird Spline ab sofort ein unverzichtbares Tool sein, um mit dem Rest der Designwelt Schritt zu halten.

‍

Merkmale der Wirbelsäule

Schauen wir uns einige leistungsstarke Funktionen an, die Spline einem professionellen Designer zu bieten hat.

1. Modellieren - Die Hauptstärke von Spline sind seine Modellierungsfähigkeiten. Sie verfügen über einige hervorragende Charaktermodellierung, Website-Animationen, Produktvisualisierung und andere Anwendungen. Sie haben eine herausragende Genauigkeit und alles wird in Echtzeit als Vorschau angezeigt, ohne dass Sie auf das Rendern warten müssen.
2. Effektives Rendern - Sie haben eine Vielzahl von schönen Materialien und Lichteffekten. Sie können mit verschiedenen Texturen, Shadern und Beleuchtungsschemata herumspielen.
3. Animationsfilm - Sie können großartige realistische Interaktionen und dynamische Bewegungen erstellen. Und all dies kann ganz einfach mit einem einfachen Codeausschnitt oder einer URL zu Ihrem Webflow-Projekt hinzugefügt werden.

‍

Spline-Design in Webflow verwenden

Sobald Sie mit Ihrer Modellierung und Animation in Spline fertig sind, besteht der nächste Schritt darin, dies ganz einfach in Webflow hinzuzufügen, indem Sie einfach einen Codeausschnitt oder eine URL einfügen.

‍

Codeausschnitt verwenden

Wenn wir einen einfachen Codeausschnitt verwenden, funktioniert er wie jeder Code in Webflow. Wir fügen ihn einfach mit dem Element „HTML Embed“ ein und von dort aus können Sie ihn wie jeden anderen Codeausschnitt mit eingeschränkter Funktionalität steuern.

‍

URL verwenden

Dies ist eine bessere Möglichkeit, das Spline-Design in Webflow zu verwenden, da Sie dadurch mehr Freiheit und Flexibilität erhalten. Sobald Sie diese URL von Spline erhalten haben, besteht der nächste Schritt darin, eine „Spline-Szene“ hinzuzufügen, diese URL einzufügen und ihr eine Klasse hinzuzufügen, um sie anzupassen. Wir werden nicht alles behandeln, es liegt an Ihnen, es zu erkunden, aber danach können Sie zu Interaktionen gehen, bei denen Sie eine neue Interaktion namens „Spline“ haben, und von dort aus können Sie jede in Spline erstellte Ebene auswählen und sie einzeln oder das gesamte Objekt zusammen animieren. Dies ist eine supercoole Funktion, die wir zuvor in Webflow nicht hatten und die es uns ermöglicht, unsere Arbeit mit 3D besser zu kontrollieren.

‍

Wir müssen bedenken, dass dies immer noch ein neues Feature ist und nicht alles perfekt ist, aber es ist einen Schritt näher an viel besseren 3D-Objekten und Interaktionen, ohne eine einzige Codezeile zu schreiben.