Deutsch
PHP, HTML & JavaScript- Forum

3D Grafik - WebGL mit three.js

 
- Seite 1 -



HofK
Auf einen heißen Tipp von IF hin, habe ich mir mal
three.js  [...]  angeschaut. Da  [...]  (ganz unten) die ersten Resultate.
 
31.01.2016  
 



 
- Seite 26 -



p.specht

AutoDesk, Erzeuger des bekannten CAD-Programms AutoCAD, bekam seine marktbeherrschende Stellung nur duch Aufkauf von konkurrierenden 3D-Softwarefirmen. Ich denke, langsam solltest Du denen ein Angebot machen
 
XProfan 11
Computer: Gerät, daß es in Mikrosekunden erlaubt, 50.000 Fehler zu machen, zB 'daß' statt 'das'...
23.08.2019  
 




HofK
Die Sachen sind in kommerzieller Software sicher schon enthalten.
Das hier ist open source.

Die Löcher im Zylinder entwickeln sich. Nach dem Ansatz von  [...]  braucht man die Löcher nur in der Höhe verschieben und um die Höhenachse (y) drehen.

 
01.09.2019  
 




p.specht

Wie sieht es mit Verschnittflächen aus, geht da was?
Ich frage weil ich damals so perplex war, dass - wenn ich im Aufriss, Seitenriss und Kreuzriss einen Kreis sah, trotzdem als Verschnittfigur KEINE Kugel herauskam !
 
XProfan 11
Computer: Gerät, daß es in Mikrosekunden erlaubt, 50.000 Fehler zu machen, zB 'daß' statt 'das'...
02.09.2019  
 




HofK
Was genau ist in diesem Zusammenhang mit Verschnittflächen gemeint?

-------------------------------------------------------------------------------------------

Ein Bug -------------- und sein Fix in der Triangulation hat mich etwas aufgehalten.

Er wurde nur in speziellen Fällen sichtbar und blieb daher bisher unentdeckt. Es betraf das letzte Dreieck einer Front und Winkel. Gefixt auf GitHub und meiner Seite.

Bemerkt habe ich das Problem bei der Übernahme von Codeteilen für den Zylinder.



Dieser wurde auch noch um die Möglichkeit ergänzt, den unteren und oberen Rand so zu gestalten, dass er sich nahtlos an andere Zylinder mit identischer (ungefährer) Länge d der Dreiecksseiten anfügen lässt. Die Berechnung der Linie ist analog zu den Löchern.



Im Bild ist unten der kleinstmögliche Wert (identisch zum gegebenen Zylinder) gewählt worden.
 
10.09.2019  
 




p.specht

cool ...
 
XProfan 11
Computer: Gerät, daß es in Mikrosekunden erlaubt, 50.000 Fehler zu machen, zB 'daß' statt 'das'...
10.09.2019  
 




HofK
Da war noch ein weiterer Bug (y statt z), wie ich ihn schon einmal hatte. Wahrscheinlich aus einer älteren Version frisch kopiert. Auf GitHub und meiner Seite bereinigt.  


Nun funktioniert wie bei der Kugel ein Loch auf der Basis von Punkten.

const g = new THREE.BufferGeometry( );

const parameters =  {

    d: 0.052,// rough side length of the triangles
    div4: 30,// division of the quarter circle
    bottom: -1,
    div4Btm: 30,// division bottom adaptation, (to quarter, >= div4)
    top: 1,
    div4Top: 90,// division top adaptation, (to quarter, >= div4)
    holes: [
    // circular (deformed) hole, 3 elements: [ y, phi, div4Hole ], div4Hole <= div4
    [   0.3,  1.6, 12 ],
    [  -0.4,  3.7, 14 ],
    [  -0.1, -0.9, 18 ],
    // points hole,: array of points y, phi, ...  (last point is connected to first)
    [ 0.15,0.45, 0.5,0.9, 0.75,0.51, 0.8,0.2, 0.1,-0.15  ]
    ]

}

cylinderWithHoles( parameters );

 
15.09.2019  
 




p.specht

Sind die Seiten des Lochs dabei gerade oder auch zylindrisch gewölbt? Kann man so nicht sehen ...
 
XProfan 11
Computer: Gerät, daß es in Mikrosekunden erlaubt, 50.000 Fehler zu machen, zB 'daß' statt 'das'...
16.09.2019  
 




HofK
Natürlich liegen alle Punkte am Rand des Lochs (wie Eckpunkte aller Dreiecke!) auf dem Zylinder und nicht einfach auf der Verbindungsgeraden zwischen den definierenden Punkten.

Das gäbe sonst etwas wie eine verbeulte Dose.

Die y-Achse ist die Zentrumsachse des Zylinders.
const lenXZ = ( x, z ) => ( Math.sqrt( x * x + z * z ) );
...
// points 1, 2
xv2 = x2 - x1;
yv2 = y2 - y1;
zv2 = z2 - z1;
len = length( xv2, yv2, zv2 );

