| |
|
|
- Seite 1 - |
|
 HofK | Auf einen heißen Tipp von IF hin, habe ich mir mal three.js [...] angeschaut. Da [...] (ganz unten) die ersten Resultate. |
|
|
| |
|
|
|
| |
|
- Seite 44 - |
|
 HofK | Meine Addons zur Generierung von Geometrie durch Funktionen sind in die Jahre gekommen. Siehe z.B. [...] 
Letzte Version bezog sich auf three.js Revision 90.
Mittlerweile ist die 136 aktuell.
Mit 125 ist die alte Geometry rausgeflogen, man soll / muss mit BufferGeometry arbeiten.
Weiterhin gab es Änderungen bei benutzten Dingen. .addAttribute wurde zu .setAttribute und .setDynamic( true ) zu .setUsage( THREE.DynamicDrawUsage ) .
Deshalb war ein UPDATE längst fällig.
Jetzt auf Github THREEf_136 [...] 
In der Sandbox kommt man nun zur neuen Version [...] 

Von dort ist aber auch die alte Version erreichbar.

Für die neue version wurden einige Beispiele auf BufferGeometry umgestellt.
Siehe auch auf discourse [...]  |
|
|
| |
|
|
|
 HofK | Auch das Addon THREEp ( Basis Polarkoordinaten ) ist nun aufgefrischt.
Github [...] 
Sandbox [...] 

alte Version
 |
|
|
| |
|
|
|
 HofK | Noch ein wenig shader in der Anwendung:
ComputeNormalsInVertexShader [...] auf Basis einer Lösung von prisoner849

Auf eine Frage auf discourse [...] hin: [...] 
 |
|
|
| |
|
|
|
 HofK | Vor langer Zeit [...] hatte ich mich mit Haut, Skelett und Knochen beschäftigt.
Es entstand mit der alten Geometrie (seit Revision 125 nicht mehr verfügbar ) die Hummel Mara. Auf codepen funktionierte sie nicht mehr, weil als Quelle die jeweils aktuelle Version des Frameworks benutzt wurde. Eine schlechte Idee - wusste ich damals noch nicht! Besser ist ein CDN als Quelle zu wählen. Dort kann man die jeweilige Revision auswählen.
Mit einigen Mühen, inklusive einem verheerendem Schusseligkeitsfehler [...]  fliegt Mara nun in aktueller Version. [...] 
Auf meiner Seite [...] sind beide Versionen verfügbar.
 |
|
|
| |
|
|
|
 HofK | Für die "Knochenarbeit" und andere Dinge hatte ich seinerzeit die Darstellung der Vertex- und Face Nummern programmiert.
Auch in meinen Addons THREEf und THREEp ist eine solche Darstellung integriert.
Für die eingebauten three.js BufferGeometrien musste ich diese Berechnungen anpassen.

Ausprobieren: [...] 
discourse [...]  Github [...]  |
|
|
| |
|
|
|
 HofK | Und weiter mit den Knochen und der Haut.
Dort [...] habe ich einige Tests gepostet.
Eine Knievariante funktioniert nun bereits gut. Allerdings nur, wenn die Kniebeugen in Richtung einer Achse gehen.
discourse: [...] 
ausprobieren: [...] 

Ich konnte bisher das allgemeinere Problem der beliebigen Rotation nicht lösen.
Das funktionierende Knie: [...] 

Es wird zwar gedreht, aber bei Einbindung in das SkinnedMesh nicht wie gedacht. Eine mögliche Variante ist, die Biegung in Bezug auf die Winkellage in der xz-Ebene durchzuführen.
Diese Variante ist unvollendet. Eventuell kennt jemand die Lösung? [...] 
 |
|
|
| |
|
|
| |
|
- Seite 45 - |
|
|
 HofK | Mit dem Knie kann es nicht funktionieren. Egal, ob hinterher oder in der Konstruktion selbst gedreht. Das Problem ist komplexer.
