nicht angemeldet
Gekrümmte Oberflächen in CSS / JavaScript ?
0 
Gunnar Bittersmann
Gekrümmte Oberflächen in CSS / JavaScript ?
Hallo miteinander!
Mich würde mal interessieren, ob und wenn ja wie es möglich ist, in CSS / JavaScript ein einzelnes flächiges (DIV) Element zu krümmen!
Recht einfach ist es ja, einen Würfel herzustellen, indem man die einzelnen Seiten innerhalb eines Elternelementes absolut positioniert und sie mit rotateX bzw. rotateY um einen fiktiven Mittelpunkt herum anordnet:
Auch kann man natürlich die Illusion einer gekrümmte Oberfläche herstellen, indem man nach dem gleichen Prinzip über eine for-Schleife gleich einen ganzen Haufen sehr schmaler Seitenelemente erstellt und diese in einem Radius um eine Mittelachse herum anordnet:
Aber erstens dürfte das bei komplexeren Animationen performancetechnisch nicht so optimal sein, und zweitens möchte man ja vielleicht auch eine Grafik als Textur über das "ganze" Element drüberlegen, so dass diese dann ebenfalls gekrümmt ist.
Hat jemand eine Idee, wie das zu bewerkstelligen wäre? Vor komplizierter Mathematik schrecke ich nicht zurück! ;)
Gruß,
Roadster.
-
@@Roadster:
nuqneH
Aber erstens dürfte das bei komplexeren Animationen performancetechnisch nicht so optimal sein, und zweitens möchte man ja vielleicht auch eine Grafik als Textur über das "ganze" Element drüberlegen, so dass diese dann ebenfalls gekrümmt ist.
Alle Seitenflächen bekommen dieselbe Hintergrundgrafik mit jeweils anderem Wert für background-position.
Hat jemand eine Idee, wie das zu bewerkstelligen wäre?
Besser als mit HTML-Elementen per CSS in 3D gedreht ist man wohl mit WebGL dran, vermutlich noch besser mit einer Bibliothek wie Three.js.
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
nuqneH
Hallo Gunnar
Alle Seitenflächen bekommen dieselbe Hintergrundgrafik mit jeweils anderem Wert für background-position.
Das kann man natürlich machen, aber das würde das eigentliche Problem auch nur überpinseln.
Besser als mit HTML-Elementen per CSS in 3D gedreht ist man wohl mit WebGL dran, vermutlich noch besser mit einer Bibliothek wie Three.js.
Naja, es sollte natürlich im Idealfall funktionieren, ohne eine externe Bibliothek einzubinden, aber ich werd mir das mal anschauen, denn wenn es da Lösungen gibt, kann man sie vielleicht auch selbst nachbauen.
Vielen Dank für den Tipp! ;)
Gruß,
Roadster.
-
Moin,
Vielen Dank für den Tipp!
Vielleicht interessiert dich dass hier. Er verfolgt allerdings den gleichen Lösungsansatz wie du: http://keithclark.co.uk/labs/css-fps/
Zeig uns das Ergebnis wenns fertig ist :)
-
@@Roadster:
nuqneH
mit einer Bibliothek wie Three.js.
Naja, es sollte natürlich im Idealfall funktionieren, ohne eine externe Bibliothek einzubinden,
Als ich mir WebGL angesehen hatte, kam ich zieh schnell zu dem Schluss, dass man MIT einer Bibliothek wie Three.js besser dran ist.
Anstelle eines Prismas könnte sich als Approximation eines Zylinders auch ein Antiprisma anbieten. Doppelt so viele „Knicke“ bei gleicher Anzahl von Dreiecken.
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
-
-
Hakuna matata!
Besser als mit HTML-Elementen per CSS in 3D gedreht ist man wohl mit WebGL dran
Mit WebGL kann man sogar Vertex-Shader definieren, die man dann als Custom-Filter mit CSS benutzen kann. Die Browserunterstützung ist allerdings noch miserabel.
--
“All right, then, I'll go to hell.” – Huck Finn-
Hakuna matata!
Hallo 1UnitedPower!
Mit WebGL kann man sogar Vertex-Shader definieren, die man dann als Custom-Filter mit CSS benutzen kann. Die Browserunterstützung ist allerdings noch miserabel.
Naja, soweit ich das im Moment überblicke, steht einem mit WebGL die Welt offen. - Vorausgesetzt, der Browser unterstützt es. ;)
Wird jedoch einige Zeit dauern, bis ich mich da eingearbeitet habe. Recht komplexe Materie. Aber der Aufwand scheint es wert zu sein...
Gruß,
Roadster.
-
-