javascript - 在 Three.js 中更改颜色和纹理

Question

我正在尝试更改 Material 的颜色和图像，但我没有得到它，我正在使用以下代码:

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

但是没有成功。 在我有 3 种 Material 的对象中，我想更改一种 Material 的颜色并替换另一种 Material 的纹理。

Answer 1

您可以在运行时更改对象的 Material 。您需要做的就是通过指定选项创建 Material 并将其分配给对象。 例如，以下代码将创建一个具有白色和其他 properties 的“MeshStandardMaterial” 按照指定。它还将具有您已加载的纹理。将“盒子”视为应附加 Material 的对象。

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 加载纹理。 ，并在加载纹理时创建 Material 。以下代码解释了这一点。

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

您还可以更改 Material 的颜色和纹理，而无需创建新 Material ，

仅更改颜色，

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