THREE.js wiederholt UV-Textur mit JSONLoader

Question

Ich brauche Hilfe, damit UV-Texturen in three.js richtig gerendert werden. Ich habe ein Modell mit sich wiederholender Fliesentextur in Blender erstellt. Die Kacheltextur wird mit UV-Mapping angewendet und sieht so aus, wenn sie richtig gerendert wird: . Wenn sie jedoch mit JSONLoader von three.js geladen wird, werden die Kacheln nur so gestreckt, dass sie jedes Polygon ausfüllen, was merkwürdig ist Ergebnis wie folgt: Screenshot of render using three.js . Ich habe versucht, THREE.RepeatWrapping in meinem Code Einstellung aber nichts geändert:

bodyLoader = new THREE.JSONLoader(); 
bodyLoader.load('./starofthesea_threejs.json', function(geometry, materials) { 
    mainBodyMaterials = new THREE.MeshFaceMaterial(materials); 
    console.log(materials); 
    mainBodyMaterials.wrapS = THREE.RepeatWrapping; 
    mainBodyMaterials.wrapT = THREE.RepeatWrapping; 
    mainBodyMaterials.needsUpdate = true; 
    mainBody = new THREE.Mesh(geometry, mainBodyMaterials); 
    mainBody.traverse (function (child) { 
    if (child instanceof THREE.Mesh) { 
     child.castShadow = true; 
     child.receiveShadow = true; 
    } 
    }); 
    mainBody.scale.x = mainBody.scale.y = mainBody.scale.z = 1; 
    geometry.computeBoundingBox(); 
    geometry.computeFaceNormals(); 
    geometry.computeFlatVertexNormals(); 
    scene.add(mainBody); 

}); 

Gibt es etwas falsch in meinem Code oder Problemumgehung, um es richtig gemacht? Jede Hilfe wird sehr geschätzt.

Answer 1

Endlich habe ich das Problem selbst herausgefunden, wo sowohl das Blender-Modell als auch JS falsch konfiguriert sind. RepeatWrapping sollte auf Textur angewendet werden, aber nicht Material. Ich muss die Struktur von THREE.MeshFaceMaterial untersuchen, um das Handle für die zugrunde liegenden Texturen zu finden. Ich muß durch die Materialien zu durchlaufen alle Materialien mit Bildtexturen, um herauszufinden:

mainBodyMaterials = new THREE.MeshFaceMaterial(materials); 
for(prop in mainBodyMaterials.materials) { 
    if(mainBodyMaterials.materials[prop].map != null) { 
    mainBodyMaterials.materials[prop].map.wrapS = THREE.RepeatWrapping; 
    mainBodyMaterials.materials[prop].map.wrapT = THREE.RepeatWrapping; 
    tex.push(mainBodyMaterials.materials[prop].map.clone()); 
    tex[tex_sequence].needsUpdate = true; 
    tex_sequence++; 
    } 
} 

Nach korrekten Wraps und wrapt zu Texturen Anwendung, einer der Fliesenmaterialien korrekt erhalten gemacht, aber ‚Texture markiert für die Aktualisierung aber Bild ist undefined 'Fehler weiter werfen. Ich muss die Textur klonen, um den Fehler loszuwerden, nach einer anderen Frage: Three.js r72 - Texture marked for update but image is undefined? Da es mehrere Materialien mit sich wiederholenden Kacheln gibt, muss ich am Anfang der JS-Routine ein globales Array erstellen und die modifizierten Texturen eins schieben um eins, wenn Looping durch die Materialien:

var tex = new Array(); 
var tex_sequence = 0; 

Nachdem die JS Anrufe zur Festsetzung einer der Texturen arbeiten immer noch nicht. Ich habe vergessen, dass nur ONE UV-Steckplatz für three.js erlaubt ist. Ich muss die UVs wieder unter dem gleichen UV-Schlitz in Blender auspacken. Alles funktioniert wie ein Zauber, und ich hoffe, dass meine schmerzhafte Erfahrung denjenigen helfen kann, die durch ähnliche Probleme verrückt werden.