Durch die Drehung um eine andere Achse ergibt sich ein viel komplizierterer Übergang der Zylinder. Eine Drehung des Knies hilft da nicht weiter. Die Enden der Zylinder müssten auf sehr spezielle Weise verformt werden. Ungefähr wie bei Triangulation cylinder with holes [...] 
Dort ein Video der Drehung: [...] 
Das Knie [...] und das Kugelknie [...] 
Ich habe das Kugelgelenk favorisiert.
Damit bastele ich nun ein funktional erzeugtes Modell mit Knochen und Skelett. Es bewegt sich dann in der Animation.
Noch recht am Anfang, aber man kann schon etwas erkennen.
 |
|
|
| |
|
|
|
 HofK | Das hat jetzt ein wenig gedauert - Fehlversuche, neue Ansätze, usw. - aber jetzt ist Pino mit der Lügennase vorzeigbar: [...] 

Am Ende der Datei ist die Tastatursteuerung der Bewegung ablesbar.
Ich habe nur einige Bewegungen beispielhaft implementiert.
An den Endpunkten der Schwingung wird mit Hilfe eines Faktors eine sanfte Umkehrung der Bewegungsrichtung realisiert. Natürlich kann die Bewegung auch durch andere Mittel als Tastatur-Events gesteuert werden.
Die variable Form der Figur wird mit Hilfe einer sehr variablen benutzerdefinierten Geometrie ermöglicht. Für die Formgebung können Arrays oder Funktionen verwendet werden. Mit dem testMesh kann man verschiedene Varianten ausprobieren.
Die einzelnen Geometrien werden mit Hilfe einer link( ) Funktion zu einer einzigen Geometrie verknüpft. Multimaterial wird unterstützt.
Bei discourse: [...]  Auf GitHub: [...]  |
|
|
| |
|
|
|
 HofK | Die variable benutzerdefinierte Geometrie entstand speziell um die Einzelteile von Pino zu erzeugen. Sie ist nicht umfassend. Deshalb bin ich jetzt dabei, sie mit umfangreicheren Möglichkeiten zu versehen. Es kommen weitere Parameter hinzu. Die Varianten für die Arrays und Funktionen "outline" erhöhen sich.
Es ergibt eine andere aber ähnliche Art wie mein Addon THREEf.js ( discourse [...] Github [...] )
Ein Beispiel:
// h, φ => height segments of different heights ( .y ), radius ( .r ) depending on h and φ function φOutline( h, φ ) { return { y: 2.5 * h * h - 1.5 * h , r: h + 0.4 + 0.2 * Math.sin( 4 * φ ) }; }
const geo = multiFormGeometry( { radius: 0.5, height: 1.0, radialSegments: 36, heightSegments: 36, outline: φOutline, } );
Bei weiteren Parametern wirken die 'default ' Werte.
 |
|
|
| |
|
|
|
 HofK | Die multiFormGeometry ist in einer statischen und dynamischen Variante verfügbar.

discourse: [...]  GitHub: [...] 
Ausprobieren: [...]  |
|
|
| |
|
|
|
 HofK | Nebenbei gab es noch folgendes
[...] 
[...] 
Links zu discourse im Sourcecode |
|
|
| |
|
|
|
 HofK | Zur MultiFormGeometry habe ich noch die Erzeugung von 2D Formen hinzugefügt.
Im Originalbeispiel habe ich einige solche Formen ergänzt und zusätzlich ein Beispiel nur mit 2D gebastelt. Statisch und dynamisch.
Als Parameter gibt man geometry2D: true, an.
[...] 
Anstatt radius und radialSegments verwendet man width und widthSegments.
Auch auf GitHub [...] 
Es machte wenig aufwand, 2D einzufügen. Neben einigen kleineren Änderungen und Ergänzungen bei der Verarbeitung der Parameter, war die Berechnung der Positionen recht einfach zu lösen.
|
|
|
| |
|
|