# \[SOLVED\] Are segments in a side selectable?

**URL:** <https://discourse.threejs.org/t/solved-are-segments-in-a-side-selectable/2042>\
**Category:** Questions\
**Tags:** materials, geometry\
**Created:** [March 5, 2018, 8:40pm UTC](https://discourse.threejs.org/t/solved-are-segments-in-a-side-selectable/2042 "2018-03-05T20:40:24Z")\
**Posts on this page:** 1\
**Showing post:** 2

<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:** [March 5, 2018, 9:36pm UTC](https://discourse.threejs.org/t/solved-are-segments-in-a-side-selectable/2042/2 "2018-03-05T21:36:59Z")

</div>

Each square (or “segment”) consists of two faces.  
Using `THREE.Raycaster()` you can get the index of a face. Having that index, you can find its neighbour.  
The rest is just to change colours of faces. There are many options, actually, of how you can change faces’ colours. The main thing is to find those faces 🙂

![Select_Segment](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/5/55738e8e4d10798ff4bf18cc9de1d5b56e7d0ebd.png)

[https://jsfiddle.net/prisoner849/hakf26hL/](https://jsfiddle.net/prisoner849/hakf26hL/)

```
var box = new THREE.Mesh(new THREE.BoxGeometry(30, 30, 30, 30, 30, 30), new THREE.MeshBasicMaterial({
  vertexColors: THREE.VertexColors
}));
scene.add(box);

var wireBox = new THREE.Mesh(new THREE.BoxGeometry(30, 30, 30, 30, 30, 30), new THREE.MeshBasicMaterial({
  color: "black",
  wireframe: true
}));
box.add(wireBox);

var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var intersects = [];
var faceIdx1 = -1, faceIdx2 = -1;
var baseColor = new THREE.Color("white");
var selectionColor = new THREE.Color("red");

window.addEventListener("mousemove", function(event) {
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
}, false);

window.addEventListener("mousedown", function(event){
  raycaster.setFromCamera(mouse, camera);
  intersects = raycaster.intersectObject(box);
  if (intersects.length === 0) return;
  
  // set previously selected faces to white
  setFaceColor(faceIdx1, baseColor);
  setFaceColor(faceIdx2, baseColor);
  
  // find the new indices of faces
  faceIdx1 = intersects[0].faceIndex;
  faceIdx2 = faceIdx1 % 2 === 0 ? faceIdx1 + 1: faceIdx1 - 1;
  
  // set newly selected faces to red
  setFaceColor(faceIdx1, selectionColor);
  setFaceColor(faceIdx2, selectionColor);
}, false)

function setFaceColor(idx, color){
  if (idx === -1) return;
  box.geometry.faces[idx].color.copy(color);
  box.geometry.colorsNeedUpdate = true;
}
```

---

_[View the full topic](https://discourse.threejs.org/t/solved-are-segments-in-a-side-selectable/2042)._