Raycaster光线投射

Raycaster光线投射

3D虚拟工厂在线体验

描述

光线投射Raycaster，用于进行raycasting（光线投射）。 光线投射用于进行鼠标拾取（在三维空间中计算出鼠标移过了什么物体）。

构造器

Raycaster( origin : Vector3, direction : Vector3, near : Float, far : Float )

参数	描述
origin	光线投射的原点向量
direction	向射线提供方向的方向向量，应当被标准化
near	返回的所有结果比near远。near不能为负值，其默认值为0
far	返回的所有结果都比far近。far不能小于near，其默认值为Infinity（正无穷）

这将创建一个新的raycaster对象。

属性

属性	类型	描述
.far	Float	raycaster的远距离因数（投射远点）。这个值表明哪些对象可以基于该距离而被raycaster所丢弃。这个值不应当为负，并且应当比near属性大
.near	Float	raycaster的近距离因数（投射近点）。这个值表明哪些对象可以基于该距离而被raycaster所丢弃。这个值不应当为负，并且应当比far属性小
.camera	Camera	当对依赖于视图的对象（如Sprites等广告牌对象）进行光线投射时使用的相机。可以手动设置，或在调用"setFromCamera"时设置。默认为null
.layers	Layers	用于在执行相交测试时有选择地忽略3D对象。raycaster.layers.set( 1 );object.layers.enable( 1 );
.params	Object	具有以下属性的对象：{ Mesh: {}, Line: { threshold: 1 }, LOD: {}, Points: { threshold: 1 }, Sprite: {} }。其中threshold是光线投射与对象相交时的精度，以世界单位为单位
.ray	Ray	用于进行光线投射的Ray（射线）

方法

函数名	参数	描述	返回值	说明
.set	origin : Vector3	光线投射的原点向量	undefined	使用新的原点和方向更新射线
	direction : Vector3	标准化方向向量
.setFromCamera	coords : Vector2	标准化设备坐标中的鼠标二维坐标（X/Y应在-1到1之间）	undefined	根据相机和屏幕坐标更新射线
	camera : Camera	射线来源的摄像机
.setFromXRController	controller : WebXRController	要复制位置和方向的WebXR控制器	this	从XR控制器更新射线
.intersectObject	object : Object3D	要检测相交的3D对象	Array<Intersection>	检测射线与单个对象的相交情况
	recursive : Boolean	是否检测所有后代（默认true）		返回相交结果数组，按距离排序
	optionalTarget : Array	（可选）目标数组容器
.intersectObjects	objects : Array<Object3D>	要检测的3D对象数组	Array<Intersection>	检测射线与多个对象的相交情况
	recursive : Boolean	是否检测所有后代（默认true）		返回相交结果数组，按距离排序
	optionalTarget : Array	（可选）目标数组容器

Intersection 类型定义：

interface Intersection {
  distance: number;        // 射线起点到交点的距离
  point: Vector3;          // 交点世界坐标
  face: Face3 | null;      // 相交的三角面对象（可能为null）
  faceIndex: number;       // 相交面的索引号
  object: Object3D;        // 被相交的3D对象
  uv: Vector2;             // 交点的UV纹理坐标
  uv1?: Vector2;           // （可选）交点的第二套UV坐标
  normal: Vector3;         // 交点处的插值法向量
  instanceId?: number;     // （可选）InstancedMesh实例的ID
}

I说明：

1. Three.js 通过多态机制（不同对象实现自己的 raycast）实现灵活的相交检测。Raycaster 不会直接计算相交，而是调用每个物体自己的 raycast 方法。不同几何体类型（Mesh/Line/Points）有各自不同的相交检测实现。Mesh 会检测三角面相交，Line 会检测线段邻近点，Points 会检测点云中的点，它们的相交计算逻辑和阈值判断都不同。
2. 默认情况下，Three.js 只检测射线从正面（法线朝向射线原点的一面）穿过网格面的情况。如果射线从背面（法线背向的一面）穿过，在材质中设置 side: THREE.DoubleSide 可启用双面检测。

代码

const raycaster = new THREE.Raycaster();
const pointer = new THREE.Vector2();
function onPointerMove( event ) {
	// 将鼠标位置归一化为设备坐标。x 和 y 方向的取值范围是 (-1 to +1)
	pointer.x = ( event.clientX / window.innerWidth ) * 2 - 1;
	pointer.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
}
function render() {
	// 通过摄像机和鼠标位置更新射线
	raycaster.setFromCamera( pointer, camera );
	// 计算物体和射线的焦点
	const intersects = raycaster.intersectObjects( scene.children );
	for ( let i = 0; i < intersects.length; i ++ ) {
		intersects[ i ].object.material.color.set( 0xff0000 );
	}
	renderer.render( scene, camera );
}
window.addEventListener( 'pointermove', onPointerMove );
window.requestAnimationFrame(render);