| |
| |
|
| - Página 1 - |
|
HofK | Auf una heißen  Tipp de IF hin, Yo me de tiempo
three.js [...]  angeschaut. Como [...] (bastante unten) el ersten Resultate. |
|
| |
| |
| |
|
| |
| |
| - Página 14 - |
|
|
HofK | ByteAttack (28.02.2018)
Zu kompliziert para mich  Bin fuera 
Wenn Yo fremde Fuente a three.js anschaue, denke Yo el Zitat auch muy oft. Wenn lo mich interessiert y Tiempo es, wühle Yo mich rein - y luego bin oft, pero no siempre "drin".
Nur si uno laufend en el Materie es ha uno una Chance.
p.specht (01.03.2018)
...dass el untere Biegung el Figur algo nachhinkt en el Bildaufbau...
Kann Yo ahora no nachvollziehen, demnächst hay el Box como Sphere en el "Sandkasten". Dann puede ser correcto testen woran lo mentira podría.
-------------------------------------
Mittlerweile Yo Multimaterial "eingebaut". Hay 11 Materialien nutzbar, para el 6 Páginas, el Kanten a 3 Achsen y el oberen y unteren Ecken, also a +y y -y.
El Systematik el Kanten musste Todavía una vez ändern, lo gab Problemas beim uv-Mapping y el Multimaterial.
Der Code vom gestrigen Contribución wurde korrigiert.
 |
