模型材质共享问题

参考资料：threejs中文网

threejs qq交流群：814702116

模型材质共享问题

下面给大家谈谈，Blender、Three.js模型材质共享的问题。

Three.js共享一个材质

Three.js多个网格模型Mesh共享一个材质。

// 长方体mesh1和球体mesh2共享一个材质material
const geometry = new THREE.BoxGeometry(100, 100, 100);
const material = new THREE.MeshLambertMaterial({
    color: 0x00ffff, 
    transparent:true,
    opacity:0.5,
});
const mesh = new THREE.Mesh(geometry, material); 
scene.add(mesh); 

const geometry2 = new THREE.SphereGeometry(50);
const mesh2 = new THREE.Mesh(geometry2, material); 
mesh2.position.x = 100
scene.add(mesh2); 

修改网格模型mesh2的颜色，mesh1颜色跟着更改，原因很简单，本质上都是修改的同一个材质对象的color属性。

mesh2.material.color.set(0xff0000)

克隆材质.clone()

.clone()克隆材质,材质对象执行克隆方法.clone()会返回一个新的材质对象，克隆的新材质和原来材质外观一样，但是互不影响。

const material2 = material.clone();
const mesh2 = new THREE.Mesh(geometry2, material2); 
// 这时候修改mesh2颜色，material对应颜色不受影响
mesh2.material.color.set(0xff0000)

加载Blender模型修改材质颜色

Blender创建一个模型对象，设置颜色，然后通过快捷键Shift + D复制模型对象时候，导出测试。

先通过模型name获取模型节点，然后修改颜色，这时候你发现，所有模型mesh的颜色都更改了，其实原因很简单，Blender创建模型时候共享了材质。

const loader = new GLTFLoader()
loader.load('./材质共享.glb',function(gltf){
    const mesh = gltf.scene.getObjectByName('立方体');
    mesh.material.color.set(0x00ffff);
    scene.add(gltf.scene); 
})

递归遍历，克隆材质

递归遍历所有mesh，给所有mesh创建新的对象。

gltf.scene.traverse(function(obj){
    if(obj.isMesh){
        // 材质对象执行克隆方法clone()会返回一个新的材质对象
        obj.material = obj.material.clone();
    }
})
// 这种情况下，你修改任何一栋楼材质颜色，其他楼材质颜色不受影响
const mesh = gltf.scene.getObjectByName('立方体')
mesh.material.color.set(0x00ffff)

Blender取消材质共享

Blender通过快捷键Shift + D复制模型对象时候，材质是默认共享的。

如果你想取消材质共享，可以新建一个材质覆盖原来的。

对于其它的三维建模软件，思路一样的，只是说具体操作细节不同罢了。