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.

1 Like

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:

I have the same problem as @Shantanu_Srivastava (I need to merge an imported model into a single mesh, and I’m unsure how to merge the materials). I’ve had a look at the docs and examples, but haven’t found anything - can you provide some pointers?

Thanks!

Merging materials is only possible in very specific situations. The materials basically need to be identical, except for the ‘color’ property which could be baked into vertex colors. To merge anything else you’d need to bake textures. I’m not aware that anyone is doing general-purpose texture baking in three.js now (it’s complicated), but it’s more common in tools like Blender.

2 Likes