Three.js Experiment 2 – Selection/Highlighting

January 9, 2014 3D graphics

For my second set of experiments using Three.js, I wanted to explore selection and highlighting of objects, as that is an important part of manipulating 3D geometry.  Using Processing, this was somewhat tricky to enable while maintaining the click/drag manipulation of the environment as well.  However, because WebGL/Three.js were made specifically for 3D applications, it is very simple.

Click the picture below to check it out!

Exp_02-02

The key to picking in Three.js is to combine the THREE.Projector andTHREE.Raycaster classes.  To do this:

  1. Initialize projector = new THREE.Projector(); when your main script starts.
  2. In your function requiring a picking vector, create a vector and transform it using .unprojectVector() into a ray.
    var vector = new THREE.Vector3( mouse.x, mouse.y, 1 );
    projector.unprojectVector( vector, camera );
    var ray = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );
  3. Use the ray.intersectObjects(); method to see which objects it intersects!

 

That’s it… very simple.  Here is an example of how it’s used to highlight faces of objects in the scene:

function checkHighlight(){
	// find intersections

	// create a Ray with origin at the mouse position
	//   and direction into the scene (camera direction)
	var vector = new THREE.Vector3( mouse.x, mouse.y, 1 );
	projector.unprojectVector( vector, camera );
	var ray = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );

	// create an array containing all objects in the scene with which the ray intersects
	var intersects = ray.intersectObjects( targetList );

	// INTERSECTED = the object in the scene currently closest to the camera 
	//		and intersected by the Ray projected from the mouse position 	

	// if there is one (or more) intersections
	if ( intersects.length > 0 )
	{	// case if mouse is not currently over an object
		if(INTERSECTED==null){
			INTERSECTED = intersects[ 0 ];
			INTERSECTED.face.color = highlightedColor;
		}
		else{	// if thse mouse is over an object
			INTERSECTED.face.color= baseColor;
			INTERSECTED.object.geometry.colorsNeedUpdate=true;
			INTERSECTED = intersects[ 0 ];
			INTERSECTED.face.color = highlightedColor;			
		}
		// upsdate mouseSphere coordinates and update colors
		mouseSphereCoords = [INTERSECTED.point.x,INTERSECTED.point.y,INTERSECTED.point.z];
		INTERSECTED.object.geometry.colorsNeedUpdate=true;

	} 
	else // there are no intersections
	{
		// restore previous intersection object (if it exists) to its original color
		if ( INTERSECTED ){
			INTERSECTED.face.color = baseColor;
			INTERSECTED.object.geometry.colorsNeedUpdate=true;
		}
		// remove previous intersection object reference
		//     by setting current intersection object to "nothing"

		INTERSECTED = null;
		mouseSphereCoords = null;

	}
}

And another example of how it’s used to select the highlight faces:

function checkSelection(){
	// find intersections

	// create a Ray with origin at the mouse position
	//   and direction into the scene (camera direction)
	var vector = new THREE.Vector3( mouse.x, mouse.y, 1 );
	projector.unprojectVector( vector, camera );
	var ray = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );

	// create an array containing all objects in the scene with which the ray intersects
	var intersects = ray.intersectObjects( targetList );

	//if an intersection is detected
	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);
			}
		});

		// if is a previously selected face, change the color back to green, otherswise change to blue
		if(test>=0){
			intersects[ 0 ].face.color=new THREE.Color( 0x44dd66 ); 
			selectedFaces.splice(test, 1);
		}
		else{
			intersects[ 0 ].face.color=new THREE.Color( 0x222288 ); 
			selectedFaces.push(intersects[0]);
		}

		intersects[ 0 ].object.geometry.colorsNeedUpdate = true;
	}
}

In this experiment, I also wanted to have an indicator appear on the object, so the user can tell where the pointer is actually landing.  The sphere shows up only when the mouse is positioned over face of a target object.  In the Highlight() function above, I write the intersection point of the nearest intersection face to a global variable.  When the mouse is not over an eligible object, it is returned to a null state.  This allows me to simply toggle the visiblity of the mouseSphere array object I initialized earlier:

function CheckMouseSphere(){
	// if the coordinates exist, make the sphere visible
	if(mouseSphereCoords != null){
		//console.log(mouseSphereCoords[0].toString()+","+mouseSphereCoords[1].toString()+","+mouseSphereCoords[2].toString());
		mouseSphere[0].position.set(mouseSphereCoords[0],mouseSphereCoords[1],mouseSphereCoords[2]);
		mouseSphere[0].visible = true;
	}
	else{ // otherwise hide the sphere
		mouseSphere[0].visible = false;
	}
}

My code is built upon the work of Lee Stemkoski as a base template for new experiments. He has an amazing collection of Three.js examples on his website: here.

This article has 3 comments

  1. Polo Swelsen

    Is it possible to selection highlight an imported 3d model? So lets say i have a human 3d model which i export with a 3d modelling software program. I import and render it with the Three.JS Library and want to select the Left upper arm of the model. Would that be possible? If so, do you have an example or even better a tutorial?
    Thanks in advance!

    1. moczys@gmail.com

      I don’t have much experience with importing models, however, this sounds totally doable. If you have a geometry object with faces, then you can use these methods. However, to highlight a particular section of the model, you will need to have the data organized such that the code knows what faces belong to which section. Then you can highlight all faces in that section. Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *