| |
| |
|
| - 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 5 - |
|
|
HofK | Gestern war lo wohl ya a spät - siehe UPDATE hay.  |
|
| |
| |
| |
|
|
HofK | Nach einigem hin y her Yo ahora una erste Testvariante online.
Nun doch con non-indexed, aber con un speziellen Trick. So funktioniert el alte Code para Geometry y BufferGeometry.
El Puffer voluntad después de el Berechnung gesondert beschrieben.
Ein Problema: So funktioniert kein smooth shading. Dafür kann Yo muy ligeramente una Explosionsdarstellung erzeugen, como sí todos Dreiecke einzeln existieren.
El technischen Feinheiten como: [...] 
Ausprobieren y Quellcode como: [...]  |
|
| |
| |
| |
|
|
HofK | BufferGeometry no bastante smooth (liso) 
Als I, con THREEf anfing, bemerkte Yo, dass mein incluso gemachter THREE.Geometry Zylinder a el Naht no liso war.
El letzten Ecken waren sin embargo "genau" en el Winkel 2 * Math.PI. Deshalb Yo entonces el letzten faces con el ersten vertices verbunden gebildet. Das funktioniert perfekt con Geometry. Mit BufferGeometry hay aber una Problema con el uv's, siehe oben.
Um mein Addon THREEf así einheitlich como posible para Geometry, BufferGeometry (indiziert, no indiziert), a gestalten, Yo nun algunos Tests gemacht. Mit THREE.CylinderGeometry, Es el Naht liso y vertexNormalHelper zeigt el Normalen oben schräg.
Wenn Yo a CylinderBufferGeometry (indiziert) wechsele, hay zwei verschiedene Normalen a el Naht. El Naht es deutlich sichtbar. El Normalen a el Oberseite son horizontal.
Im three.js Code sieht uno, dass en Función CylinderGeometry (.. después de fromBufferGeometry (.. this.mergeVertices () con un epsilon de 0,0001 ausgeführt se, d.h. vertices el muy dicht zusammenliegen voluntad vereinigt y el faces neu determinado.
Dies bedeutet aber, dass Geometry y BufferGeometry no identisch son.
Yo debería BufferGeometry nehmen, porque lo effizienter es. Aber nun Yo una Naht. Das zusammenführen de vertices erfordert auch Ressourcen. Mi aktuelle Método (no indiziert) el Arbeit con otro Arrays, entonces Puffer escribir es auch no muy effizient. Mi derzeitige no indizierte BufferGeometry es siempre flatShaded .
Yo bin ahora bastante unsicher, Yo lo más angehen se. 
Zu viele widersprüchliche Dinge, el lo abzuwägen gilt. Und en Arbeit voluntad todavía weitere a Tage treten - como bin Yo bastante sicher. Zwischenzeitlich Yo algunos Varianten a THREEf teilweise producido, en a sehen, qué überhaupt praktikabel/ überschaubar es.
siehe [...]
. |
|
| |
| |
| |
|
|
Michael
W. | | Können Usted como el Hersteller de THREE no más helfen? Denen debería el doch auch ya aufgefallen ser... |
|
| |
| |
| |
|
|
HofK | Lo son sicher genügend Beispiele, wo no smooth ser muss.
So Yo veces el bewegte Spiralfeder algo "aufgewertet" y el Ejemplo en Codepen eingestellt. [...]
Dort es THREEf al Anfang des js-Bereiches. Danach kommt el kurze Beispielcode.
Zwei Schnappschüsse:
Natürlich puede ser auch incluso " en el Sandkasten budeln" : [...]
El Parámetro / Características puede ser bequem kopieren:
// BufferGeometry
var geometry = new THREE.BufferGeometry();
geometry.createMorphGeometry = THREEf.createMorphGeometry;// insert the methode from THREEf
//apply the methode with some parámetros
geometry.createMorphGeometry({
radius: 2,
height: 160,
radiusSegments: 12,
heightSegments: 160,
waffled: true,
waffleDeep: function ( u, v, t ) { volver 6 * Math.sin(0.4*t) },
rCircHeight: function ( u, v, t ) { volver 3 * ( 1.6 + Math.sin( 24 * Math.PI * v + 0.4 * t ) ) },
centerX: function ( v, t ) { volver 0.5 * Math.sin( 10 * ( Math.PI * v + Math.sin(0.4 * t))) },
centerY: function ( v, t ) { volver v * ( v + 0.4 * ( 1 + Math.sin( 0.4 * t ) ) ) },
centerZ: function ( v, t ) { volver 0.5 * Math.cos( 10 * ( Math.PI * v + Math.sin(0.4 * t))) },
moveX: function ( u, v, t ) { volver 80 * v * Math.sin( 2 * Math.sin(t) * v) },
materialCover: function ( u, v, t ) { volver Math.sin( 0.4 *t ) < 0 ? 0.7 : 0.2 }
});
// mesh
var mesh = new THREE.Mesh( geometry, materials );// multi material array (since three.js r85)
scene.add( mesh );
|
|
| |
| |
| |
|
|
HofK | Michael W. (15.05.2017)
Können Usted como el Hersteller de THREE no más helfen? Denen debería el doch auch ya aufgefallen ser...
El Biblioteca three.js es sí aún en stetigen Wandel, siehe el letzte Änderung beim Multi-Material, el gerade hereinkam, como Yo mein Addon online bringen quería.
El Sache incluso es algo schwierig, porque se como gewisse Sachen inhaltlich gegenseitig en el Weg son, z.B. Estructuras, optimieren después de Ressourcen, Tiempo usw.
El "Hersteller" son una Open Source Comunidad. Das Repository three.js es de mrdoob.
Como bin Yo sí "dran" siehe [...]  |
|
| |
| |
| |
|
|
HofK | Posesiones nun gefunden, como Naht en CylinderBufferGeometry verschwindet.
Tuve el Befehl
geometry.computeVertexNormals();
benutzt. Streicht uno ihn, bekommt uno a el Naht sólo una Normale.
Es eben no bastante así simplemente, el "inneren" Code de three.js voll a überblicken.
El Normalen oben son aber hier siempre todavía waagerecht.
Also no verzagen y weitere Varianten testen. |
|
| |
| |
| |
|
|
RudiB. | Ist toll qué Usted Usted como alles erabeitest y aquí postest, es ya Gigantisch qué como alles WEB-basiert alles hacer kann.
Hab veces antes de zehn Jahren veces con 3D-MAX Studio rum experemtiert, aber qué ahora ya en el WEB-Ebene va....na ¡Hola. Mach más así... |
|
| |
| |
| |
|
|
HofK | RudiB. (16.05.2017)
... es ya Gigantisch qué como alles WEB-basiert alles hacer kann.
Hab veces antes de zehn Jahren veces con 3D-MAX Studio rum experemtiert, aber qué ahora ya en el WEB-Ebene va....na ¡Hola. Mach más así...
Was antes fast 30 Jahren en mi ATARI ST ya así ging, war seinerzeit auch gigantisch. Viele seriöse Fachleute hielten damals Grafik y Farbe todavía para unnütze Spielerei y no geeignet para Anwendungen en el Wirtschaft. Der augenschonende Green- entonces Bernstein-Monitor war angesagt.
Posesiones damals una Malprogramm para mi Niños (y mich) programmiert, por GFA-Basic podría uno auch muy systemnah trabajo. So wurde el Grafik en el Hintergrund en el Speicher aufgebaut y por Umschaltung el Grafikadresse schlagartig en el Bildschirm gebracht.
Heute es mehr una Cuestión de schleppenden Standardisierung / Desarrollo o. el "Extrawürste" el Navegador. Ein Navegador es auch "nur" una Programa y podría theoretisch el volle verfügbare Systemleistung ausschöpfen.
--------------------------
Zu THREEf Yo algunos Tests gemacht y bastele nun a el Erweiterung en non-indexed BufferGeometry. Aunque no a el en el Test ya laufenden ineffektiven "nur flat shading" Variante - siehe Link más oben.
Wenn en non-indexed todos Dreiecke einzeln existieren, ergibt el scharfe Kanten, auch si la Ecken y Kanten aufeinander mentira. Lo son hier sólo Vertex-Normalen - el son identisch el Senkrechten para Deieck y igual. Liegen nun el Ecken übereinander, erscheint lo así, como si el Ecke (vertex) viele Normalen hätte.
Berechnet uno nun el Mittelwert dieser Normalen y ersetzt el Normalen el Ecke, así hay optisch sólo una Normale (todos mentira zusammen). El Normalen son aber ausschlaggebend beim rendern y así entsteht smooth shading. Hier en testweisen Berechnung para sólo una Ecke ya deutlich.
El non-indexed Variante ha el Vorteil, dass uno auch veces Dreiecke "ausscheren" dejar kann. El einzelne Normale es bien a erkennen. Auch el uv-Mapping es machbar.
El Indexrechnungen erfordern algo "Aufmerksamkeit", como klappt no siempre igual con el besten Variante.
var positions = new Float32Array( faceCount * 9 );
var uvs = new Float32Array( faceCount * 6 );
var vertexPositions = [ [] ];
...
for ( var j = 0; j < rss; j ++ ) {
for ( var i = 0; i < hss; i ++ ) {
vIdx = hvc * j + i; // vertex index
for ( p = 0; p < vertexPositions[ vIdx ].length; p ++ ) {
uvs[ vertexPositions[ vIdx ][ p ] / 3 * 2 ] = g.scaleCircAngle( j / rs );
uvs[ vertexPositions[ vIdx ][ p ] / 3 * 2 + 1 ] = g.scaleHeight( i / hs );
}
}
}
...
g.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
g.addAttribute( 'uv', new THREE.BufferAttribute( uvs, 2 ) );
Auf cada Fall una schöne Schleifenschachtelung. Eventuell funktioniert lo así, bin todavía al testen. Das Schachtelfeld vertexPositions se vorher gefüllt. Jedes Teilfeld enthält a una Vertex el Indizes el Positionen el entsprechenden Ecken el Dreiecke. Das son de una a a acht Stück. Hier sólo una Auszug de el Schleifen.
vIdx = hvc * j + i; // vertex index
fLeft = 2 * ( ( j - 1 ) * hs + i ); // face indices left
fRight = 2 * ( j * hs + i ); // face indices right
p = 0; // current position
if ( j > 0 ) {
if ( i > 0 ) {
vertexPositions[ vIdx ][ p ] = ( fLeft - 2 ) * 9 + 6;
p ++;
}
if ( i > 0 ) {
vertexPositions[ vIdx ][ p ] = ( fLeft - 1 ) * 9 + 3;
p ++;
}
...
Als Konzentrationsübung es así algo muy empfehlenswert.  |
|
| |
| |
| |
|
|
HofK | El todo Indexrechnerei es doch bastante schön aufwändig y anstrengend
y manch una Leser empfindet lo sicher auch para  oder como
 .
Deshalb para Ausgleich y no sólo para Principiante veces algo hübscheres.
Schaut uno en codepen.io [...] findet uno en Búsqueda después de three.js y "Newest First" viele belanglose Beispiele. Jeder kann simplemente veces probieren, y así es el bastante normal. Dann hay se wiederholende interessantere Beispiele. Hier haben mehrere Nutzer una Tutorial kopiert y así herumexperimentiert.
Den "Aviator" hatte auch Yo vorher ya angesehen, él findet se öfter. In einfachem Inglés (verstehe incluso Yo) es una schönes einführendes Tutorial. [...]
Anfang April fielen me entonces interessant gestaltete Pens en. Sie trabajo con elementaren geometrischen Figuren, son übersichtlich y "sauber" con neueren Features de JavaScript en fortgeschrittenem Anfängerniveau programmiert. Kein Wunder, dass ellos ya viele Betrachtungen hatten.
El Autorin es una bastante junge Dame, el Scripte eignen se sicher bien para una schrittweisen Einstieg en JavaScript/three.js
Liza Kobrazova
@elliepooh [...] [...]
planet lollipop 26.03.2017 [...]
Saturn 26.03.2017 [...]
watermelon rain 28.03.2017 [...]
chameleon 03.04.2017 [...]
Cute jumping sheep 08.04.2017 [...]
Dino skater 13.04.2017 [...]
night fireflies 11.05.2017 [...]
29.05.2018 - Leider son el Links no mehr aktuell!
--------------------------------------------------------
Zwischenzeitlich Yo algunos Fehler en meiner Rechnerei fabriziert. Aber algunos su haben auch interessante Ergebnisse - tal vez puede ser lo todavía algo hacer.
Como stimmt el uv-mapping no y para Ende fällt lo en el Mittelpunkt zusammen.
Stellenweise Es el uv-map erkennbar, aber bastante schön schiefe Spitzen.
El uv-map es ok, el Spitzen son torcido.
Como kommt el Concepto, später eventuell una Función para el Ausrichtung el Waffelspitzen hinzuzunehmen.
Aber sólo una vez más con el Indizes rumwursteln. |
|
| |
| |
| |
|
|
HofK |  Das ha se ahora bastante schööööön gezooooogen.
Aber nun es grundlegend geschafft. Lo war sólo como beim Stricken. Wenn uno como sólo después de geraumer Tiempo merkt, dass algo en el Muster al Anfang no stimmt, puede ser el Kunststrickwerk otra vez aufräufeln y neu anfangen.
Desde que no fertige Mustervorlage hatte, durfte Yo mehrmals con el Code  . Und el Frühlingswetter erfordert auch todavía mehr otro Aktivitäten  como sólo Computer quälen.
Bajo [...] puede ser vorab ya veces testen. Erst si todavía algunos Code-Optimierungen y weitere Tests absolviert son, voluntad Yo el Sache oficialmente en GitHub hochladen y en [...] puesto. Wer also Fehler findet - gern informe.
Wählt uno Geometry oder aber BufferGeometry, debería el Ergebnis siempre identisch ser. Der Diferencia se sí sólo en el unterschiedlichen internen Umsetzung mentira. Dabei debería BufferGeometry effizienter ser. In el Programación es dafür weeeeesentlich komplizierter - besonders en create(). Das puede ser muy schön vergleichen, como el Blöcke
function create() {
function morphVertices( time ) {
siempre aufeinanderfolgend en el Code posición.
Durch el wesentlich diferente interne Systematik en Geometry y BufferGeometry (non indexed) musste Yo zwei vorher getrennte Características a uno create-Función zusammenführen.
El Anzeige el Knotennummern va auch de diesem Grund momentan sólo en Geometry, como intern vertex de Geometry benutzt se. Für BufferGeometry muss Yo esta Helfer auch todavía neu programa. |
|
| |
| |
| |
|
|
HofK |  Vorsicht Falle!
... y yo falle natürlich darauf rein!
Zum Ende hin Yo "schnell" el Zuordnung des Multimaterials de Geometry a BufferGeometry übernommen.
El Berechnung es sí identisch y yo habe simplemente locker en él los kopiert y z.B.
if ( g.fixedMaterial[ hs - ( i + 1 ) ][ 2 * j ] !== "." ) {
g.faces[ 2 * hs * j + 2 * i + 1 ].materialIndex = g.fixedMaterial[ hs - ( i + 1 ) ][ 2 * j ]; // overwrite by array
}
por
if ( g.fixedMaterial[ hs - ( i + 1 ) ][ 2 * j ] !== "." ) {
g.addGroup( ( 2 * hs * j + 2 * i + 1 ) * 3, 3, g.fixedMaterial[ hs - ( i + 1 ) ][ 2 * j ] ); // overwrite by array
}
ersetzt.
Was Yo übersehen habe? Im Kommentar es a dieser Punto deutlich // overwrite ... !
En Geometry funktioniert el, porque beim face-Index el Valor tatsächlich überschrieben se. En BufferGeometry es aber una addGroup utilizarse y cómo add ya andeutet, se algo hinzugefügt. Schaut uno en el Quellcode de three.js en BufferGeometry después de, findet se hay entonces auch una push.
Deshalb hay momentan, si uno
materialCover: function( ... ,
materialBottom: function ( ... ,
materialTop: function ( ...
benutzt, una no korrekte Anzeige.
Also todavía Arbeit. 
_________________________________________________
- hecho -
UPDATE: 13. Juni - neue Variante, siehe más unten! |
|
| |
| |
| |
|
(1.089)
Deutsch
English
Français
Español
Italia