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

**URL:** <https://discourse.threejs.org/t/trying-to-apply-a-shader-to-an-entire-obj-model-not-the-individual-meshes/5335>\
**Category:** Questions\
**Tags:** obj-format, shaders\
**Created:** [December 13, 2018, 1:38am UTC](https://discourse.threejs.org/t/trying-to-apply-a-shader-to-an-entire-obj-model-not-the-individual-meshes/5335 "2018-12-13T01:38:08Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![fuzzy\_wobble](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fuzzy_wobble/32/2413_2.png) [@fuzzy\_wobble](https://discourse.threejs.org/u/fuzzy_wobble)\
**Post date:** [December 13, 2018, 1:38am UTC](https://discourse.threejs.org/t/trying-to-apply-a-shader-to-an-entire-obj-model-not-the-individual-meshes/5335/1 "2018-12-13T01:38:08Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [December 13, 2018, 11:46am UTC](https://discourse.threejs.org/t/trying-to-apply-a-shader-to-an-entire-obj-model-not-the-individual-meshes/5335/2 "2018-12-13T11:46:17Z")

</div>

> [@fuzzy\_wobble](#):
>
> So is there a way to merge these meshes into a single mesh within threejs?

You might want to give [BufferGeometryUtils.mergeBufferGeometries()](https://threejs.org/docs/index.html#examples/utils/BufferGeometryUtils.mergeBufferGeometries) a try.

---

<div class="post-metadata">

**Author:** ![fuzzy\_wobble](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fuzzy_wobble/32/2413_2.png) [@fuzzy\_wobble](https://discourse.threejs.org/u/fuzzy_wobble)\
**Post date:** [December 13, 2018, 4:46pm UTC](https://discourse.threejs.org/t/trying-to-apply-a-shader-to-an-entire-obj-model-not-the-individual-meshes/5335/3 "2018-12-13T16:46:04Z")

</div>

It worked. You saved the day. Again!

I also found your [sweet example](https://jsfiddle.net/f2Lommf5/6877/) of such technique.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [December 13, 2018, 4:53pm UTC](https://discourse.threejs.org/t/trying-to-apply-a-shader-to-an-entire-obj-model-not-the-individual-meshes/5335/4 "2018-12-13T16:53:49Z")

</div>

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

The path to `BufferGeometryUtils` has changed.^^