Selecting one faceindex

Questions
,
1

Hi, im trying to select on face at a time instead of being able to select alot.

Example,

11 PM
11 PM798×834 26.9 KB

So, as when i click one of the face, the others will be “unselected”.

Right now, my code can click and change color and once i click again it will dissapear but that’s not what i want.

Thanks for the help in advance. :pray:

2

When click on a face, remember its index. On next click, compare indices. If they are equal, then no changes. If they are not equal, change the colour of the face with selected index, return the color to the face with previous index, remember the index of selected face.

Live code example would be great )

1 Like
3

I still can’t get it to work.

if ( intersects.length > 0 )
{
	//console.log("Hit @ " + toString( intersects[0].point ) );

	//test items in selected faces array
	// var test=-1; 
	// selectedFaces.forEach( function(arrayItem)
	// {
	// 	// if the faceIndex and object ID are the same between the intersect and selected faces ,
	// 	// the face index is recorded
	// 	if(intersects[0].faceIndex==arrayItem.faceIndex && intersects[0].object.id==arrayItem.object.id){
	// 		test=selectedFaces.indexOf(arrayItem);
			
	// 	}
	// });
	//console.log(selectedFaces.length);

	var val = selectedFaces.length;
	//console.log(test);

	var a = intersects[0].faceIndex;
	console.log("a is " + a);
	var b;
	//console.log("b is " + b);

	if( intersects[0].faceIndex == a){
		console.log("same");
	}
	else{
		console.log("not same");
	}
}

}

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
5

wow thanks, i will try and fit into what im doing. :heart: