经常可以看到3d中的模型不停地换肤，具体怎么做的不知道，但绝对不是简单的重新loading一个新的模型。以下目前使用的方法——
function addFbxObj() {
var loader = new THREE.FBXLoader();
loader.load('assets/obj/bmw01.fbx', function(object) {
// 一个fbx模型
carFbx = object;
console.log(carFbx)
carFbx.scale.multiplyScalar(0.1);
// 定义一种颜色
var mainColor = {
r: 1,
g: 0.0784313753247261,
b: 0.6196078658103943
};
// 遍历它的素材，取出模型中颜色为maincolor的所有元素，并存放起来
// 存放到carPaintArr
for(var i = 0; i < carFbx.children.length; i++) {
if(Array.isArray(carFbx.children[i].material)) {
carFbx.children[i].material.map(function(item) {
if(item.color.r == mainColor.r && item.color.g == mainColor.g && item.color.b == mainColor.b) {
carPaintArr.push([i, carFbx.children[i].name, item.name])
} else {
//console.log(item.color.r)
}
})
} else {
var item = carFbx.children[i].material;
if(item.color.r == mainColor.r && item.color.g == mainColor.g && item.color.b == mainColor.b) {
carPaintArr.push([i, carFbx.children[i].name]);
}
//console.log(carFbx.children[i].material.color.r)
}
}
scene.add(carFbx);
});
}
能拿到，就能更改
for(var i = 0; i < carFbx.children.length; i++) {
if(!!carPaintArr[index] && i == carPaintArr[index][0]) {
// 从这里得到所有的修改列表
var item = carPaintArr[index];
var changeNumber = item[0];
if(!item[2]) {
carFbx.children[changeNumber].material.color.r = trueColor.r;
carFbx.children[changeNumber].material.color.g = trueColor.g;
carFbx.children[changeNumber].material.color.b = trueColor.b;
} else {
var element = carFbx.children[changeNumber].material;
for(var j = 0; j < element.length; j++) {
if(element[j].name == item[2]) {
element[j].color.r = trueColor.r;
element[j].color.g = trueColor.g;
element[j].color.b = trueColor.b;
}
}
}
index++;
}
}
于是，换色就算完成了。
但是这里面有一个缺点：
- 只能更改纯色的模型颜色
-
颜色是使用threejs支持的特殊颜色格式
0ab18885279ae1e8769c120e7ae4702.png
bc4f8c50edb481e7c60c1108bd434b2.png
