Three.js的Raycaster（射线投射器）是一个用于检测场景中物体与射线相交的工具。它可以用于实现鼠标拾取、碰撞检测、交互式选择等功能。Raycaster通过从指定的原点（如摄像机位置）发射射线，来检测射线与场景中物体的相交情况。Raycaster射线投射在3d模型中使用实例。

下面是Raycaster的基本用法：

创建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;
  // 对相交的物体进行处理
}

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

注意事项：

• 射线的原点和方向通常与鼠标事件、触摸事件或摄像机位置相关。
• 为了使物体可被射线检测到，物体的geometry必须存在，而且物体必须添加到场景中。

除了基本用法，Raycaster还提供了其他一些功能和选项，例如：

• raycaster.precision：设置射线投射的精度。
• raycaster.firstHitOnly：仅返回第一个相交结果。
• raycaster.layers：设置射线投射的图层过滤。

Raycaster是Three.js中非常强大和常用的工具，可用于实现各种交互和碰撞检测效果。详细的使用示例和更多选项可以在Three.js的官方文档中找到。

使用实例

threejs 在3d地图中鼠标移入高亮并显示地图名称