threejs 3d地图射线拾取选中省份 学习笔记

threejs yekong 728℃

之前的教程中已经学过了射线拾取,threejs 鼠标交互—射线拾取 选中模型高亮,这次是在地图上进行射线拾取。

threejs 3d地图射线拾取选中省份

3d地图射线拾取选中省份实例

3d地图射线拾取选中省份实例

实现代码

/**
 * 射线投射器`Raycaster`的射线拾取选中网格模型对象函数choose()
 * 选中的网格模型变为半透明效果
 */
var chooseMesh = null;//标记鼠标拾取到的mesh
function choose(event) {
    if (chooseMesh) {
        chooseMesh.material.color.set(0x004444);//恢复原来颜色
    }
    var Sx = event.clientX; //鼠标单击位置横坐标
    var Sy = event.clientY; //鼠标单击位置纵坐标
    //屏幕坐标转WebGL标准设备坐标
    var x = (Sx / window.innerWidth) * 2 - 1; //WebGL标准设备横坐标
    var y = -(Sy / window.innerHeight) * 2 + 1; //WebGL标准设备纵坐标
    //创建一个射线投射器`Raycaster`
    var raycaster = new THREE.Raycaster();
    //通过鼠标单击位置标准设备坐标和相机参数计算射线投射器`Raycaster`的射线属性.ray
    raycaster.setFromCamera(new THREE.Vector2(x, y), camera);
    //返回.intersectObjects()参数中射线选中的网格模型对象
    // 未选中对象返回空数组[],选中一个数组1个元素,选中两个数组两个元素
    var intersects = raycaster.intersectObjects(meshGroup.children);
    console.log("射线器返回的对象", intersects);
    // console.log("射线投射器返回的对象 点point", intersects[0].point);
    // console.log("射线投射器的对象 几何体",intersects[0].object.geometry.vertices)
    // intersects.length大于0说明,说明选中了模型
    if (intersects.length > 0) {
        intersects[0].object.material.color.set(0x009999);
        chooseMesh = intersects[0].object;
    }
}

addEventListener('click', choose); // 监听窗口鼠标单击事件

最终实现效果

webGL 3D地图可视化实例

教程地址

WebGL/Three.js前端3D可视化

喜欢 (0)