How to merge multiple materials into one material?


I have an OBJ model which gets loaded as a Group object and I want to drag the OBJ with DragControls which requires a Mesh Object. So I am converting it into a single mesh by using BufferGeometryUtils.mergeBufferGeometries and then create a new mesh with the resultant geometry and a list of materials. But in the scene, it appears as an invisible object - but when I add only one material from the materials list, I am able to see the render but with partial-material mapping.

Here is what I am doing:

    var geometryArray = [ geo1, geo2 ]
    var materials = [ material1, material2 ]
    var resultGeo = BufferGeometryUtils.mergeBufferGeometries( geometryArray, false )
    var resultMesh = new THREE.Mesh( resultGeo, materials ) // when added to scene, invisible object gets added
    // if I add only one material, partial-material shows up in the render
    var resultMesh = new THREE.Mesh( resultGeo, materials[0] )

I want to know if there are any existing mergeMaterials API like the way we have for geometries? If not, how should I go about it?

One important point, I don’t want to create a Group object as I have to drag that object and I don’t think Group objects can be dragged with DragControls.



Hey @Shantanu_Srivastava,

I think you can learn a lot of useful information related to your question by reading :open_book: material documentation.

I would recommend studying :woman_teacher: examples and reading the source code for the ones that you find relevant.

best of luck! :dancing_women: