Français
PHP, HTML & JavaScript- Forum

3D Grafik - WebGL avec three.js

 
- page 1 -



HofK
sur une appeler Tipp de IF hin, habe je mir la fois
three.js  [...]  angeschaut. là  [...]  (entier unten) qui ersten Resultate.
 
31.01.2016  
 



 
- page 14 -



HofK
ByteAttack (28.02.2018)
trop compliqué pour mich suis raus


si je fremde Source trop three.js anschaue, denke je cela citation aussi très souvent. si es mich intéressé et Zeit ist, wühle je mich rein - et ensuite suis souvent, mais pas toujours "drin".

seulement si on laufend dans qui substance ist hat on une chance.

p.specht (01.03.2018)
...dass qui untere Biegung qui Figur quelque chose nachhinkt im Bildaufbau...


peux je maintenant pas nachvollziehen, bientôt gibt es qui Box comment qui Sphere im "Sandkasten". ensuite peux on richtig testen woran es liegen pourrait.

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

Mittlerweile habe je Multimaterial "eingebaut". il y a 11 Materialien nutzbar, pour qui 6 Seiten, qui Kanten le 3 Achsen et qui oberen et unteren Ecken, alors trop +y et -y.



qui Systematik qui Kanten musste je encore einmal changement, es donnais Probleme beim uv-Mapping et dem Multimaterial.


qui Code vom gestrigen Beitrag wurde korrigiert.


 
01.03.2018  
 




HofK
bientôt gibt es qui Box comment qui Sphere im "Sandkasten"

encore pas final, mais déjà zum testen. qui Struktur musste je nochmals léger changement, il y a très viele Abhängigkeiten trop tenir compte de.

Magische Kugel et Kiste devoir aussi encore possible zueinander passen. aussi c'est pourquoi gibt es une Changement chez sideCorner im obige Bild.

récente:



deux Varianten qui Explosionsdarstellung sommes disponible.

Einmal (comment bisher) dans direction qui Flächennormalen et zusätzlich récente dans direction des Strahls vom Ursprung zum Mittelpunkt qui rechteckigen Segmente bzw. qui Dreiecke chez den 4 Ecken qui Kiste.

ca ist eigentlich qui korrekte Art et gar pas so aufwändig, comment je anfangs dachte. si on une guten Ansatz findet! cela était mon Problem.

je werde regarder et cet Art ensuite chez TREEf nachrüsten. si es chez THREEp Sinn pouvoir, muss je seulement vérifier, qui Normalen sommes là (presque???) identique dem Strahl vom Kugelzentrum.

Über  [...]  bzw.  [...]  ou bien  [...]  gelangt on zur magischen Kugel ou bien Kiste.



qui Code muss nochmal durchgesehen et quelque chose optimiert volonté.
seulement ensuite sur GitHub et discourse.

Incidemment ist eh bien bereits Revision 90 de three.js aktuell. avec cela funktioniert es. 
 
05.03.2018  
 




HofK
...qui Normalen sommes là (presque???) identique dem Strahl vom Kugelzentrum.

oui chez qui Kugel, mais qui verforme je oui teils très kräftig. ensuite gibt es aussi chez MagicSphere et TEREEp très grand Unterschiede.

alors habe je chez MagicSphere qui Modi 'center' et 'normal' integriert.

chez THREEf et THREEp bientôt.
 

Aktualisiert sur sandboxthreeg  [...]  et eh bien aussi chez GitHub.  [...] 

chez einigen Beispielen habe je Funktionen function(t) so manipuliert, dass qui Mausbewegung Einfluss sur qui forme hat.

Beispielsweise

function depthFunc( t ){ return mouse.y }
...
depth: depthFunc,

waffleDeep: function( t ) { return mouse.y % Math.floor( t ) }, // use mouse
 
07.03.2018  
 




HofK
aussi sur discourse  [...]  vorgestellt et weitere Beispiele dort [...] 

sur meiner Seite [...]  [...] 

 
07.03.2018  
 




HofK
HofK (07.03.2018)
chez THREEf et THREEp bientôt. 


