Three.js中DragControls无法检测相交问题求助

我正尝试在Three.js应用中配置DragControls，根据官方文档这一过程本应简单直接，我的代码如下：

let dragObjects = [obj]
const dragControls = new DragControls(dragObjects, camera, renderer.domElement);

dragControls.addEventListener("hoveron", function (event) {
    console.log(event.object)
})

dragControls.addEventListener("hoveroff", function (event) {
    console.log(event.object)
})

正常情况下，这段代码应允许我拖拽obj对象，且触发hoveron和hoveroff事件时会在控制台打印obj，但目前毫无反应：对象无法拖拽，控制台也无输出，且无报错信息。

为深入调试，我将库中代码复制到本地文件，发现RayCaster从未检测到相交。

补充说明：

• 目前仅在数组中放入一个测试对象，后续会添加多个
• 对象被分配到特定图层，且该图层处于激活状态
• 我有一个与Canvas重叠的domElement用于CSS2DRenderer()，其position为absolute，pointer events设为none
• 我单独配置了RayCaster实现对象点击功能，该功能正常工作
• 若向DragControls传入错误参数（如传入scene而非camera），鼠标事件触发时控制台会出现DragControls的报错，说明该控件已加载并运行

请问可能是什么问题导致的？

1. DragControls的RayCaster未配置目标图层 #

DragControls内部的RayCaster默认只检测图层0，即使你手动激活了对象所在的图层，控件的RayCaster并不会自动同步这个设置。需要手动指定RayCaster的目标图层：

// 替换为你的对象所在的图层编号
dragControls.raycaster.layers.set(你的图层ID);

2. 自定义RayCaster与DragControls的事件冲突 #

虽然你的自定义点击功能正常，但如果自定义RayCaster的鼠标事件处理逻辑（比如修改了全局鼠标坐标、调用了event.stopPropagation()），可能会干扰DragControls的事件监听。可以暂时移除自定义RayCaster的代码，测试DragControls是否恢复正常，以此确认冲突点。

3. 对象的raycast方法异常 #

部分自定义几何体或第三方模型可能会覆盖raycast方法，如果该方法逻辑错误，会导致RayCaster无法检测到相交。可以用基础几何体（如new THREE.Mesh(new THREE.BoxGeometry(), new THREE.MeshBasicMaterial())）替换当前测试对象，验证DragControls是否能正常工作，排除对象本身的问题。

4. Canvas的事件冒泡被阻止 #

检查是否有其他全局鼠标事件处理函数调用了event.stopPropagation()或event.preventDefault()，阻止了DragControls接收鼠标事件。即使CSS2DRenderer的元素设置了pointer-events: none，Canvas本身的事件拦截也会影响控件。

5. 相机矩阵未正确更新 #

如果传入DragControls的相机matrixWorld未更新，会导致RayCaster的射线计算错误。可以在初始化控件前强制更新相机矩阵：

camera.updateMatrixWorld();
const dragControls = new DragControls(dragObjects, camera, renderer.domElement);

内容的提问来源于stack exchange，提问作者Astarno