web3D项目中,需要对模型进行操作,比如点击模型后,模型高亮,这里用到了射线投射器Raycaster
效果展示
通过鼠标交互—射线拾取实现点击模型,模型高亮实现实例。
动态效果
threejs版本
0.123.0
射线拾取介绍
创建Raycaster对象:
const raycaster = new THREE.Raycaster();
参数
origin
:射线的起点,通常为 Three.js 中的Vector3
对象,表示射线起点的坐标。direction
:射线的方向,通常为 Three.js 中的Vector3
对象,表示射线的方向。near
:射线的起点距离相机的最近距离,通常为一个正数。far
:射线的起点距离相机的最远距离,通常为一个正数。
Raycaster
主要有以下几个方法:
set(origin, direction)
:设置射线的起点和方向。setFromCamera(coords, camera)
:通过屏幕坐标设置射线的起点和方向。coords
为屏幕坐标,通常是鼠标点击的坐标,camera
是 Three.js 的相机对象。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;
// 对相交的物体进行处理
}
您可以根据需求处理相交结果,例如选择、高亮或执行特定操作等。
实际项目中运用效果
点击模型显示模型的名称
射线拾取网格模型——三步走
- 坐标转化(鼠标单击的屏幕坐标转WebGL标准设备坐标)
- 射线生成计算(通过鼠标单击位置+相机参数计算射线值)
- 射线拾取计算
坐标转化
鼠标单击canvas画布,通过返回事件对象属性event.clientX
和event.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); // 监听窗口鼠标单击事件
射线拾取 选中省份
最终实现效果
教程地址
实例代码
项目环境基于vue3 vite js node.js 14