Trying to apply a shader to an entire OBJ model, not the individual meshes

Questions
,
1

Okay I am very new to shaders. But I am very stuck…

I am trying to apply a shader to an imported OBJ model:

var TEXT_MATERIAL = new THREE.MeshPhongMaterial({
	color: 0xf3a5fb,
	shininess: 0,
	specular: 0xffffff,
});
var TEXT_SHADER;
TEXT_MATERIAL.onBeforeCompile = (shader) => {
	AddVertexDisplacement(shader);
	TEXT_SHADER = shader;
};

When I import the OBJ model it has many mesh children (rather than a single mesh). So I have to apply the shader to the children.

		object.traverse( function ( child ) {
			if ( child instanceof THREE.Object3D ) {
				if(child.material !== undefined){ 
					child.material = TEXT_MATERIAL;
				}
			}
		});

It works, yes. But it does not give the results I want because I would like to apply this shader to the entire OBJ, not the constituent bodies (meshes).

I tried to export the OBJ as a single mesh but had a lot of challenges with that as the bodies within the OBJ are not touching.

So is there a way to merge these meshes into a single mesh within threejs? Or is there a way to have a “global” material that would work across the entire OBJ?

Thanks x100

2

You might want to give BufferGeometryUtils.mergeBufferGeometries() a try.

2 Likes
3

It worked. You saved the day. Again!

I also found your sweet example of such technique.

1 Like
4

Update it here so the runtime error is gone: https://jsfiddle.net/f2Lommf5/16618/

The path to BufferGeometryUtils has changed.^^