dépendant de



ändert sich dans qui Sandbox THRREf et THREEp qui Bereich



chez non indexed trop



et il peut den Modus pour qui Explosionsdarstellung auswählen.

simple la fois essayer.

---
NACHTRAG 11.03. - maintenant aussi sur GitHub et là  [...] 
 
10.03.2018  
 




HofK
Mir ist aufgefallen, dass je beim "seichten" Einstieg dans qui 3D Browserwelt toujours seulement schrittweise quelques grundlegende Dinge comme solche erkannt habe.

c'est pourquoi habe je cela eh bien la fois dans très knapper forme et hoffentlich verständlich zusammengefasst.

ici dans qui Box et entier unten sur meiner page  [...]  .

WebGL - GLSL - three.js - JavaScript - DOM

WebGL

chez WebGL (Web Graphics Library) handelt es sich um une JavaScript-Programmierschnittstelle, avec en Aider bewgte 3D-Grafiken hardwarebeschleunigt im Webbrowser dargestellt volonté peut. en supplément volonté aucun zusätzliche Erweiterungen nécessaire.

WebGL wurde im comparaison le Browsern (ab 1989) relativ spät entwickelt. qui Beginn datiert etwa 20 Jahre après!

WebGL basé sur OpenGL ES (Open Graphics Library for Embedded Systems) im Zusammenspiel avec qui Programmiersprache JavaScript. WebGL wird de qui Khronos Group et Mozilla comme lizenzfreier Standard entwickelt.

OpenGL ES selbst ist une Spezifikation pour une plattform- et sprachenunabhängige Programmierschnittstelle zur Entwicklung de 3D-Computergrafik. qui Spezifikation beschreibt une vereinfachte Version de OpenGL (Open Graphics Library). cet wiederum beschreibt etwa 250 Befehle, qui qui représentation komplexer 3D-Szenen dans temps réel erlauben. OpenGL wurde erstmals bereits 1992 veröffentlicht.

WebGL wird zumeist dans qui GPU (Graphics Processing Unit) statt dans qui CPU (Central Processing Unit) fonctionnement. qui GPU peux viele Operationen gleichzeitig effectuer, elle travaille massif parallèle. Dabei ca va letztendlich principale à Bestimmung de Koordinaten et Farbwerten. So entsteht qui bewegte 3D Grafik sur dem Bildschirm.

si on un 2D Bildschirmbild aus einer 3D WebGL Scene berechnet, muss pour jeden individuel Bildschirmpunkt un Farbwert bestimmt volonté. il y a très viele "einfache", voneinander indépendant Berechnungen nötig. puis ist qui GPU spezialisiert.

GLSL

qui dans WebGL benutzte Discours ist GLSL (OpenGL Shading Language), une Programmiersprache, um sur dem Grafikprozessor eigene Programme, sogenannte Shader (Schattierer), auszuführen. GLSL ist une C-ähnliche Programmiersprache, qui speziell à qui Notwendigkeiten de Shadern angepasst wurde. il y a eingebaute Typen pour Vektoren, Matrizen et viele mathématique- et Grafikfunktionen. Viele Operationen peut sur mehreren Datenelementen parallèle travailler.

il y a qui GLSL-Shadertypen Vertex-, Tessellation-, Geometry- et Fragmentshader comme partie qui Rendering-Pipeline (Darstellunsschrittezur 3D-Szene) et qui en unabhängigen Compute-Shader. qui Programmierer übergibt pour jeden Shadertyp den Shader-Quellcode et zusätzliche Variablen/Konstanten. qui WebGL-Treiber kompiliert et linkt qui Shader trop einem Shaderprogramm. ca wird dans qui GPU fonctionnement.

three.js

