ThreeJS中CSS2D标签点击检测问题：Raycaster无法识别标签怎么办？

Raycaster确实只针对ThreeJS的3D渲染对象（比如Mesh、Line这类继承自Object3D且具备射线检测能力的对象），你用CSS2DRenderer添加的标签本质是DOM元素，并不属于ThreeJS场景中的3D对象，所以Raycaster检测不到它。

下面给你几个可行的实现思路：

思路1：给对应立方体加标识，点击立方体触发标签逻辑 #

如果你的标签和立方体是一一绑定的，可以给带标签的立方体添加自定义标识，点击检测时判断是否是这个立方体，进而触发弹窗：

// 创建带标签的立方体时添加自定义数据
const labeledCube = new THREE.Mesh(geometry, material);
labeledCube.userData.isLabelTarget = true; // 加个标识
scene.add(labeledCube);

// 点击事件修改
window.addEventListener('click', event => {
    raycaster.setFromCamera(clickMouse, camera);
    const found = raycaster.intersectObjects(scene.children);
    if (found.length > 0 && found[0].object.userData.isLabelTarget) {
        alert('标签对应的立方体被点击，触发弹窗');
    }
});

思路2：直接给标签的DOM元素加点击事件 #

CSS2DObject的核心是包裹的DOM元素，你可以直接给这个DOM元素绑定点击事件，完全绕开Raycaster：

// 创建标签DOM元素
const labelDiv = document.createElement('div');
labelDiv.textContent = '我的标签';
labelDiv.style.padding = '4px 8px';
labelDiv.style.background = 'white';
labelDiv.style.cursor = 'pointer'; // 提示可点击

// 创建CSS2DObject并挂载到立方体
const label = new THREE.CSS2DObject(labelDiv);
label.position.set(0, 1.5, 0); // 放在立方体上方
labeledCube.add(label);

// 直接给DOM加点击事件
labelDiv.addEventListener('click', () => {
    alert('标签被点击了！');
});

思路3：结合射线检测与DOM坐标判断（处理遮挡场景） #

如果需要判断标签是否被3D物体遮挡，可以先通过Raycaster检测点击位置是否有遮挡物，再判断鼠标是否落在标签DOM的范围内：

window.addEventListener('click', event => {
    // 先检测3D场景中是否有物体在点击位置前方
    raycaster.setFromCamera(clickMouse, camera);
    const intersects = raycaster.intersectObjects(scene.children);
    
    // 如果没有遮挡物，再判断鼠标是否在标签DOM上
    if (intersects.length === 0) {
        // 获取标签DOM的位置和尺寸
        const labelRect = labelDiv.getBoundingClientRect();
        const mouseX = event.clientX;
        const mouseY = event.clientY;
        
        // 判断鼠标是否在标签范围内
        if (mouseX >= labelRect.left && mouseX <= labelRect.right &&
            mouseY >= labelRect.top && mouseY <= labelRect.bottom) {
            alert('标签被点击（无遮挡）');
        }
    }
});

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