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

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

百度地图的MapVGL 添加自定义模型点击交互(ThreeJS)_第1张图片

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

过程: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也有这样的问题,如果需要自适应的话需要额外判断鼠标坐标了,这里就不赘述了,资料也很多。各位看官自行百度。哈哈。

你可能感兴趣的:(ThreeJS)