Three.js本身并没有提供一套完整的鼠标事件系统，开发者通常需要借助Raycaster（射线检测器）手动判断点击位置命中了哪个Mesh。而当场景中的Mesh数量膨胀到成百上千时，如何组织这些事件监听就成了一个现实的工程问题。jQuery的事件委托机制恰好可以派上用场：它在DOM层面只注册一个监听器，就能统一管理海量“逻辑对象”的事件分发。本文将详细讲解如何把jQuery事件委托与Three.js射线检测结合起来，搭建一套高性能的3D场景点击拾取方案。
一、传统方案的性能瓶颈在哪里
很多初学者的做法是为每一个需要交互的Mesh单独添加监听。由于Mesh不是DOM元素，无法直接调用addEventListener，于是常见的折中方案是：给每个Mesh在DOM层放一个透明的定位元素，或者在每一次mousemove、click事件里遍历所有Mesh做射线检测。这两种做法在对象数量较小时看不出问题，一旦对象规模上升，缺陷就暴露出来了。
第一种方案的问题在于DOM元素数量与Mesh数量同步增长，浏览器需要维护大量的Event Listener，内存占用和事件分发开销都会线性增加。第二种方案的问题更隐蔽：raycaster.intersectObjects(meshes)每次调用都要对所有几何体做三角形级别的求交运算，假设场景有2000个Mesh、每个Mesh平均3000个三角形，一次全量检测的理论计算量就是600万次三角形相交测试。如果这个检测发生在mousemove上（用于hover高亮），每秒触发几十次，主线程会被彻底压垮。
此外，事件逻辑散落在各个对象上也难以维护。比如你想统一加一层“仅当对象可见且未被禁用时才响应点击”的判断逻辑，就需要改动多处代码。这正是引入jQuery事件委托的价值所在：把分发逻辑收敛到一个入口，把检测策略做成可优化的独立模块。
二、jQuery事件委托与Raycaster结合的原理
jQuery的事件委托基于DOM事件冒泡机制：只在容器元素上调用on('click', '.item', handler)，jQuery就会在点击发生时检查事件目标是否匹配选择器，从而实现“注册一次、管理全部”。Three.js场景虽然渲染在canvas上，canvas本身是一个真实的DOM元素，因此我们可以把click监听委托到canvas的父容器上，再在回调里执行射线检测，找到命中的Mesh后手工分发事件。
整体流程可以概括为四步：第一步，把canvas坐标换算为标准化设备坐标（NDC），x和y都归一化到-1到1区间；第二步，用该坐标和相机参数构建Raycaster；第三步，调用intersectObjects求交（这里可以传入一个经过筛选的数组而不是scene.children全集）；第四步，把命中的Mesh映射为逻辑事件，通过jQuery的trigger对外发布。这样一来，任何业务代码只需要监听一个自定义事件，不必关心拾取细节。
这种架构的另一个好处是解耦。拾取模块只负责“找到你点的是谁”，业务模块只负责“点了之后做什么”。后续无论你是想换成分层拾取还是引入BVH加速，都只改拾取模块内部实现，外部接口保持不变。
三、完整代码实现
下面给出一个可直接运行的完整示例。场景中批量生成1000个立方体，点击任意一个立方体时，通过jQuery委托机制统一分发meshclick事件，命中对象变色并输出信息。
<div id="stage" style="position:relative;width:100%;height:600px;"></div>
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js"></script>
<script>
var container = document.getElementById('stage');
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, container.clientWidth / container.clientHeight, 0.1, 1000);
camera.position.set(0, 30, 60);
var renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(container.clientWidth, container.clientHeight);
container.appendChild(renderer.domElement);
// 批量生成Mesh，并用userData记录逻辑数据
var interactiveMeshes = [];
for (var i = 0; i < 1000; i++) {
var geo = new THREE.BoxGeometry(2, 2, 2);
var mat = new THREE.MeshLambertMaterial({ color: 0x66aaff });
var mesh = new THREE.Mesh(geo, mat);
mesh.position.set(
(Math.random() - 0.5) * 100,
(Math.random() - 0.5) * 50,
(Math.random() - 0.5) * 100
);
mesh.userData.id = i;
mesh.userData.name = 'cube-' + i;
scene.add(mesh);
interactiveMeshes.push(mesh);
}
var raycaster = new THREE.Raycaster();
var pointer = new THREE.Vector2();
// 核心拾取函数：canvas坐标转NDC后做射线检测
function pickMesh(clientX, clientY) {
var rect = renderer.domElement.getBoundingClientRect();
pointer.x = ((clientX - rect.left) / rect.width) * 2 - 1;
pointer.y = -((clientY - rect.top) / rect.height) * 2 + 1;
raycaster.setFromCamera(pointer, camera);
// 只检测注册过的交互对象，避免全场景遍历
var hits = raycaster.intersectObjects(interactiveMeshes, false);
return hits.length > 0 ? hits[0].object : null;
}
// jQuery事件委托：容器上只注册一次click
$(container).on('click', function (e) {
var target = pickMesh(e.clientX, e.clientY);
if (target) {
// 恢复所有对象颜色后再高亮命中对象
interactiveMeshes.forEach(function (m) { m.material.color.set(0x66aaff); });
target.material.color.set(0xff5533);
// 通过jQuery发布自定义事件，业务层只监听这一个事件
$(container).trigger('meshclick', [target.userData, target]);
}
});
// 业务层订阅示例，与拾取逻辑完全解耦
$(container).on('meshclick', function (e, data, mesh) {
console.log('点击了对象：', data.name, '，id =', data.id);
});
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
</script>这段代码的关键点有两个：一是interactiveMeshes数组只收集真正需要交互的Mesh，射线检测范围被明确收窄，装饰性的灯光、地面等对象不会参与计算；二是click事件只委托在容器上注册一次，无论Mesh数量是一千还是一万，DOM层的监听器数量始终不变。注意示例中intersectObjects的第二个参数传了false，即不递归检测子对象，这在对象没有子层级时能省去不少遍历开销。
如果你还需要hover高亮效果，可以把mousemove上的检测加上节流，例如利用requestAnimationFrame把多次mousemove合并为每帧最多一次检测：
var pendingPos = null;
$(container).on('mousemove', function (e) {
pendingPos = { x: e.clientX, y: e.clientY };
});
function hoverCheck() {
if (pendingPos) {
var target = pickMesh(pendingPos.x, pendingPos.y);
// 高亮逻辑省略，与click类似
pendingPos = null;
}
requestAnimationFrame(hoverCheck);
}
requestAnimationFrame(hoverCheck);这种做法保证射线检测频率与屏幕刷新率一致，鼠标快速划过时也不会触发多余的检测，是处理高频事件的标准手段。
四、大规模场景的进阶优化手段
当Mesh数量继续上涨到数千甚至上万时，仅靠“缩小检测数组”仍然不够，可以从以下几个方向继续优化。
第一是距离与包围球预筛。Raycaster在求交前会先做包围球（BoundingSphere）测试，我们可以更进一步：先做射线与包围盒的粗测，剔除明显不可能命中的对象，或者按照场景分区，只对相机附近区域的对象做精细检测。配合three-mesh-bvh这类库为几何体构建BVH树，可以把单次求交的复杂度从线性降到近似对数级别，这是目前社区公认最有效的加速方案。
第二是GPU拾取（颜色编码拾取）。思路是为每个Mesh分配唯一颜色，拾取时把整个场景用一份替换了材质的“编码场景”渲染到离屏缓冲区，读取鼠标位置像素颜色即可反查Mesh id。这种方式完全绕过CPU端三角形求交，无论对象多少，成本基本恒定，代价是需要维护两份渲染状态，并且要注意抗锯齿会导致颜色偏差，通常需要单独关闭MSAA来渲染拾取缓冲。
第三是业务层面的分层。如果Mesh可以按交互属性分组（例如“可点击”与“不可点击”两组），就维护多个数组，根据当前交互模式只检测对应的数组。再配合惰性检测——只有在鼠标按下到抬起的位移小于阈值时才认定为点击（而不是拖拽旋转视角），可以进一步减少无效检测次数。这些策略与jQuery委托架构完全兼容，因为拾取函数是独立模块，替换内部实现不影响外部事件接口。
五、总结
jQuery事件委托与Three.js Raycaster的组合，本质上是一种“DOM层收敛监听、渲染层集中检测”的架构：前者解决事件注册数量随对象增长的问题，后者把命中判断收敛为一次批量计算。在实践中请记住三条原则：射线检测的目标数组要尽可能小、高频事件必须节流合并、拾取逻辑要与业务逻辑解耦。在此基础上，再按需引入BVH加速或GPU拾取，即可从容应对万级Mesh规模的点击交互需求。