使用Three.JS以及A*寻路算法制作自动寻路场景（三）使用Raycaster和构造器确定鼠标点击位置

本节主要内容：

1. Three.Raycaster主要用法简介
2. 利用Plane以及Ray构造器实现鼠标点击确定坐标位置
3. 判断坐标位置属于网格中哪一格，并使用小球进行标注

首先放上本节完成效果：

Three.Raycaster主要用法简介

根据官方文档，Three.Raycaster主要用来处理光线投射。光线投射主要用于物体选择、碰撞检测以及图像成像等方面。

援引官方文档中的案例：

var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();

function onMouseMove( event ) {

	// calculate mouse position in normalized device coordinates
	// (-1 to +1) for both components

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

}

function render() {

	// update the picking ray with the camera and mouse position	
	raycaster.setFromCamera( mouse, camera );	

	// calculate objects intersecting the picking ray
	var intersects = raycaster.intersectObjects( scene.children );

	for ( var i = 0; i < intersects.length; i++ ) {

		intersects[ i ].object.material.color.set( 0xff0000 );
	
	}
	
	renderer.render( scene, camera );

}

window.addEventListener( 'mousemove', onMouseMove, false );

window.requestAnimationFrame(render);

该案例效果为改变鼠标滑过的物体颜色为0xff0000，结合本文DEMO，发现此使用方法有相当的局限性，因为该选择器只能选择scene中存在的物体，并确定物体的坐标ÿ