threejs 鼠标交互—射线拾取 选中模型高亮 学习笔记

threejs yekong 66℃

web3D项目中,需要对模型进行操作,比如点击模型后,模型高亮,这里用到了射线投射器Raycaster

threejs 鼠标交互—射线拾取

threejs版本

0.123.0

效果展示

threejs 鼠标交互—射线拾取 选中模型高亮

实际项目中运用效果

点击模型显示模型的名称
3d可视化案例 厂房

射线拾取网格模型——三步走

  1. 坐标转化(鼠标单击的屏幕坐标转WebGL标准设备坐标)

  2. 射线生成计算(通过鼠标单击位置+相机参数计算射线值)

  3. 射线拾取计算

坐标转化

鼠标单击canvas画布,通过返回事件对象属性event.clientXevent.clientY鼠标单机位置的屏幕坐标,然后把屏幕坐标转化为WebGL标准设备坐标,WebGL标准设备坐标坐标范围[-1,1]。

  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标准设备纵坐标

射线生成计算(.setFromCamera()方法)

把鼠标单击位置坐标和相机参数作为.setFromCamera()方法的参数,计算射线投射器Raycaster的射线属性.ray值。

//创建一个射线投射器`Raycaster`
var raycaster = new THREE.Raycaster();
//通过鼠标单击位置标准设备坐标和相机参数计算射线投射器`Raycaster`的射线属性.ray
raycaster.setFromCamera(new THREE.Vector2(x, y), camera);

射线拾取计算(.intersectObjects()方法)

通过.intersectObjects()方法可以计算出来射线相交的网格模型。

//返回.intersectObjects()参数中射线选中的网格模型对象
// 未选中对象返回空数组[],选中一个数组1个元素,选中两个数组两个元素
var intersects = raycaster.intersectObjects([boxMesh, sphereMesh, cylinderMesh]);
/**
 * 射线投射器`Raycaster`的射线拾取选中网格模型对象函数choose()
 * 选中的网格模型变为半透明效果
 */
function choose(event) {
  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([boxMesh, sphereMesh, cylinderMesh]);
  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.transparent = true;
    intersects[0].object.material.opacity = 0.6;
  }
}
addEventListener('click', choose); // 监听窗口鼠标单击事件

射线拾取 选中省份

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

最终实现效果

webGL 3D地图可视化实例

教程地址

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

喜欢 (0)