Three.js鼠标-相机射线检测异常：误检测物体周边与相交结果重复问题咨询

让我来帮你拆解遇到的两个核心问题，以及对应的修复方案：

1. 点击对象周边区域仍检测到相交的原因 #

你碰到的这个问题主要来自两个设置疏漏：

相机近裁剪面与物体位置不匹配 #

你的相机near参数设为1，相机位置在z=1，而盒子中心在z=0，深度0.2意味着盒子的z轴范围是-0.1到0.1。相机的近裁剪面是距离相机1单位的位置（沿视线z负方向移动1单位，即z=0），所以盒子的0到0.1部分处于相机和近裁剪面之间，会被相机裁剪，但Raycaster默认的检测范围是0到无穷大，它会“看到”这部分被裁剪的物体，导致射线总能检测到盒子。

更关键的是缺少窗口大小适配和动画循环：

• 你只在初始化时调用了一次renderer.render()，如果窗口尺寸变化，渲染画布和相机的aspect比例会脱节。
• 鼠标坐标转换依赖当前窗口尺寸，但相机的aspect还是初始值，这会导致raycaster.setFromCamera计算出错误的射线方向——明明点击屏幕周边，射线却指向了盒子区域，自然会检测到相交。

2. 相交数组包含两次同一对象的原因 #

这完全是因为你给盒子材质设置了side: THREE.DoubleSide。Three.js的射线检测会遍历物体的每个面：

• 当射线进入物体正面（朝向相机的面）时，生成一条相交记录。
• 当射线离开物体背面（背离相机的面）时，因为开启了双面渲染，背面也会被检测到，所以会生成第二条记录。
  如果用默认的THREE.FrontSide，就只会返回进入时的相交记录。

修复后的完整代码 #

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="libs/three.min.js.r116.1"></script>
</head>
<body>
<div id="threejsCanvas"></div>
<script>
let scene, center, camera, renderer, raycaster;
const mouse = new THREE.Vector2();
const threejsCanvas = document.getElementById("threejsCanvas");

init3d();
animate(); // 启动动画循环，保证画面实时更新

function init3d(){
  scene = new THREE.Scene();
  scene.background = new THREE.Color(0xAAAAEE);
  center = new THREE.Vector3(0, 0, 0);
  
  // 调整相机near参数，让盒子完全处于视锥体内
  camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 10000);
  camera.position.set(center.x, center.y, center.z + 2); // 相机后移，让盒子完整显示
  camera.lookAt(center);
  
  // 改为默认FrontSide，避免同一物体出现两次相交记录；若需双面渲染，可保留DoubleSide后续过滤结果
  buttonMesh = new THREE.Mesh(
    new THREE.BoxGeometry(1, 1, 0.2), 
    new THREE.MeshBasicMaterial({color: 0x008844, wireframe: false})
  );
  buttonMesh.position.set(center.x, center.y, center.z);
  scene.add(buttonMesh);
  buttonMesh.objId = "buttonMesh";
  
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  threejsCanvas.appendChild(renderer.domElement);
  
  raycaster = new THREE.Raycaster();
  document.addEventListener('click', onMouseClick, false);
  window.addEventListener('resize', onWindowResize, false); // 监听窗口大小变化，实时适配
}

function onWindowResize() {
  // 更新相机宽高比和投影矩阵，保证射线检测坐标正确
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}

function onMouseClick(event){
  event.preventDefault();
  mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
  mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
  
  raycaster.setFromCamera(mouse, camera);
  const intersects = raycaster.intersectObjects(scene.children);
  // 若保留DoubleSide，可只取第一个结果：const closestIntersect = intersects[0];
  console.log(intersects);
}

function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
</script>
</body>
</html>

额外提示 #

• 如果必须使用DoubleSide，可以通过只取相交数组的第一个元素（intersects[0]）来获取最近的相交结果，因为射线检测结果是按距离相机由近到远排序的。
• 始终保持相机aspect与窗口宽高比同步，并调用camera.updateProjectionMatrix()，这是避免射线检测坐标偏移的核心。
• 动画循环不仅支持动态场景，还能确保窗口变化时画面实时更新，避免渲染内容与实际窗口不匹配。

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