ändern Collor und Textur in three.js

Question

Ich versuche, die Farbe und Bild eines Materials zu ändern, aber ich bekomme es nicht, ich bin mit dem folgenden Code:

elf.material = new THREE.MeshPhongMaterial({map:THREE.ImageUtils.loadTexture('3d/caneca/e.jpg')}); 

aber es tat nicht arbeiten. Im Objekt habe ich 3 Materialien, ich wollte die Farbe eines ändern und die Textur eines anderen ersetzen.

Answer 1

Sie können das Material eines Objekts zur Laufzeit ändern. Sie müssen lediglich ein Material erstellen, indem Sie die Optionen angeben und es dem Objekt zuweisen. Zum Beispiel erzeugt der folgende Code ein 'MeshStandardMaterial' mit weißer Farbe und anderen properties wie angegeben. Es wird auch eine Textur haben, die Sie geladen haben. Betrachten Sie 'box' als das Objekt, an dem das Material befestigt werden soll.

var material = new THREE.MeshStandardMaterial({ color: 0xffffff, side: THREE.FrontSide, opacity: 0.3, transparent: true, vertexColors: THREE.FaceColors, map : <THE TEXTURE YOU HAVE LOADED> }); 

Als besserer Ansatz, können Sie die Textur mit TextureLoader, laden und ein Material erstellen, wenn die Textur geladen wird. Der folgende Code erklärt das.

var loader = new THREE.TextureLoader(); 

function onLoad(texture) { 
    var material = new THREE.MeshPhongMaterial({ map : texture, color : 0xff0000 }); 
    box.material = material; 
} 

function onProgress(xhr) { 
    console.log((xhr.loaded/xhr.total * 100) + '% loaded'); 
} 

function onError(xhr) { 
    console.error('An error happened'); 
} 

loader.load('assets/img/crate.png', onLoad, onProgress, onError); 

Sie können auch die Farbe und Textur des ohne Materials ändern ein neues Material zu schaffen,

nur die Farbe zu ändern,

box.material.color.setHex(0xff0000);// will set red color for the box 

oder die Textur zu ändern,

var loader = new THREE.TextureLoader(); 

function onLoad(texture) { 
    box.material.map = texture; 
} 

function onProgress(xhr) { 
    console.log((xhr.loaded/xhr.total * 100) + '% loaded'); 
} 

function onError(xhr) { 
    console.error('An error happened'); 
} 

loader.load('assets/img/Dice-Blue-5.png', onLoad, onProgress, onError);