|
| |
| |
| |
|
|
HofK | demnächst hay el Box como Sphere en el "Sandkasten"
Noch no final, aber ya para testen. El Struktur musste Yo nochmals ligeramente ändern, lo son muy viele Abhängigkeiten a beachten.
Magische Kugel y Kiste debería auch todavía möglichst zueinander passen. Auch deshalb hay una Änderung en sideCorner en el obige Bild.
Neu:
Zwei Varianten el Explosionsdarstellung son verfügbar.
Einmal (como bisher) en Richtung el Flächennormalen y zusätzlich neu en Richtung des Strahls vom Ursprung para Mittelpunkt el rechteckigen Segmente o. el Dreiecke en el 4 Ecken el Kiste.
Dies es eigentlich el korrekte Art y nada así aufwändig, Yo anfangs pensamiento. Wenn uno una guten Ansatz findet! Das war mein Problema.
Yo voluntad schauen y esta Art entonces en TREEf nachrüsten. Ob lo en THREEp Sinn macht, muss Yo sólo prüfen, el Normalen son hay (fast???) identisch el Strahl vom Kugelzentrum.
Über [...] o. [...] oder [...] gelangt uno a magischen Kugel oder Kiste.
Der Code muss otra vez durchgesehen y algo optimiert voluntad.
Erst entonces en GitHub y discourse.
Übrigens es nun ya Revision 90 de three.js aktuell. Damit funktioniert lo. |
|
| |
| |
| |
|
|
HofK | ...el Normalen son hay (fast???) identisch el Strahl vom Kugelzentrum.
Sí en Kugel, aber el verforme Yo sí teils muy kräftig. Dann hay auch en MagicSphere y TEREEp muy große Unterschiede.
Also Yo en MagicSphere el Modi 'center' y 'normal' integriert.
En THREEf y THREEp demnächst.
Aktualisiert en sandboxthreeg [...] y nun auch en GitHub. [...]
En algunos Beispielen Yo Características function(t) así manipuliert, dass el Mausbewegung Einfluss en el Form ha.
Por ejemplo
function depthFunc( t ){ volver mouse.y }
...
depth: depthFunc,
waffleDeep: function( t ) { volver mouse.y % Math.floor( t ) }, // use mouse |
|
| |
| |
| |
|
|
HofK | |
| |
| |
| |
|
|
HofK | |
| |
| |
| |
|
|
HofK | Mir es aufgefallen, dass Yo beim "seichten" Einstieg en el 3D Browserwelt siempre sólo schrittweise algunos grundlegende Dinge como solche erkannt habe.
Deshalb Yo el nun veces en muy knapper Form y hoffentlich verständlich zusammengefasst.
Hier en el Box y bastante unten en meiner Página [...] .
WebGL - GLSL - three.js - JavaScript - DOM
WebGL
En WebGL (Web Gráficos Library) es se trata de un JavaScript-Programmierschnittstelle, con deren Ayuda bewgte 3D-Gráficos hardwarebeschleunigt en el Webbrowser dargestellt voluntad puede. Dazu voluntad no zusätzliche Erweiterungen benötigt.
WebGL wurde en el Vergleich a Browsern (de 1989) relativ spät entwickelt. Der Beginn datiert etwa 20 Jahre danach!
WebGL basiert en OpenGL ES (Open Gráficos Library for Embedded Systems) en el Zusammenspiel con el Lenguaje de programación JavaScript. WebGL se de el Khronos Group y Mozilla como lizenzfreier Standard entwickelt.
OpenGL ES incluso es una Spezifikation para una plattform- y sprachenunabhängige Programmierschnittstelle a Desarrollo de 3D-Computergrafik. El Spezifikation beschreibt una vereinfachte Versión de OpenGL (Open Gráficos Library). Diese wiederum beschreibt etwa 250 Befehle, el el Darstellung komplexer 3D-Szenen en Echtzeit erlauben. OpenGL wurde erstmals ya 1992 veröffentlicht.
WebGL se zumeist en el GPU (Gráficos Processing Unit) en lugar de en el CPU (Central Processing Unit) ausgeführt. El GPU kann viele Operationen gleichzeitig ausführen, ellos arbeitet massiv parallel. Dabei es letztendlich hauptsächlich a Bestimmung de Koordinaten y Farbwerten. So entsteht el bewegte 3D Grafik en el Bildschirm.
Wenn uno una 2D Bildschirmbild de uno 3D WebGL Scene berechnet, muss para cada individual Bildschirmpunkt una Farbwert determinado voluntad. Hay muy viele "einfache", voneinander unabhängig Berechnungen nötig. Darauf Es el GPU spezialisiert.
GLSL
El en WebGL benutzte Lingua es GLSL (OpenGL Shading Language), una Lenguaje de programación, en en el Grafikprozessor propio Programas, sogenannte Shader (Schattierer), auszuführen. GLSL es una C-ähnliche Lenguaje de programación, el específicamente a el Notwendigkeiten de Shadern adaptado wurde. Lo son eingebaute Typen para Vektoren, Matrizen y viele Mathematik- y Grafikfunktionen. Viele Operationen puede en más Datenelementen parallel trabajo.
Lo son el GLSL-Shadertypen Vertex-, Tessellation-, Geometry- y Fragmentshader como Teil el Rendering-Pipeline (Darstellunsschrittezur 3D-Szene) y el su unabhängigen Compute-Shader. Der Programmierer übergibt para cada Shadertyp el Shader-Quellcode y zusätzliche Variables/Konstanten. Der WebGL-Treiber kompiliert y linkt el Shader a una Shaderprogramm. Dies se en el GPU ausgeführt.
three.js
El en JavaScript vorliegende Biblioteca three.js wurde erstmals en el April 2010 de Mr. Doob (Ricardo Cabello) en GitHub veröffentlicht. Bibliotheken como three.js ermöglichen lo, komplexe 3D-Computeranimationen a redactar, el en el Navegador adecuado voluntad. Mit three.js puede con wesentlich geringerem Aufwand y muy übersichtlich komplexere Scenarien erstellt voluntad. Letztendlich se entonces aber encima WebGL el Scene dargestellt. Dabei ha three.js Zugriff en todos Características de GLSL. El Biblioteca se de uno Comunidad kontinuierlich weiterentwickelt y es en GitHub verfügbar. Sie es Open Source, kann aber para propio kommerzielle Projekte verwendet voluntad (MIT-Lizenz).
JavaScript
JS (JavaScript) es una Skriptsprache, el 1995 beginnend de Netscape entwickelt wurde. Sie ermöglicht dynamisches HTML en Webbrowsern, en Benutzer- Interaktionen auszuwerten, Inhalte a modifizieren, nachzuladen oder auch dynamisch a generieren. El Möglichkeiten de HTML y CSS fueron así wesentlich erweitert.
DOM
Das DOM (Document Object Model) Es el Spezifikation uno Programmierschnittstelle. HTML- Dokumente voluntad esta como Baumstruktur dargestellt, en el cada Knoten una Objeto es, welches una Teil des Dokumentes darstellt. So kann con JavaScript gezielt en el Elemente el Página lesend / schreibend zugegriffen voluntad. Dadurch puede Objekteigenschaften verändert voluntad. Lo dejar se auch dynamisch Objetos en el HTML Página redactar y löschen.
DOM se vom W3C (World Wide Web Consortium, gegründet 1994 ) definiert.
Es seit 1998 una Standard des W3C y fue seitdem mehrfach aktualisiert y erweitert. Lo existieren mehrere Versionen (Levels). |
|
| |
| |
| |
|
|
HofK | Nach así viel Geometrie, el hauptsächlich de el Funktionswerten diverser Características generiert se, Yo me ahora una vez de otra manera vorgeknöpft.
Man muss bastante viele Daten eingeben, en una möglichst frei konfigurierbaren Innenraum en 3D a generieren.
Dabei hay una Vielzahl de Möglichkeiten. Nach algunos interessanten aber oft no brauchbaren Tests, Yo momentan folgende Variante "in Arbeit".
Dabei puede ser el así definierten Felder (con Kommentar) Editar.
<textarea id="floors" style="width: 620px; height: 120px " > [
<!-- Hauptraum: x,z Grundriss gegen Uhrzeigersinn, y Niveauhöhe -->
[ 0,7, 0, 9,7, 0, 9,0, 0, 0,0, 0 ],
<!-- Erker: x,z Grundriss gegen Uhrzeigersinn, y Niveauhöhe -->
[ 9,6, 0.2, 11,5, 0.2, 11,2, 0.2, 9,1, 0.2 ]
] </textarea>
Nach Aktualisierung (F5) sieht uno inmediatamente el Änderung, como el Inhalt des veränderten Textfeldes retenido.
El Wände haben todavía no uv's y voluntad zufällig gefärbt.
Wenn Yo no ni bessere Variante entdecke, voluntad Yo el veces a una pequeño Schauraum ausbauen. |
|
| |
| |
| |
|
|
HofK | |
| |
| |
| |
|
|
HofK | El interne Struktur el Generierung el Wände musste todavía una vez geändert voluntad, como ellos sólo para dünne Wände (Innenseite el Außenwände) konzipiert war. Desde que aber auch dicke Wände como Trennwände haben möchte y dieser Verfahrensweise auch otro Bauteile como Konsolen, Podeste, Ausstellungstische usw. realisiert voluntad debería, fue un Neuprogrammierung unumgänglich.
Tiempo abgesehen de los todavía unmöglichen Texturen, puede ser aber ya erkennen, wo lo hin va.
Hay auch runde Forma posible.
El Böden, Decken y Wände y eckigen Bauteile Yo con incluso erstellter non-indexed BufferGeometry producido.
Für el runden Forma bot se THREE.CylinderBufferGeometry a.
Diese se en three.js como indexed BufferGeometry realisiert.
Mit el uv's Tuve entonces una Problema. Standardmäßig Es el Textur después de außen correcto herum y innen gespiegelt. Im obigen Bild es pero la Zylinderteil (runde Raum"ecke") de innen a sehen.
Nach Recherche Yo igual zwei einfache Lösungen gefunden. Wer el Wahl ha, ha el Qual. Yo habe mich todavía no entschieden.
Einmal puede ser el Textur spiegeln
var uvMirroredGrid= new THREE.TextureLoader().load( "uvgrid01.png" );
uvMirroredGrid.wrapS = THREE.RepeatWrapping;
uvMirroredGrid.repeat.x = - 1;
oder uno spiegelt el uv's en el Attribut el 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 algunos passende Texturen a bekommen, muss Yo mich todavía intensiver con Grafik befassen. Mit Gimp 2.8 bin Yo no así correcto "warm" geworden.
Posesiones algo gesucht y Krita gefunden. Ist auch größtenteils Alemán.
En heise [...] .
Tiempo schauen, si Yo como mejor klarkomme. El getupfte Rückwand es una erster Intento! |
|
| |
| |
| |
|
|
HofK | oder uno spiegelt el uv's en el Attribut el Geometrie
... erscheint me sinnvoller, como ellos el Geometrie incluso betrifft y el Textur no verändert se. So puede ser el Textur auch unverändert mehrfach benutzen.
.....................................................................................................................................
In el obigen Bildern klafft una Loch. Como muss una Tür rein. Zuerst aber veces el Zarge.
Como gab lo en Discourse veces una Frage [...]
y una tolle Solución de prisoner849. [...]
function ProfiledContourGeometry(profileShape, contour, contourClosed) { ...
Mit dieser Función es entonces rápidamente getan. Hier el Türzarge kurz antes el Einbau.
Aus el beiden Werten 0.5 simplemente 0 gemacht y ya sitzt el Zarge passend.
Si el veces praktisch auch así rápidamente ginge, Yo como ya veces Stunden verbracht! |
|
| |
| |
| |
|
|
HofK | Der Ausstellungsraum Aunque aún en Rohbau, aber ya fueron el ersten Exponate angeliefert.
Und igual zwei Königinnen!
Also necesario ellos testweise platziert voluntad.
Das Foto el "Königin el Nacht" ha con el Método como para el Zarge bastante rápidamente una passenden Rahmen bekommen.
[ 4.91,0.25, 1.21,2.89, 7.09,0.25, 1.21,2.89, 1 ]
El letzte 1 schließt el Rahmen. Das Bild incluso se como una dünne Wand generiert. Das Foto dient como Textur.
<!-- Bilder -->
[ 7,0.26, 1.3,2.8, 5,0.26, 1.3,2.8 ],
Unsere Königin blüht siempre Ende Juni. Nach el Abendbrot va ellos langsam en y si uno no bastante früh aufsteht, es ellos ya otra vez verwelkt. So gegen 5:00-6:00 Sommerzeit puede ser otra vez schauen.
El Nofretete se de @author bhouston / http ://clara.io [...] libre disponible gestellt. Ben Houston es auch uno el Mitentwickler de three.js.
Das Modell liegt en el JSON Formato (JavaScript Object Notation) antes.
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 );
}
In meiner Ausstellung sieht el altägyptische Königin en el Gegensatz para Original en clara.io algo blass de. Lo fehlt todavía el passende Farbzuordnung/Beleuchtung - Rohbau!
Übrigens puede ser el JSON Expediente con Firefox invitar. Etwas warten, el Expediente es bastante groß. Das verzögert auch el Seitenaufbau en mi Schauraum.
Beim Bilderrahmen puede ser erkennen, dass el linke untere Ecke se farblich algo abhebt. Hier leuchtet una 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 | Einige (Kunst)blumen hacer el Raum igual freundlicher.
Zum Test Yo una Blume de Hitesh Sahu (free) [...] en zwei Formaten (JSON y OBJ/MTL) heruntergeladen.
El Einbindung el JSON Expediente:
new THREE.ObjectLoader().load( "flower.json", loadFlower );
function loadFlower( obj ) {
obj.scale.set( 0.01, 0.01, 0.01 ); // Original ha otro Maßstab!
obj.position.set( 7, 0.0001, 3 );
room.add( obj );
}
brachte una Überraschung para mich.
No sólo el reine Modell, pero auch el Beleuchtung steckt en el .json Expediente.
Diese kommt a meiner ya vorhandenen Beleuchtung hinzu y Raum es stark überbeleuchtet. Man erkennt al Blumentopf, dass Licht de verschiedenen Richtungen kommt.
Bringt nun cada Modell ser propio Licht con, son el el totale Lichtverschmutzung.
JSON Archivos son lesbar y así findet uno fast al Anfang el Lichtvoreinstellung (light preset).
Hier simplemente para todos Lichter (gesamter Block) "visible" en falso gesetzt y el Extralicht va de. Natürlich puede ser auch el Block a dejar y einzelne Lichtquellen, z.B. el Sonnenlicht ausschalten.
Nun el identische Blume como OBJ/MTL Archivos importiert. Dazu muss uno en el Gegensatz a JSON zusätzlich a three.js todavía el (muy pequeño) 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 ha otro Maßstab!
obj.position.set( 6.6, 0.0001, 3 );
room.add( obj );
} );
}
Durch el Trennung de Geometrie (.obj) y Material (.mtl) Es el Sache aufwändiger.
Hier kam kein Licht con.
El Blumen voluntad no identisch dargestellt. Como juega el Beleuchtungsmodell, el Beziehung de Licht/Material/Geometrie con.
Wenn Yo para media Bilderrahmen en lugar de THREE.MeshLambertMaterial (flatShading ändert nichts)
THREE.MeshPhongMaterial con flatShading: true nehme, sieht lo auch deutlich anders de.
Lo son sooooooooooooo viele Möglichkeiten y así puede ser eben tolle Effekte erzielen, lo braucht algo Tiempo, el halbwegs a überschauen. |
|
| |
| |
| |
|
(463)
es:
Deutsch
English
Français
Español
Italia