qui dans JavaScript vorliegende Bibliothèque three.js wurde erstmals im avril 2010 de Mr. Doob (Ricardo Cabello) chez GitHub veröffentlicht. Bibliotheken comment three.js ermöglichen es, komplexe 3D-Computeranimationen trop erstellen, qui im Browser angezeigt volonté. avec three.js peut avec wesentlich geringerem Aufwand et très übersichtlich komplexere Scenarien erstellt volonté. Letztendlich wird ensuite mais sur WebGL qui Scene dargestellt. Dabei hat three.js Zugriff sur alle Funktionen de GLSL. qui Bibliothèque wird de einer Community kontinuierlich weiterentwickelt et ist sur GitHub disponible. vous ist Open Source, peux mais pour eigene kommerzielle Projekte verwendet volonté (MIT-Lizenz).

JavaScript

JS (JavaScript) ist une Skriptsprache, qui 1995 beginnend de Netscape entwickelt wurde. vous permet dynamisches HTML dans Webbrowsern, um Benutzer- Interaktionen auszuwerten, Inhalte trop modifizieren, nachzuladen ou bien aussi dynamisch trop generieren. qui Opportunités de HTML et CSS wurden so wesentlich erweitert.

DOM

cela DOM (Document Object Model) ist qui Spezifikation einer Programmierschnittstelle. HTML- Dokumente volonté dabei comme Baumstruktur dargestellt, dans qui chacun Knoten un objet ist, welches une partie des Dokumentes darstellt. So peux avec JavaScript gezielt sur qui Elemente qui page lesend / schreibend zugegriffen volonté. Dadurch peut Objekteigenschaften modifié volonté. Es laisser sich aussi dynamisch Objekte sur qui HTML page erstellen et effacer.

DOM wird vom W3C (World Wide Web Consortium, gegründet 1994 ) défini.
c'est depuis 1998 un Standard des W3C et wurde seitdem mehrfach aktualisiert et erweitert. Es existieren plusieurs Versionen (Levels).
 
13.03.2018  
 




HofK
Pour so viel Geometrie, qui principale aus den Funktionswerten diverser Funktionen generiert wird, habe je mir maintenant einmal autre chose vorgeknöpft.

on muss droite viele données eingeben, um une possible libre konfigurierbaren Innenraum dans 3D trop generieren.

Dabei gibt es une Vielzahl de Opportunités. Pour einigen interessanten mais souvent pas brauchbaren Tests, habe je momentan folgende variante "in Arbeit".



Dabei peux on qui so definierten Felder (avec Kommentar) éditer.
<textarea id="floors"  style="width: 620px; height: 120px " > [
<!-- Hauptraum: x,z Grundriss vers Uhrzeigersinn, y Niveauhöhe -->
[ 0,7, 0,  9,7, 0,  9,0, 0,  0,0, 0 ],
<!-- Erker: x,z Grundriss vers Uhrzeigersinn, y Niveauhöhe -->
[ 9,6, 0.2,  11,5, 0.2,  11,2, 0.2,  9,1, 0.2 ]
] </textarea>

Pour Aktualisierung (F5) sieht on tout de suite qui Changement, là qui le contenu des veränderten Textfeldes conservé bleibt.

qui Wände avons encore aucun uv's et volonté zufällig teinté.

si je pas encore une bessere variante entdecke, werde je cela la fois trop einem kleinen Schauraum ausbauen.
 
18.03.2018  
 




HofK
HofK (18.03.2018)
on muss droite viele données eingeben, um une possible libre konfigurierbaren Innenraum dans 3D trop generieren.



Im obigen Bild habe je pour den Boden eigene uv's eingegeben. cela peux pour Figuren outre- vom Rechteck sinnvoll son. chez einfachen Figuren sollte cela Script qui uv-Werte chez besoin mais sinnvoll selbst ermitteln peut.

Gibt on un leeres champ   à, so geschieht cela eh bien.



Beim Hauptraum ist ne...aucune Unterschied, là qui Werte sur 0 bzw 1 gesetzt étions. Beim Erker hingegen wurde aus qui grand Textur par qui Brüche quelque chose herausgeschnitten. eh bien wird qui gesamte Textur très stark gestaucht. Zum comparaison maintenant qui identische Wandtextur.



chez qui Rechnerei le uv's qui non-indexed BufferGeometry habe je, quoique je theoretisch sais comme allez, glatt wieder faute incorporé. tant pis pour Débutant, dass qui simple Geometry pas dauerhaften Bestand avons soll.

