# Selecting one faceindex

**URL:** https://discourse.threejs.org/t/selecting-one-faceindex/1586
**Category:** Questions
**Tags:** loaders, geometry
**Created:** [January 9, 2018, 1:00pm UTC](https://discourse.threejs.org/t/selecting-one-faceindex/1586 "2018-01-09T13:00:59Z")
**Posts on this page:** 1
**Showing post:** 4

<div class="post-metadata">

### Author: ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)
#### Post date: [January 10, 2018, 7:11am UTC](https://discourse.threejs.org/t/selecting-one-faceindex/1586/4 "2018-01-10T07:11:47Z")

</div>

A very rough solution can be like that:

[https://jsfiddle.net/prisoner849/8jubLsy7/](https://jsfiddle.net/prisoner849/8jubLsy7/)

```
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var intersects;
var prevIndex = -1;
var prevColor = new THREE.Color();

document.addEventListener("mousedown", onMouseDown, false);
function onMouseDown(event){

  mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
  mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
  
  raycaster.setFromCamera(mouse, camera);
  intersects = raycaster.intersectObject(mesh);
  if (intersects.length == 0) return;
  if (intersects[0].faceIndex !== prevIndex){
    if (prevIndex !== -1) {intersects[0].object.geometry.faces[prevIndex].color.copy(prevColor);}
    prevColor.copy(intersects[0].face.color);
    prevIndex = intersects[0].faceIndex;
    intersects[0].face.color.setHex(0xff0000);
    intersects[0].object.geometry.colorsNeedUpdate = true;
  }
}
```

---

_[View the full topic](https://discourse.threejs.org/t/selecting-one-faceindex/1586)._