[SOLVED] Are segments in a side selectable?

Questions
,
2

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 :slight_smile:

Select_Segment

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;
}
3 Likes