So "einfach" ca va:
si ( floorsUVArray[ f ].length === 0 ) {

    for ( var c = 0, uv = 0, p = 0; c < corners; c ++, uv += 6, p += 9 ) {

        floorUVs[ f ][ uv ] = ( xM - xMin ) / dx;
        floorUVs[ f ][ uv + 1 ] = ( zM - zMin ) / dz;
        floorUVs[ f ][ uv + 2 ] = ( floorPositions[ f ][ p + 3 ] - xMin) / dx;
        floorUVs[ f ][ uv + 3 ] = ( zMax - floorPositions[ f ][ p + 5 ] ) / dz;
        floorUVs[ f ][ uv + 4 ] = ( floorPositions[ f ][ p + 6 ] - xMin) / dx;
        floorUVs[ f ][ uv + 5 ] = ( zMax - floorPositions[ f ][ p + 8 ] ) / dz;

    }

} d'autre {

    u = 0;
    v = 0;

    for (  var c = 0, uv = 0; c < corners; c ++, uv += 2 ) {

        u += floorsUVArray[ f ][ uv ];
        v += floorsUVArray[ f ][ uv + 1 ];

    }

    u = u / corners;
    v = v / corners;

    for ( var c = 0, uv = 0; c < corners; c ++, uv += 6 ) {

        floorUVs[ f ][ uv ] = u;
        floorUVs[ f ][ uv + 1 ] = v;
        floorUVs[ f ][ uv + 2 ] = floorsUVArray[ f ][ c * 2 ];
        floorUVs[ f ][ uv + 3 ] = floorsUVArray[ f ][ c * 2 + 1 ];
        floorUVs[ f ][ uv + 4 ] = floorsUVArray[ f ][ ( c + 1 ) % corners * 2 ];
        floorUVs[ f ][ uv + 5 ] = floorsUVArray[ f ][ ( c + 1 ) % corners * 2 + 1 ];

    }

}

 
19.03.2018  
 




HofK
qui interne Struktur qui Generierung qui Wände musste encore einmal geändert volonté, là vous seulement pour dünne Wände (Innenseite qui Außenwände) konzipiert était. là je mais aussi dicke Wände comme Trennwände avons voudrais et cette Verfahrensweise aussi autre Bauteile comment Konsolen, Podeste, Ausstellungstische usw. realisiert volonté devrait, était un Neuprogrammierung unumgänglich.

la fois abgesehen de den encore unmöglichen Texturen, peux on mais déjà erkennen, wohin es hin allez.





il y a aussi runde Formen possible.

qui Böden, Decken et Wände et eckigen Bauteile habe je avec selbst erstellter non-indexed BufferGeometry erzeugt.

Pour qui runden Formen bot sich THREE.CylinderBufferGeometry à.
cet wird dans three.js comme indexed BufferGeometry realisiert.

avec den uv's J'ai eu ensuite un Problem. Standardmäßig ist qui Textur pour außen richtig herum et dedans gespiegelt. Im obigen Bild ist mais qui Zylinderteil (runde Raum"ecke") de dedans trop voyons.

Pour Recherche habe je juste deux simple Lösungen trouvé. qui qui l'élection hat, hat qui tourment. j'ai mich encore pas entschieden.

Einmal peux on qui Textur spiegeln

var uvMirroredGrid= new THREE.TextureLoader().load( "uvgrid01.png" );
uvMirroredGrid.wrapS = THREE.RepeatWrapping;
uvMirroredGrid.repeat.x = - 1;


ou bien on spiegelt qui uv's im Attribut qui Geometrie

for ( var i = 0; i < roundWallGeometrys[ r ].getAttribute('uv').array.length; i += 2 ) {

roundWallGeometrys[ r ].getAttribute('uv').array[ i ] =
1 - roundWallGeometrys[ r ].getAttribute('uv').array[ i ];

}


Um quelques passende Texturen trop bekommen, muss je mich encore intensiver avec Grafik befassen. avec Gimp 2.8 suis je pas so richtig "warm" geworden.

