Clicking on gltf models

Here is the official glTF example enhanced with basic raycasting:

https://jsfiddle.net/ct4dboym/

Instead of logging something to the console, you can of course perform an arbitrary action. Most important part is the onClick() handler which triggers the actual intersection:

function onClick( event ) {

	event.preventDefault();

	mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
	mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

	raycaster.setFromCamera( mouse, camera );

	var intersects = raycaster.intersectObjects( scene.children, true );

	if ( intersects.length > 0 ) {

		console.log( 'Intersection:', intersects[ 0 ] );

	}

}
7 Likes