# How to highlight a single 3d object from a model on click

**URL:** <https://discourse.threejs.org/t/how-to-highlight-a-single-3d-object-from-a-model-on-click/35379>\
**Category:** Questions\
**Tags:** materials\
**Created:** [February 27, 2022, 4:28pm UTC](https://discourse.threejs.org/t/how-to-highlight-a-single-3d-object-from-a-model-on-click/35379 "2022-02-27T16:28:19Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![matthiasstorr](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/matthiasstorr/32/24575_2.png) [@matthiasstorr](https://discourse.threejs.org/u/matthiasstorr)\
**Post date:** [February 27, 2022, 4:28pm UTC](https://discourse.threejs.org/t/how-to-highlight-a-single-3d-object-from-a-model-on-click/35379/1 "2022-02-27T16:28:19Z")

</div>

I have a roboter arm with six different parts. The model is a glb file. The names of the arms are K1 to K6.

With the help of this forum I succesfully implemented a raycaster to get the name of each part when clicking on it.

My Problem is that i want to highlight the part of the model which i last clicked but the effect gets applied to the whole model. What do i have to do to apply it only to K1 (in this case)

Grateful for every hint

```javascript
[...] 
if (intersects.length > 0) {
      if(intersects[0].object.name == 'K1' ) {
          intersects[0].object.material.wireframe = true;                   
     }
     [...]
}

```

---

<div class="post-metadata">

**Author:** ![stanis3d](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/stanis3d/32/24506_2.png) [@stanis3d](https://discourse.threejs.org/u/stanis3d)\
**Post date:** [February 28, 2022, 3:36am UTC](https://discourse.threejs.org/t/how-to-highlight-a-single-3d-object-from-a-model-on-click/35379/2 "2022-02-28T03:36:35Z")

</div>

Hi, maybe this could be helpfull:

```javascript
 if(intersects[0].object.name == 'K1' ) { 
          let mat = intersects[0].object.material.clone();
          mat.wireframe = true;
          intersects[0].object.material = mat        
     }

```

So better:

```javascript
//befor function:
var mat_main = scene.getObjectByName( 'K1').material.clone();
var mat_wire = mat_main.clone();
mat_wire.wireframe = true;

//then inside function:
 if(intersects[0].object.name == 'K1' ) { 
      if(!intersects[0].object.material.wireframe){
            intersects[0].object.material = mat_wire;
       }else{
            intersects[0].object.material = mat_main;
      }     
 }

```

---

<div class="post-metadata">

**Author:** ![matthiasstorr](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/matthiasstorr/32/24575_2.png) [@matthiasstorr](https://discourse.threejs.org/u/matthiasstorr)\
**Post date:** [February 28, 2022, 12:33pm UTC](https://discourse.threejs.org/t/how-to-highlight-a-single-3d-object-from-a-model-on-click/35379/3 "2022-02-28T12:33:41Z")

</div>

@stanis3d thank you for your reply. I try your suggestion and get back to you if it worked or not. Have a nice day!

---

<div class="post-metadata">

**Author:** ![Abish](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/abish/32/55129_2.png) [@Abish](https://discourse.threejs.org/u/Abish)\
**Post date:** [March 6, 2025, 7:30am UTC](https://discourse.threejs.org/t/how-to-highlight-a-single-3d-object-from-a-model-on-click/35379/4 "2025-03-06T07:30:45Z")

</div>

hi i have a query after adding adding outline process my scene became dark why?