Three.js Textur-Modell nicht ordnungsgemäß über Objekt

Question

Ich habe eine Surfbrett-Obj-Datei und ich möchte eine Textur auf die oberen und unteren Flächen anwenden, aber es teilt die Textur in der Mitte, wenn ich es über das Gesicht angewendet werden will. Auch das Material wird auf der Innenseite des Netzes aufgetragen. Hat das Problem mit dem Modell zu tun oder habe ich etwas im Code übersehen?

var loader = new THREE.OBJLoader(); 

    var texture = new THREE.Texture(); 
    var ImageLoader = new THREE.ImageLoader(); 
    ImageLoader.load("models/white.jpg", function (image) { 
     texture.image = image; 
     texture.needsUpdate = true; 
    }); 

    var custom = new THREE.Texture(); 
    var customLoader = new THREE.ImageLoader(); 
    customLoader.load("models/UV_Grid_Sm.jpg", function(image) { 
     custom.image = image; 
     custom.mapping = THREE.UVMapping; 
     custom.needsUpdate = true; 
    }); 


    loader.load("models/Hidden 5'4-19'5-2 (Holes_Patched).obj", function(object){ 
     object.traverse(function(child) { 

      if (child instanceof THREE.Mesh) { 

       if(child.name === 'Bottom') { 
        child.material = new THREE.MeshStandardMaterial({ map: custom}); 

       } 
       else if(child.name === 'Top') { 
        child.material = new THREE.MeshStandardMaterial({ map: custom}); 

       } 
       else { 
        child.material = new THREE.MeshStandardMaterial({ map: texture}); 

       } 
      } 

     }); 

download obj file here Das Objekt verfügt über zwei Gruppe mit dem Namen „Top“ aber das kann ich später ändern.

Answer 1

Sie hinzufügen müssen/set ein UV auf den Modellkoordinaten. Dies muss in 3D-Software (3DS Max zum Beispiel) getan werden.
Außerdem sollten Sie richtig abräumen/optimieren Ihr Modell von Kanten und Ecken zu entfernen, die nicht (134.000 verts ??) benötigt