Three.js ändern Material auf Obj mit Knopf klicken

Question

Ich würde gerne in der Lage sein, von einem MeshBasicMaterial zu einem MeshLambertMaterial für ein Obj durch Klicken auf eine Schaltfläche wechseln, und scheint nicht herauszufinden, wie es geht. Gibt es einen Weg dazu, ohne 2 separate OBJ-Dateien zu haben? Ich versuche, das Material eines .obj Modells von Jeans zu wechseln.

Der folgende Code erlaubt mir, die Textur auf Knopfdruck zu ändern, aber das Material nicht zu ändern. Vielen Dank!

//start jean_1 

    blue_denim_tex = new THREE.TextureLoader().load('stuff/blue_jean.jpg'); 

    black_denim_tex = new THREE.TextureLoader().load('stuff/black_jean.jpg'); 

    blue_mat = new THREE.MeshBasicMaterial({ 

     map: blue_denim_tex, 


    }); 


    black_mat = new THREE.MeshLambertMaterial({ 

     map: black_denim_tex 


    }); 


    objLoader1 = new THREE.OBJLoader(); 

    objLoader1.setPath('stuff/'); 
    objLoader1.load('jean_1.obj', function (object) { 
    object.traverse(function(child) { 
    if (child instanceof THREE.Mesh){ 
     child.material = blue_mat; 

    } 
    }); 
    jean_1 = object; 
    jean_1.position.y= -24; 

    scene.add(jean_1); 

    }, onProgress, onError); 


//buttons 

info.innerHTML += '<input id=jean1 type="button" onclick="blue_mat.map =blue_denim_tex" value="color: blue"/>'; 
info.innerHTML += '<input id=jean2 type="button" onclick="blue_mat.map =black_denim_tex" value="color: black"/>'; 

Answer 1

Sie können zwei JavaScript-Funktionen erstellen dann das Objekt durchqueren, um die neue meterial zuweisen:

function setBlueMaterial() { 
    jean_1.traverse(function(child) { 
     if (child instanceof THREE.Mesh){ 
      child.material = blue_mat; 
     } 
     jean_1.geometry.uvsNeedUpdate = true; 
     jean_1.needsUpdate=true; 
    }); 
} 

function setBlackMaterial() { 
     jean_1.traverse(function(child) { 
      if (child instanceof THREE.Mesh){ 
       child.material = black_mat; 
      } 
      jean_1.geometry.uvsNeedUpdate = true; 
      jean_1.needsUpdate=true; 
     }); 
    }