# How to identify meshes in blender when exporting to glb file and displaying on threejs?

**URL:** <https://discourse.threejs.org/t/how-to-identify-meshes-in-blender-when-exporting-to-glb-file-and-displaying-on-threejs/40240>\
**Category:** Questions\
**Tags:** click, blender-exporter, materials\
**Created:** [July 12, 2022, 7:45am UTC](https://discourse.threejs.org/t/how-to-identify-meshes-in-blender-when-exporting-to-glb-file-and-displaying-on-threejs/40240 "2022-07-12T07:45:11Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![phb](https://avatars.discourse-cdn.com/v4/letter/p/439d5e/32.png) [@phb](https://discourse.threejs.org/u/phb)\
**Post date:** [July 12, 2022, 7:45am UTC](https://discourse.threejs.org/t/how-to-identify-meshes-in-blender-when-exporting-to-glb-file-and-displaying-on-threejs/40240/1 "2022-07-12T07:45:11Z")

</div>

I would like to change the color of a mesh with each click, I manage a rack in a warehouse

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/3/b/3b408b7ef55e06b3422f15f35234a82f2e371770.png)

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [July 12, 2022, 8:33am UTC](https://discourse.threejs.org/t/how-to-identify-meshes-in-blender-when-exporting-to-glb-file-and-displaying-on-threejs/40240/2 "2022-07-12T08:33:23Z")

</div>

you have to traverse the scene and find them back via name or other characteristics:

```nohighlight
scene.getObjectByName("thing")

```

this changes drastically if you use three with react because it can express your model declaratively, your scene looks like an SVG and you can alter it as your like.

[https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/0/0/00a0f1fdb45eeaacd53c45c1c14465cc0d2bed7d.mp4](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/0/0/00a0f1fdb45eeaacd53c45c1c14465cc0d2bed7d.mp4)

for instance, this example loads a shoe model: [Re-using GLTFs - CodeSandbox](https://codesandbox.io/s/re-using-gltfs-dix1y?file=/src/Shoe.js)

it then inserts a custom material for the outer mesh. now you can re-use it while being able to have different colors on each variant:

---

<div class="post-metadata">

**Author:** ![phb](https://avatars.discourse-cdn.com/v4/letter/p/439d5e/32.png) [@phb](https://discourse.threejs.org/u/phb)\
**Post date:** [July 12, 2022, 12:48pm UTC](https://discourse.threejs.org/t/how-to-identify-meshes-in-blender-when-exporting-to-glb-file-and-displaying-on-threejs/40240/3 "2022-07-12T12:48:41Z")

</div>

> [@drcmda](#):
>
> for instance, this example loads a shoe model: [Re-using GLTFs - CodeSandbox](https://codesandbox.io/s/re-using-gltfs-dix1y?file=/src/Shoe.js)
> 
> it then inserts a custom material for the outer mesh. now you can re-use it while being able to have different colors on each variant:

Thank you for your reply. However I don’t use react but rather threejs and typescript , so do I have to use react to do this?

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [July 12, 2022, 1:09pm UTC](https://discourse.threejs.org/t/how-to-identify-meshes-in-blender-when-exporting-to-glb-file-and-displaying-on-threejs/40240/4 "2022-07-12T13:09:07Z")

</div>

as i said, traversal: scene.getObjectByName(“thing”) it’s not optimal, and it forces you to mutate the data which then makes it less re-usable, but there is no other way.

---

<div class="post-metadata">

**Author:** ![phb](https://avatars.discourse-cdn.com/v4/letter/p/439d5e/32.png) [@phb](https://discourse.threejs.org/u/phb)\
**Post date:** [July 12, 2022, 1:42pm UTC](https://discourse.threejs.org/t/how-to-identify-meshes-in-blender-when-exporting-to-glb-file-and-displaying-on-threejs/40240/5 "2022-07-12T13:42:40Z")

</div>

loader.load(  
‘models/entrepot.glb’,  
function (gltf) {  
gltf.scene.traverse(function (child) {  
if ((child as THREE.Mesh).isMesh) {  
const m = child as THREE.Mesh  
m.receiveShadow = true  
m.castShadow = true;  
(m.material as THREE.MeshStandardMaterial).flatShading = true  
m.material = new THREE.MeshStandardMaterial({color: 0xffffff \* Math.random()});  
//I can add a listener for each mesh here ??  
m.addEventListener(‘dblclick’,function(){  
console.log(“mesheName --”+m.name);  
})  
sceneMeshes.push(m)  
}  
if ((child as THREE.Light).isLight) {  
const l = child as THREE.Light  
l.castShadow = true  
l.shadow.bias = -0.003  
l.shadow.mapSize.width = 2048  
l.shadow.mapSize.height = 2048  
}  
})  
scene.add(gltf.scene)  
// sceneMeshes.push(gltf.scene)  
},  
(xhr) =\> {  
console.log((xhr.loaded / xhr.total) \* 100 + ‘% loaded’)  
},  
(error) =\> {  
console.log(error)  
}  
)

here is the code to display the gltf file, why the event listener for the doubleclick does not work?? or i can’t add a listener like this directly?? the goal is to listen to the click dynamically, if we are going to use the scene.getObjectByName(“thing”) method, we must add to all the meshes manually??

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [July 12, 2022, 3:56pm UTC](https://discourse.threejs.org/t/how-to-identify-meshes-in-blender-when-exporting-to-glb-file-and-displaying-on-threejs/40240/6 "2022-07-12T15:56:49Z")

</div>

threejs doesn’t have events, you’ll have to write it yourself using raycasting: [Threejs basic example - CodeSandbox](https://codesandbox.io/s/threejs-basic-example-kiow9)