if ( len > g.d ) {//  > rough side length of the triangles

    count = Math.ceil( len / g.d );

    for ( let k = 1; k < count; k ++ ) {

        x = x1 + k * xv2 / count;
        y = y1 + k * yv2 / count;
        z = z1 + k * zv2 / count;
        len = lenXZ( x, z );// to bring the point to the surface (radius * ..)
        g.positions[ posIdx     ] = g.radius * x / len;
        g.positions[ posIdx + 1 ] = y;
        g.positions[ posIdx + 2 ] = g.radius * z / len;
        ...

 
16.09.2019  
 




p.specht

Ah, danke!
 
XProfan 11
Computer: Gerät, daß es in Mikrosekunden erlaubt, 50.000 Fehler zu machen, zB 'daß' statt 'das'...
16.09.2019  
 




HofK
Beim Zylinder gibt es jetzt die Möglichkeit die Anpassung des unteren und oberen Randes zu drehen. Damit kann man nicht nur rechtwinklige Kombinationen von Zylindern erreichen. Die Parameter werden als Objekt übergeben.

Zusätzlich habe ich die Kugel mit Löchern als extra Variante mit dem allgemeinen Triangulationsalgorithmus (gleiche Winkelberechnung, Frontenzählung, Parameterobjekt, ... ) erstellt, um die Kombination mit dem Zylinder zu ermöglichen.
 


const parameters =  {

    d: 0.052,// rough side length of the triangles
    div4: 30,// division of the quarter circle
    bottom: -1,
    div4Btm: 30,// division bottom adaptation, (to quarter, >= div4)
    phiBtm: 1.57,// rotation of adaptive-deformed circle (Bottom)
    top: 1,
    div4Top: 33,// division top adaptation, (to quarter, >= div4)
    phiTop: -0.2,// rotation of adaptive-deformed circle (Top)
    holes: [
    // circular (deformed) hole, 3 elements: [ y, phi, div4Hole ], div4Hole <= div4
    [   0.3,  1.6, 12 ],
    [  -0.4,  3.7, 14 ],
    [  -0.1, -0.9, 18 ],
    //points hole,: array of points y, phi, ...  (last point is connected to first)
    [ 0.15,0.45, 0.5,0.9, 0.8,0.6, 0.75,-0.2, 0.1,-0.15  ]
    ]

}

 
22.09.2019  
 




p.specht

Genial! Wie geht das aber mit Texturen zusammen? Die müssten doch verzerrt werden, oder?
 
XProfan 11
Computer: Gerät, daß es in Mikrosekunden erlaubt, 50.000 Fehler zu machen, zB 'daß' statt 'das'...
22.09.2019  
 




HofK
Bisher habe ich für die Triangulation noch keine uv-Werte berechnet. Man muss diese Berechnungen einem bestimmten Ziel anpassen.

Die Formbibliothek  [...]  zu meinem Addon zeigt, wie die Verzerrungen sind.

In der Sandbox ein verzerrter Zylinder mit Seerose:



Die Hauptseite der Sandbox  [...]  zeigt u.a. eine Map des Globus auf einem Gefäß.



Diese Map ist bereits so gezerrt, dass sie auf einer in three.js intern definierten Kugel einen ordentlichen Globus ergibt. Siehe auch Wikipedia  [...] 

Man braucht also immer passende Grafiken. Mit entsprechenden Grafik-Programmen kann man zerren, stauchen ... - das ist aber nicht mein Ding, das ist Kunst. 
 
23.09.2019  
 




Antworten


Thementitel, max. 100 Zeichen.
 

Systemprofile:

Kein Systemprofil angelegt. [anlegen]

XProfan:

 Beitrag  Schrift  Smilies  ▼ 

Bitte anmelden um einen Beitrag zu verfassen.
 

Themenoptionen

333.002 Betrachtungen

Unbenanntvor 0 min.
HofK vor 24 Tagen
Rschnett24.08.2024
Michael W.28.03.2024
Thomas Zielinski17.02.2024
Mehr...

Themeninformationen



Admins  |  AGB  |  Anwendungen  |  Autoren  |  Chat  |  Datenschutz  |  Download  |  Eingangshalle  |  Hilfe  |  Händlerportal  |  Impressum  |  Mart  |  Schnittstellen  |  SDK  |  Services  |  Spiele  |  Suche  |  Support

Ein Projekt aller XProfaner, die es gibt!


Mein XProfan
Private Nachrichten
Eigenes Ablageforum
Themen-Merkliste
Eigene Beiträge
Eigene Themen
Zwischenablage
Abmelden
 Deutsch English Français Español Italia
Übersetzungen

Datenschutz


Wir verwenden Cookies nur als Session-Cookies wegen der technischen Notwendigkeit und bei uns gibt es keine Cookies von Drittanbietern.

Wenn du hier auf unsere Webseite klickst oder navigierst, stimmst du unserer Erfassung von Informationen in unseren Cookies auf XProfan.Net zu.

Weitere Informationen zu unseren Cookies und dazu, wie du die Kontrolle darüber behältst, findest du in unserer nachfolgenden Datenschutzerklärung.


einverstandenDatenschutzerklärung
Ich möchte keinen Cookie