In AE erzegte 3D-Objekte in Webseite importieren

[madeByAnt]

Hallo!

Ich hab zum Thema After Effects eine Frage und bin noch ziemlich neu in diesem Programm. Mich würde nämlich interessieren, ob man in AE erzeugte 3D-Objekte auch irgendwie ins Web importieren kann, oder muss ich tatsächlich ein MP3 vorher machen? Bei 2D SVG geht´s ja mit lottie recht einfach, aber bei 3D funktionierts nicht!
Über ein kurzes Feddback würde ich mich freune!

Danke
MadeByAnt

 

[draupnir]

Hallo MadeByAnt,
AE ist ein Programm, dessen Output (Ergebnis) in Videoclip ist, also gerasterte Einzelbilder. Mit Lottie kann man schon einiges mache, siehe https://webdesign.tutsplus.com/tutorials/add-adobe-after-effects-animations-to-a-web-page--cms-35093
jedoch sollte man für Web-Animation eher auf das Vektor-Datei-Format SVG setzen.
1. Möglichkeit: Das Erstellen einer klassischen Bild-für-Bild-Animation in Adobe Illustrator und dem Javascript https://www.computergrafik-know-how.de/javascript-svg-animation-aus-illustrator/
2. Möglichkeit: Das Programm Adobe Animate (Nachfolger von Flash) benutzen.
3. Möglichkeit: Das Programme Moho (siehe https://moho.lostmarble.com ) benutzen, dass im Gegensatz zu anderen Cartoon-Animation-Programmen auch einen Vektor-Output bietet.
4. Möglichkeit: Selber programmieren in Javascript mit https://animejs.com

Viel Erfolg,
– j.

 

[madeByAnt]

Hallo draupnir,

Danke für deine sehr informative Antwort, genau das wollte ich wissen! anime.js werde ich mir als nächstes Vorknöpfen, aber eigentlich bin ich momentan in Blender und Three.js recht gut unterwegs um 3D-Logos ins Web zu bringen!
Für mich ist die Animation eher recht neu und weil einer meiner Kunden gefragt hat, ob ich ihm nicht ein 3D-Logo in AE für seine Webseite machen kann, wusste ich eigentlich nicht so genau, was ich ihn antworten soll!

Vielen Dank und lieben Gruß aus Wien

 

[KBB]

Na dann wären doch Blender + 3.js oder glTF genau das richtige Oft kennen sich Kunden selbst ja nicht so aus in der Materie und benötigen intensive Beratung, gerade in so einem speziellen Bereich. Die würde allerdings einschließen, ob sich die Einbindung von echtem 3D Content wirklich lohnt.

 

[madeByAnt]

Ja, ich hab gerade auf meine Webseite mein erstes 3DLogo eingebettet, in Blender gestaltet und in three.js animiert und hab jetzt noch zusätzlich den coolen OrbitControl, den man aber auch weglassen kann, wenn man sowas nicht will. Das Problem ist, daß ich im Moment eben auch noch wenig Erfahrung hab was Animation betrifft. Der Kunde will ganz spezielle Glanzeffekt für sein 3D-Logo, welche ich in AE recht einfacht machen kann, aber in Blender m.w. nicht gehen, oder zumindest nicht so unkompliziert!

Aber soweit ich das mitbekommen hab, git´s hier im Forum ja auch einen Bereich wo man diskutieren und sich austauschen kann. Da werd ich wohl öfter mal rein schauen!

 

[madeByAnt]

p.s: ich mein, wenn ich mit three.js z.B. Schatten vermeiden, ist ja die Ladezeit der Webseite nicht so hoch! Und ja, three.js ist schon recht mächtig für ein normal animiertes Logo ohne interaktion. Aber es klappt doch, oder?

 

[KBB]

Wie gesagt, Beratung führt Dich dann auch zum Medium. Wenn’s nur darum geht, etwas Animiertes auf der Website zu haben, ist echtes 3D vielleicht auch einfach zu viel. In meinen Augen macht das vielleicht noch Sinn, wenn seine Kunden interaktiv mit dem 3D Content umgehen können sollen. Rein spielerisch ein Logo einfach nur drehen können ist zwar nett, macht in meinen Augen aber überhaupt nur dann Sinn, wenn diese Interaktion direkt mit dem Unternehmen oder Produkt zu tun haben. Z.B. eine Firma, die selbst interaktiven 3D Content herstellt, wie Objekte für Unity, Unreal, DAZ 3D oder auch Blender. Dann würden sie das aber vermutlich selbst schon umsetzen, und die ganze Sache ist vllt. wirklich nur mit Kanonen auf Spatzen schließen. Kommt aufs Ziel an, evtl. ist sogar ein Pixel-Filmchen sinnvoller.

 

[madeByAnt]

Ja, "Kanonen auf Spatuen" trifft´s wohl am besten. Auf meine Webseite ist es ein drehendes Quadrat, welchen man mir der Maus zusaätzlich drehen kann, und dann sieht man HandyNr., E-mail-Adresse etc. Bei meinen Kunden macht eine Animation evtl. nicht so viel Sinn, vielleicht kann ich´s ihm ja noch ausreden!
Ich merke gerade, daß ich mit den Anwendungen meins neues Wissens im Moment ein bisschen überfordert bin, aber das wird schon!

 

[KBB]

Vllt. macht eine Animation Sinn, aber es reicht u.U. eben wenn Du ihm die eben aus AE rausrenderst und das als MP4, Webp oder anim GIF oder meinetwegen animierte Vektordaten zum Einbinden zur Verfügung stellst?
Das ist vielleicht auch, was Draupnir oben sagen wollte ist „man sollte eher“. Nur dass es eben von der Sache abhängt.

 

[madeByAnt]

Sehr gut, Danke! MP4 (sorry, ich hab in meinem erster Kommentar MP3 geschrieben) macht Sinn! Weil mir die Praxis hier komplett fehlt, war das ja eigentlich auch meine ursprüngliche Frage, ob das übliche Vorgansweise ist, daß man eben eine AE-Animation als MP4 ins Html einbetten kann.

Danke nochmals für die nützlichen Infos!!