Habe quelque chose gesucht et Krita trouvé. Ist aussi größtenteils allemande.
chez heise  [...]  .
la fois regarder, si je là besser klarkomme. qui getupfte Rückwand est un erster Versuch!
 
25.03.2018  
 




HofK
ou bien on spiegelt qui uv's im Attribut qui Geometrie

... erscheint mir sinnvoller, là vous qui Geometrie selbst betrifft et qui Textur pas modifié wird. So peux on qui Textur aussi inchangé mehrfach benutzen.

.....................................................................................................................................

dans den obigen Bildern klafft un Loch. là muss une porte rein. d'abord mais fois le Zarge.

là donnais es chez Discourse la fois une Frage [...] 
et une tolle Solution de prisoner849[...] 
function ProfiledContourGeometry(profileShape, contour, contourClosed) { ...

avec cette Funktion ist es ensuite vite getan. ici qui Türzarge kurz avant dem Einbau.



Aus den beiden Werten 0.5 simple 0 gemacht et déjà sitzt qui Zarge convenable.

si cela la fois pratique aussi so vite ginge, j'ai là déjà la fois Stunden verbracht! 
 
26.03.2018  
 




HofK
qui Ausstellungsraum ist zwar encore im Rohbau, mais déjà wurden qui ersten Exponate angeliefert.

et juste deux Königinnen!

alors doit vous testweise platziert volonté.



cela photo qui "Königin qui Nacht" hat avec qui Methode comment pour qui Zarge entier vite une passenden cadre bekommen.
[ 4.91,0.25, 1.21,2.89, 7.09,0.25, 1.21,2.89, 1 ]

qui dernier 1 schließt den cadre. cela Bild selbst wird comment une dünne mur generiert. cela photo dient comme Textur.
<!-- Bilder -->
[ 7,0.26, 1.3,2.8, 5,0.26, 1.3,2.8 ],


Unsere Königin blüht toujours Ende juin. Pour dem repas du soir allez vous lente sur et si on pas entier tôt aufsteht, ist vous encore verwelkt. So vers 5:00-6:00 Sommerzeit peux on nochmal regarder.

qui Nofretete wird de @author bhouston / http ://clara.io [...]  kostenlos zur Disposition gestellt. Ben Houston ist aussi einer qui Mitentwickler de three.js.



cela Modell liegt im JSON Format (JavaScript Object Notation) avant.
var objectLoader = new THREE.ObjectLoader();
objectLoader.load( "nefertiti.json", loadNefertiti );

function loadNefertiti( obj ) {
obj.scale.set( 0.1, 0.1, 0.1 );
obj.position.set( 7, 1, 2 );
obj.rotation.y = 2.1;
room.add( obj );
}

dans meiner Ausstellung sieht qui altägyptische Königin im opposition zum Original chez clara.io quelque chose blass aus. Es fehlt encore qui passende Farbzuordnung/Beleuchtung - Rohbau!

Incidemment peux on qui JSON Dossier avec Firefox magasin. quelque chose attendre, qui Dossier ist droite grand. cela différé aussi den Seitenaufbau chez meinem Schauraum.

Beim Bilderrahmen peux on erkennen, dass qui linke untere coin sich farblich quelque chose abhebt. ici leuchtet un Farbspot.

var spotLight = new THREE.SpotLight( 0xccffcc,1.0,16,0.2,0.5,1.2 );
spotLight.position.set( 5, 3.4, 4 );
scene.add( spotLight );

spotLight.target = frameMeshes[ 1 ];
 
27.03.2018  
 




HofK
quelques (Kunst)blumen faire den espace juste freundlicher.

Zum Test habe je une fleur de Hitesh Sahu (free)  [...]  dans deux Formaten (JSON et OBJ/MTL) heruntergeladen.

qui Einbindung qui JSON Dossier:

new THREE.ObjectLoader().load( "flower.json", loadFlower );
function loadFlower( obj ) {
obj.scale.set( 0.01, 0.01, 0.01 ); // Original hat anderen la mesure!
obj.position.set( 7, 0.0001, 3 );
room.add( obj );
}


brachte une Überraschung pour mich.

pas seulement cela reine Modell, mais aussi qui Beleuchtung steckt dans qui .json Dossier.



cet venez trop meiner bereits vorhandenen Beleuchtung hinzu et qui espace ist stark überbeleuchtet. on erkennt am Blumentopf, dass Licht aus verschiedenen Richtungen venez.

Bringt eh bien chaque Modell son eigenes Licht avec, gibt cela qui totale Lichtverschmutzung.

JSON Fichiers sommes lesbar et so findet on presque am Anfang qui Lichtvoreinstellung (light preset).



ici simple pour alle Lichter (gesamter Block) "visible" sur faux gesetzt et cela Extralicht allez aus. Bien sûr peux on aussi den Block à laisser et einzelne Lichtquellen, z.B. cela Sonnenlicht ausschalten.



eh bien qui identische fleur comme OBJ/MTL Fichiers importiert. en supplément muss on im opposition trop JSON zusätzlich trop three.js encore qui (très kleinen) Scripte

<script src="OBJLoader.js"></script>
<script src="MTLLoader.js"></script>


einbinden.

new THREE.MTLLoader( ).load("flower.mtl", loadMtlObjFlower );
function loadMtlObjFlower( materials ) {
materials.preload( );
var objLoader = new THREE.OBJLoader( ).setMaterials( materials );
objLoader.load( "flower.obj", function ( obj ) {
obj.scale.set( 0.01, 0.01, 0.01 ); // Original hat anderen la mesure!
obj.position.set( 6.6, 0.0001, 3 );
room.add( obj );
} );
}


par qui Trennung de Geometrie (.obj) et matériel (.mtl) ist qui l'affaire aufwändiger.



ici kam ne...aucune Licht avec.

qui Blumen volonté pas identique dargestellt. là écoutes cela Beleuchtungsmodell, qui Beziehung de Licht/matériel/Geometrie avec.

si je pour meinen Bilderrahmen statt THREE.MeshLambertMaterial (flatShading ändert rien)



THREE.MeshPhongMaterial avec flatShading: vrai nehme, sieht es aussi deutlich anders aus.



il y a sooooooooooooo viele Opportunités et avec cela peux on plan tolle Effekte erzielen, es braucht quelque chose Zeit, cela halbwegs trop überschauen.
 
28.03.2018  
 




répondre


Topictitle, max. 100 marque.
 

Systemprofile:

ne...aucune Systemprofil angelegt. [anlegen]

XProfan:

 Posting  Font  Smilies  ▼ 

s'il te plaît s'inscrire um une Beitrag trop verfassen.
 

Options du sujet

357.491 Views

Untitledvor 0 min.
Paul Glatz vor 19 Tagen
Uwe ''Pascal'' Niemeier23.03.2025
Manfred Barei18.03.2025
R.Schneider05.03.2025
plus...

Themeninformationen



Admins  |  AGB  |  Applications  |  Auteurs  |  Chat  |  protection des données  |  Télécharger  |  Entrance  |  Aider  |  Merchantportal  |  Empreinte  |  Mart  |  Interfaces  |  SDK  |  Services  |  Jeux  |  cherche  |  Support

un projet aller XProfaner, qui il y a!


Mon XProfan
Privé Nouvelles
Eigenes Ablageforum
Sujets-La liste de voeux
Eigene Posts
Eigene Sujets
Zwischenablage
Annuler
 Deutsch English Français Español Italia
Traductions

protection des données


Wir verwenden Cookies seulement comme Session-Cookies à cause de qui technischen Notwendigkeit et chez uns gibt es aucun Cookies de Drittanbietern.

si du ici sur unsere Webseite klickst ou bien navigierst, stimmst du unserer Erfassung de Informationen dans unseren Cookies sur XProfan.Net trop.

Weitere Informationen trop unseren Cookies et en supplément, comment du qui Kontrolle par-dessus behältst, findest du dans unserer nachfolgenden Datenschutzerklärung.


d'accordDatenschutzerklärung
je voudrais keinen Cookie