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 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.

 
23.02.2022  
 




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.
document.addEventListener('keydown', function( e ) { ...

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:  [...] 
 
21.03.2022  
 




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.

 
27.03.2022  
 




HofK
Die multiFormGeometry ist in einer statischen und dynamischen Variante verfügbar.



discourse:  [...] 
GitHub:  [...] 

Ausprobieren:  [...] 
 
25.04.2022  
 




HofK
Nebenbei gab es noch folgendes

 [...] 

 [...] 

Links zu discourse im Sourcecode
 
25.04.2022  
 




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.
if( g2D ) {// 2D geometry

    x = r * fx[ i ][ j ] * ( j - rs / 2 ) / rs * scX;
    y = h * fh[ i ][ j ] * scY;
    z = 0;

} else  {// 3D geometry

    x =  r * fx[ i ][ j ] * scX * Math.cos( φ( j ) );
    y =  h * fh[ i ][ j ] * scY;
    z = -r * fz[ i ][ j ] * scZ * Math.sin( φ( j ) );

    if ( cover ) {// unroll cover

        z = Math.sqrt( x * x + z * z ) - r * fx[ i ][ 0 ] * scX;
        x = r * fx[ i ][ j ] * scX * φc( j );// center x

    }

}

 
05.05.2022  
 




HofK
SOMMERLOCH

Das Daten Visualisierungs Netz ist seit Mai in Arbeit, kommt aber mangels Zeit nicht so recht voran. Es fehlen einfach die Regentage an denen man sorglos am Rechner werkeln kann ohne befürchten zu müssen, dass der Garten zur Steppe wird.

Auch haben sich einige "Hardware" Projekte gestaut. Die gilt es abzuarbeiten.

Ein Testnetz:



Aus einer Reihe von Daten die strukturiert in Feldern anzugeben sind wird das Netz automatisch generiert. Auch eine Interaktion ist mittels Raycast möglich.
 
25.07.2022  
 




HofK
Endlich mal Zeit gefunden, eine angefangene kleine Sache zu beenden.

 [...] 

Eine dynamische Röhre mit geschlossenen Enden.

Siehe  [...]  auf discourse.
 
11.10.2022  
 




p.specht

"Knorke!", wie der Lateiner sagt ...
 
XProfan 11
Computer: Gerät, daß es in Mikrosekunden erlaubt, 50.000 Fehler zu machen, zB 'daß' statt 'das'...
12.10.2022  
 




HofK
Da ich mich nicht weiter für Modellierungssoftware interessiere, und im Forum meist auf Blender verwiesen wird, waren mir Alternativen nicht geläufig.

Heute wurde ein Diskussionsbeitrag veröffentlicht, in dem es um Anim8or geht.
Eine freie, wohl einfachere Software, die aber für viele Dinge ausreichend ist.
Manchmal ist Software ja so überladen, dass man schwer Zugang findet.

Bei Interesse:

Homepage:  [...] 
Manual:  [...] 
 
28.10.2022  
 




HofK


Wer sich für die Mars Missionen der NASA interessiert:  [...]  [...] 
 
29.10.2022  
 




HofK
Die Arbeit am Netz ist recht aufwändig und braucht Zeit.

Aber nebenbei ist eine neue Konstruktionsvariante eines Rechtecks mit abgerundeten Ecken herausgekommen.

Siehe  [...] 



Der Code ist sehr kompakt. Die Konstruktion arbeitet ausschließlich mit radialen Segmenten wie beim Kreis.

Auf discours:  [...] 
Github:  [...] 
function RectangleRounded( w, h, r, s ) {// width, height, radiusCorner, smoothness

    const pi2 = Math.PI * 2;
    const n = ( s + 1 ) * 4;// number of segments
    let indices = [];
    let positions = [];
    let uvs = [];
    let qu, sgx, sgy, x, y;
    for ( let j = 1; j < n + 1; j ++ ) indices.push( 0, j, j + 1 );// 0 is center
    indices.push( 0, n, 1 );
    positions.push( 0, 0, 0 );// rectangle center
    uvs.push( 0.5, 0.5 );
    for ( let j = 0; j < n ; j ++ ) contour( j );
    const geometry = new THREE.BufferGeometry( );
    geometry.setIndex( new THREE.BufferAttribute( new Uint32Array( indices ), 1 ) );
    geometry.setAttribute('position', new THREE.BufferAttribute( new Float32Array( positions ), 3 ) );
    geometry.setAttribute('uv', new THREE.BufferAttribute( new Float32Array( uvs ), 2 ) );
    return geometry;

    function contour( j ) {

        qu = Math.trunc( 4 * j / n ) + 1 ;// quadrant  qu: 1..4
        sgx = ( qu === 1 || qu === 4 ? 1 : -1 )// signum left/right
        sgy =  qu < 3 ? 1 : -1;// signum  top / bottom
        x = sgx * ( w / 2 - r ) + r * Math.cos( pi2 * ( j - qu + 1 ) / ( n - 4 ) );// corner center + circle
        y = sgy * ( h / 2 - r ) + r * Math.sin( pi2 * ( j - qu + 1 ) / ( n - 4 ) );
        positions.push( x, y, 0 );
        uvs.push( 0.5 + x / w, 0.5 + y / h );

    }

}

 
29.11.2022  
 




Antworten


Thementitel, max. 100 Zeichen.
 

Systemprofile:

Kein Systemprofil angelegt. [anlegen]

XProfan:

 Beitrag  Schrift  Smilies  ▼ 

Bitte anmelden um einen Beitrag zu verfassen.
 

Themenoptionen

324.645 Betrachtungen

Unbenanntvor 0 min.
Rschnett vor 16 Tagen
Michael W.28.03.2024
Thomas Zielinski17.02.2024
Uwe ''Pascal'' Niemeier24.01.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