百度地图的MapVGL 添加自定义模型点击交互（ThreeJS）

书接上文：上一篇写到了自定义模型的加载，这次来研究下相关的交互功能，一般来说就是鼠标点击模型，根据点击的模型返回不同的消息实现对应的交互操作，这里我就是改变了下模型的颜色。废话不多说，先上色图：

这里就是简单的修改了下颜色（原始是蓝色，点击之后变成原谅色），具体修改还是看各位看官的需求。

过程：ThreeJS给的点击获取模型信息的方式是通过发出射线，与模型碰撞，返回碰撞信息来检测是否点击到模型或者点击的是哪一个模型，按照这个思路，在MapVGL中也大概用这个思路来实现点击交互的功能。

代码：

//获取鼠标坐标然后进行处理        
var mouse = new THREE.Vector2();     
mouse.x = (event.clientPos.x / window.innerWidth) * 2 - 1;        
mouse.y = -(event.clientPos.y / window.innerHeight) * 2 + 1;

//实例化射线        
var raycaster = new THREE.Raycaster();

//从相机发射射线   
raycaster.setFromCamera(mouse,threeLayer.camera);

//进行射线检测
var intersects = []; 
raycaster.intersectObjects(group.children,true,intersects);

//检测的的数组内有对象则说明检测成功
if(intersects.length > 0)
{
     //DoSomething()
}

这里面的坑：刚开始实现的时候发现点击模型并没有返回正确的模型信息，点击其他位置，比如空白的地方居然返回了模型信息，后来排查出原因是地图的图层不是全屏，但是鼠标的坐标却是以全屏来计算的，导致计算的鼠标坐标和地图的图层对应不上，就出现上述的情况，我这里就简单粗暴把地图图层设置全屏，就能正常点击显示了。ThreeJS也有这样的问题，如果需要自适应的话需要额外判断鼠标坐标了，这里就不赘述了，资料也很多。各位看官自行百度。哈哈。