| |
| |
|
| - page 1 - |
|
HofK | sur une appeler  Tipp de IF hin, habe je mir la fois
three.js [...]  angeschaut. là [...] (entier unten) qui ersten Resultate. |
|
| |
| |
| |
|
| |
| |
| - 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.
 |
|
| |
| |
| |
|
|
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. |
|
| |
| |
| |
|
|
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 |
|
| |
| |
| |
|
|
HofK | |
| |
| |
| |
|
|
HofK | |
| |
| |
| |
|
|
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). |
|
| |
| |
| |
|
|
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. |
|
| |
| |
| |
|
|
HofK | |
| |
| |
| |
|
|
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! |
|
| |
| |
| |
|
|
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! |
|
| |
| |
| |
|
|
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 ]; |
|
| |
| |
| |
|
|
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. |
|
| |
| |
| |
|
(512)
ca va:
Deutsch
English
Français
Español
Italia