更换fbx模型颜色

经常可以看到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++;
        }

    }

于是,换色就算完成了。
但是这里面有一个缺点:

  1. 只能更改纯色的模型颜色
  2. 颜色是使用threejs支持的特殊颜色格式


    0ab18885279ae1e8769c120e7ae4702.png
bc4f8c50edb481e7c60c1108bd434b2.png

你可能感兴趣的:(更换fbx模型颜色)