在three.js中更改颜色和纹理

Question

I'm trying to change the color and image of a material but I'm not getting it, I'm using the following code:

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

but it did not work. In the object I have 3 materials, I wanted to change the color of one and replace the texture of another.

Answer 1

You can change the material of an object at run time. All you need to do is, create a material by specifying the options and assign it to the object. For example the following code will create a 'MeshStandardMaterial' with white color and other properties as specified. It will also have a texture which you have loaded. Consider ' box ' as the object on which the material should be attached.

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

As a better approach, you can load the texture using TextureLoader , and create a material when the texture is loaded. Following code explains that.

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

You can also change the color and texture of the material without creating a new material ,

to change only the color,

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

or to change the texture,

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