| |
| |
|
| - 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 3 - |
|
|
HofK | qui page [...] bietet un Beispiel, comment on belle Muster per Shader sur geometrische Figuren bringt et comment on une Textur aus einem Bild dynamisch variiert.
Dabei erkennt on Muster aus qui Sandbox [...] wieder.
cela Beispiel ist - de Experten gemacht - pour den Einsteiger quelque chose schwer verdaulich.
c'est pourquoi habe je qui grand Schere angesetzt et alle Dinge weggeschnitten, qui pas absolument nötig sommes. quoi bleibt, est un droite schlanker Code.
dans qui Vorgabe wird comme Bild un Muster genutzt, cela selbst déjà droite "wirr" ist. Dadurch peux on qui Manipulation per Fragment Shader pas so deutlich erkennen. Aus diesem Grund habe je meinen Desktophintergrund benutzt, une selbst fotografierte Seerosenblüte. cela l'eau ist très dunkel et ergibt une starken Kontrast qui zentralen Blüte. Dadurch peux on qui Verformungen très joli beobachten.
qui entscheidenden three.js Zeilen sommes
fragmentShaderCode2 = document.getElementById( 'fragmentShader2' ).textContent;
... usw. ...
boxGeo = new THREE.BoxGeometry( 50, 50, 50 );
uniforms2 = { time: { value: 1.0 }, texture: { value: new THREE.TextureLoader().load( "Seerose.jpg" ) }};
uniforms2.texture.value.wrapS = uniforms2.texture.value.wrapT = THREE.RepeatWrapping;
boxMat = new THREE.ShaderMaterial( {uniforms:uniforms2, vertexShader:vertexShaderCode, fragmentShader:fragmentShaderCode2} );
box = new THREE.Mesh( boxGeo, boxMat );
wohin cela Bild et qui Shadercode pour den Würfel eingebunden wird.
avec animate() wird qui l'affaire ensuite dans Schwung gebracht.
comment toujours là [...] näher trop ergründen. |
|
| |
| |
| |
|
|
HofK | cela était maintenant une richtige Knochenarbeit - im doppelten Sinn. 
Bewegliche Modelle basieren chez three.js souvent sur Haut-Netzen avec einem Skelett aus Knochen.
en supplément gibt es cela objet SkinnedMesh. Bereits avant einiger Zeit "beschwert" sich un Nutzer, dass il la fois son selbst erstelltes SkinnedMesh Modell animieren voudrais, mais alle Tutoriels stets avec "Import your model ..." commencer, là es pratique ist, une 3D Editor trop benutzen. mon Recherche kam ebenso trop aucun brauchbaren Ergebnis.
alors dans qui Documentation SkinnedMesh [...] appel, là sur
"Open dans New Window" [...] klicken et per Strg U den à peine kommentierten et pas justement anfängerfreundlichen Voir le texte source regarder.
Wieder quoi allez weggeschnitten, cela Ergebnis ist chez [...] velours kommentiertem Quellcode trop betrachten.
cela Problem ist, dass dans qui SkinnedMesh Documentation de deux imaginären Funktionen qui discours ist, mais pas tout de suite ersichtlich ist, comment vous trop définir sommes. j'ai ensuite solange gepult, jusqu'à cela Mark qui Knochen zum Vorschein kam. allez on qui Objekthierarchie sur Mesh trop Object3D pour dessus findet on - NICHTS.
là zum Netz mais toujours une Geometrie et un matériel est, là nachgeschaut. chez qui Basisklasse Geometry  [...] findet on .skinWeights et .skinIndices avec court Erklärung et Beispiel. un Hinweis chez SkinnedMesh hätte viel Zeit gespart.
Um mais wirklich trop voyons comment cela allez, habe je qui Knoten wieder la fois avec ihren Indizes geschmückt. Pour une (déformé!) Zylinder liegen qui Knoten lageweise nacheinander. [...]
là mais Rotationskörper (siehe Beispiel Lichtbrechung) droite intéressant sommes, habe je cet la fois ausprobiert. ici allez qui Nummerierung dans qui neuen Version längs qui Rotationsachse et qui Berechnung muss entsprechend geändert volonté! [...]
chez den Versuchen étions qui Formelwerte anfangs naturellement la fois "merkwürdig". intéressant sommes qui dabei zustande kommenden eigenartigen Bewegungen/Verformungen qui Knotenlage/Haut. là laisser sich tolle Effekte erzielen. |
|
| |
| |
| |
|
|
HofK | là je comment dessus ersichtlich ne...aucune Modell importieren veux, habe je mir fois le Biene Maja angeschaut et son qui Hummel Mara zur page gestellt.
cela Ergebnis dans knapp 300 Zeilen ist qualitativ sûrement pas avec qui Maja de Studio 100 trop comparer. mon Ausstattung, Kenntnis et Zeit mais aussi pas.
Biologisch pas entier korrekt, hat qui Hummel Knochen! Pour cette hat vous mais une echten Hummelpelz à. So quelque chose hat pas la fois Maja.
Zur Konstruktion des Modells habe je verschiedene Techniken zur Erstellung et Veränderung qui verfügbaren geometrischen Körper ausprobiert.
So wird aus dem "Zylinder"hut une schickes Blütenhütchen.
Aus einer Kugel wird une hohle Halbkugel comme main/Fuß. tête et Körper volonté comme Drehteile aus den angegebenen Koordinaten gebildet. qui Mund est un verbogener Zylinder, Augen et Pupillen sommes dessus rund gemachte kurze Zylinder.
qui Flügel volonté comme forme avec Bezier-Kurven erstellt.
là [...] peux on qui Hummel fliegen laisser et den Voir le texte source regarder. |
|
| |
| |
| |
|
|
HofK | Momentan generiere je quelque chose komplexere geometrische Figuren comment cet:
Dabei muss on sich zuweilen qui situation qui Knoten quelque chose näher anschauen. c'est pourquoi habe je pour qui Knotenummern encore un weiteres, effektiveres procéder gebastelt et comme Nachtrag trop Knoten -Textur- eh bien Knoten -ligne number- dans qui Beispielsammlung là plus unten eingefügt. [...] [...]
qui Les chiffres volonté simple aus Koordinaten et den daraus gebildeten Linien erzeugt. Ansonsten ist cela procéder avec einer Zifferntafel presque identique, seulement encore einmal quelque chose optimiert. chez diesem Beispiel montrer les numéros im espace toujours zur caméra.
So droite simple volonté qui Les chiffres konstruiert:
function vertexnumbers(mesh, size, color){
materialDigits = new THREE.LineBasicMaterial({color: color});
coordDigit = [];// Koordinaten Digit Design
coordDigit[0] = [0,0, 0,9, 6,9, 6,0, 0,0];
coordDigit[1] = [0,6, 3,9, 3,0];
coordDigit[2] = [0,9, 6,9, 6,6, 0,0, 6,0];
coordDigit[3] = [0,9, 6,9, 6,5, 3,5, 6,5, 6,0, 0,0];
coordDigit[4] = [0,9, 0,5, 6,5, 3,5, 3,6, 3,0];
coordDigit[5] = [6,9, 0,9, 0,5, 6,5,6,0, 0,0];
coordDigit[6] = [6,9, 0,9, 0,0, 6,0, 6,5, 0,5];
coordDigit[7] = [0,9, 6,9, 6,6, 0,0];
coordDigit[8] = [0,0, 0,9, 6,9, 6,5, 0,5, 6,5, 6,0, 0,0];
coordDigit[9] = [6,5, 0,5, 0,9, 6,9, 6,0, 0,0];
geometryDigit = [];
digit = [];// Datenfeld qui Les chiffres 0 jusqu'à 9 (Linien)
for( i = 0; i<10; i++){
geometryDigit[i] = new THREE.Geometry();
for( j = 0; j < coordDigit[i].length/ 2; j++){
geometryDigit[i].vertices.push(new THREE.Vector3( 0.1*size*coordDigit[i][2*j], 0.1*size*coordDigit[i][2*j+1], 0 ) );
}
digit[i] = new THREE.Line( geometryDigit[i], materialDigits);
}
avec den komplexen, par Funktionen erzeugten Körpern dauert es et avec ca.
 |
|
| |
| |
| |
|
|
HofK | qui Code ist encore im ständigen Fluss et quelque chose undurchsichtig - aussi pour mich! 
Daher encore pas vorzeigbar.
mais il y a déjà quelques belle Figuren/Körper.
cela grüne Blatt braucht encore une ordentliche Textur. en supplément bastele je justement am UV-Mapping, [...] comment on am Bild sieht. qui Texturen doit oui convenable sur qui Geometrie être assis.
par alle möglichen Funktionen gibt es une grand la quantité à verschiedenen Formen.
alors plus ! |
|
| |
| |
| |
|
|
HofK | qui Code ist chez presque 1000 Zeilen et es wird lente compliqué chez Changements pas irgendetwas cela déjà ging wieder paralysé trop poser. Besonders qui Auslagerung dans un JavaScript Bibliothèque avec Namensraum ist là pas toujours überschaubar pour mich.
quand même bewegt sich maintenant déjà quelque chose. Snapshot:
 |
|
| |
| |
| |
|
|
HofK | qui l'affaire avec den par Funktionen erzeugten komplexeren geometrischen Figuren hat sich trop einem ganzen add on pour three.js entwickelt et daher quelque chose gedauert.
cela add on habe je THREEf genannt.
je musste den anfänglich erzeugten Code komplett reorganisieren. ensuite gibt es encore une memory leak. d'abord dachte je, es liegt à meinem Script. Pour langem chercher habe je qui source trouvé. Selbst un entier simple Beispiel erzeugt den faute dans three.js. Allerdings entier lente, là seulement un einzelnes Dreieck qui la couleur wechselt, au cours de chez meinen Beispielen très viele Changements possible sommes. avec dem Task Manager peux on qui Speicheranforderung des Browsers jusqu'à zum crash beobachten: [...]
jusqu'à sur den memory leak funktioniert qui l'affaire mais droite bien. là [...] ca va zur Sandbox (fonctionne momentan seulement avec Firefox, qui anderen Browser "zicken" aussi bistrot avec den Texturen) et le einfachen Beispielen. [...]
qui Erzeugung einer Geometrie geschieht par den Aufruf qui Basisklasse pour Geometrien dans three.js et ensuite par einbinden einer Funktion THREEf.createMorphGeometry aus qui neuen js - Bibliothèque et en Ausführung avec einigen Parametern. Alle paramètre sommes optionnel, sans jeden paramètre gibt es une schlichten Zylinder. Es stehen 9 Eigenschaften et 17 Funktionen sowie un Datenfeld zur Disposition. ses signification ist dans THREEf.js kurz erklärt. Allerdings dans englischer Discours, là on trop three.js selbst sur allemande seulement très wenig findet et je mich eh bien quelque chose avec Englisch abquäle um sous [...] ou bien [...] trop three.js quelque chose pour trouver / trop fragen. Eventuell gibt es là une Solution pour cela Speicherleck.
qui folgende kurze Code erzeugt déjà un droite komplexes, sich selbst bewegendes, verformendes et qui surface wechselndes Gebilde. Dabei volonté qui einfachen "Bewegungsbefehle" de three.js pas nécessaire. vous pouvez mais zusätzlich sur geometry04 angewandt volonté et cela Gebilde en tout bewegen/ drehen.
var geometry04 = new THREE.Geometry();// --- la cousine class for building custom geometries dans THREE.js ---
geometry04.createMorphGeometry = THREEf.createMorphGeometry;// insert le methode à partir de THREEf.js
// apply le methode with some parameters
geometry04.createMorphGeometry({
height: 80,
heightSegments: 80,
rCircHeight: function ( u, v, t ) { return 1.01 + Math.cos( 25.2 * v ) * Math.sin( 0.2 * t ) },
centerX: function ( v, t ) { return 0.75*Math.sin( 9 * v + 0.2 * t)},
centerZ: function ( v, t ) { return 0.45*Math.cos( 9 * v + 0.2 * t)},
materialCover: function ( u, v, t) { return Math.floor( t ) % 20 < 5 ? 0 : 0.8 }
});
 |
|
| |
| |
| |
|
|
HofK | Mittlerweile habe je quelques Fichiers zur Optimierung gefixt. cela Speicherleck ist mais encore akut.
Um sich qui Formen merken trop peut, ist une kleine Bibliothèque dans travail.
vous ist là [...] trop erreichen sous
... basic examples / source and forme library |
|
| |
| |
| |
|
|
HofK | un Problem chez einer Javascript Bibliothèque, qui on avec anderen unbekannten Scripten courir tenir veux, ist qui Kapselung. Sonst pourrait es trop Konflikten chez Variablen et Funktionen venons.
So habe je mon Geometrie interne simple g genannt, à de toute façon langen Befehle avec g.einBeispiel = ... pas encore länger trop faire. mais var g; peux aussi dans einem Script auftauchen.
this.einBeispiel = ... hätte aussi funktioniert, ist länger et unübersichtlich.
cherchez on pour einer Solution pour cela Problem, findet on malheureusement pas viel - selbst dans Englisch. mais dans einem Forum wohin qui Frage kam, donnais es une simple Antwort: exposition dir simple à, comment qui cela dans three.js faire. voilà es parfait.
et oui c'est ca so habe je es eh bien justement gelöst, abgekupfert - klappt.
c'est doch droite kryptisch, et pour mich pas voll durchschaubar.
il y a qui Zeilen 7 jusqu'à 11 et ensuite 1127 jusqu'à 1137, qui um cela eigentliche Script gelegt volonté. entre mon zusammengefalteter Code.
 |
|
| |
| |
| |
|
|
E.T. | je suis toujours wieder fasciné sur Deinen l'ambition et comment du uns que voici toujours rüber bringst 
(musste je maintenant la fois loswerden) |
|
| |
| XProfan X3Grüße aus Sachsen... Mario  WinXP, Win7 (64 Bit),Win8(.1),Win10, Win 11, Profan 6 - X4, XPSE, und 'nen schwarzes, blinkendes Dingens, wo ich das alles reinschütte... | 25.03.2017 ▲ |
|
| |
|
|
HofK | ... merci!
Irgendwie muss on oui qui kleinen grauen Zellen dans Schwung tenir. si es ensuite encore mindestens einer avec intérêt liest, ist es voll OK.
Nebenbei habe je encore une chronologie qui l'affaire. òu es führt, ist encore pas bien sûr. voulais oui seulement la fois regarder, quoi là chez WebGL so allez.
mon CPU Simulation avec XProfan hat sich aussi seulement aus einem begrenzten Beispiel entwickelt. avec cela voulais je simple manifester, comment so un add und déplacer im Prozessor avec Bits marcher, hat sich ensuite entwickelt.
______________________________________________
afin de voyons, comment qui Standard-Geometrien de three.js avec meinen THREEf-Geometrien zusammenarbeiten, habe je qui nuage aus einem qui ersten Beispiele [...] pris et modifiziert.
Dabei zeigt sich identisches Verhalten. qui einzeln definierte Kugel wird animiert, qui zur nuage zugefügte Kugel verbleibt comment trop erwarten dans ihrer forme / la couleur zur Definitionszeit. qui längs gestreiften Kugeln sommes qui Standardkugeln, chez denen chez einer quelques Knoten dans qui animate-Funktion manipuliert volonté.
comment toujours là [...] [...] trop betrachten.
ACHTUNG! pas trop longtemps courir laisser, cela Speicherleck ist encore aktiv. Es sei car, on voudrais la fois testen comme ist, si qui Browser dans qui Knie allez.
jusqu'à maintenant gibt es encore aucun réaction sur mon Frage chez stackoverflow. là wird aussi pas allzuviel beantwortet, wobei quelques Fragen aussi très "eigen" sommes. [...] |
|
| |
| |
| |
|
|
ByteAttack | Cool. Darf on sich mais pas bekifft anschauen... trop viele bunte,frohe Farben  |
|
| |
| |
| |
|
(2.005)
Deutsch
English
Français
Español
Italia