在three.js中更改顏色和紋理

Question

我正在嘗試更改材料的顏色和圖像，但我沒有得到，我正在使用以下代碼：

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

但它沒有用。 在該對象中，我有3種材質，我想更改一種材質的顏色並替換另一種材質的紋理。

Answer 1

您可以在運行時更改對象的材質。 您需要做的就是通過指定選項創建材料並將其分配給對象。 例如，以下代碼將創建帶有白色和指定其他屬性的“ MeshStandardMaterial”。 它還將具有您已加載的紋理。 將“ 盒子 ”視為應在其上附着材料的對象。

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

作為更好的方法，可以使用TextureLoader加載紋理，並在加載紋理時創建材質。 以下代碼對此進行了說明。

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 );

您也可以更改材質的顏色和紋理，而無需創建新材質 ，

只改變顏色

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

或更改紋理，

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 );