Selecting one faceindex

Questions
,
4

A very rough solution can be like that:

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