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

threejs yekong

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

效果展示

通过鼠标交互—射线拾取实现点击模型,模型高亮实现实例。

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

threejs 鼠标交互—射线拾取

动态效果

threejs版本

0.123.0

射线拾取介绍

创建Raycaster对象:

const raycaster = new THREE.Raycaster();

参数

  • origin:射线的起点,通常为 Three.js 中的 Vector3 对象,表示射线起点的坐标。
  • direction:射线的方向,通常为 Three.js 中的 Vector3 对象,表示射线的方向。
  • near:射线的起点距离相机的最近距离,通常为一个正数。
  • far:射线的起点距离相机的最远距离,通常为一个正数。

Raycaster 主要有以下几个方法:

  1. set(origin, direction):设置射线的起点和方向。
  2. setFromCamera(coords, camera):通过屏幕坐标设置射线的起点和方向。coords 为屏幕坐标,通常是鼠标点击的坐标,camera 是 Three.js 的相机对象。
  3. intersectObjects(objects, recursive):检测射线与场景中的物体是否相交,返回相交的物体数组。objects 是一个包含要检测的物体的数组,recursive 是一个布尔值,表示是否递归检测子物体,默认为 false

设置射线的原点和方向:

const origin = new THREE.Vector3(); // 射线的原点
const direction = new THREE.Vector3(); // 射线的方向

raycaster.set(origin, direction);

进行射线投射检测:

const intersects = raycaster.intersectObjects(objects);
  • objects是一个数组,包含需要进行相交测试的物体。可以是场景中的所有物体或特定的物体集合。
  • intersects是一个包含与射线相交的物体的数组。每个元素包含相交点的信息,如相交的物体、距离、交点的坐标等。

处理相交结果:

if (intersects.length > 0) {
  const firstIntersectedObject = intersects[0].object;
  // 对相交的物体进行处理
}

您可以根据需求处理相交结果,例如选择、高亮或执行特定操作等。

实际项目中运用效果

点击模型显示模型的名称

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可视化》

实例代码

项目环境基于vue3 vite js node.js 14

相关文件下载地址
此资源需支付 ¥5 后下载
支付宝购买扫右侧红包码购买更优惠,如无法下载请联系微信:17331886870
喜欢
threejs 鼠标交互—射线拾取 选中模型高亮 学习笔记