Three.js渲染至指定Div时交互事件失效问题求助

我遇到过很多开发者在把Three.js场景从全屏切换到局部Div时踩这个坑——核心问题不是事件冒泡，而是鼠标坐标转换错误和相机投影矩阵没有同步更新，导致射线检测（交互的核心逻辑）完全错位，尤其是在角落位置，这种偏移会被放大，出现异常交互。

下面是一步步的修复方案：

1. 正确绑定渲染器到目标Div #

首先确保渲染器的canvas正确挂载到你的70%宽度Div中，并且用容器的实际尺寸设置渲染器：

const container = document.getElementById('your-render-div');
const renderer = new THREE.WebGLRenderer();
container.appendChild(renderer.domElement);

// 初始化时设置尺寸，别忘了设备像素比
renderer.setSize(container.clientWidth, container.clientHeight);
renderer.setPixelRatio(window.devicePixelRatio);

2. 修复鼠标事件的坐标转换 #

Three.js的射线检测依赖标准化设备坐标（NDC），这个坐标是基于canvas的相对位置，而不是window的全局坐标。你需要把鼠标的clientX/clientY转换成canvas的相对坐标：

const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();

function handleMouseMove(event) {
  // 获取容器的边界信息
  const rect = container.getBoundingClientRect();
  
  // 计算相对容器的坐标，再转换成NDC（范围[-1,1]）
  mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
  mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
  
  // 执行射线检测
  raycaster.setFromCamera(mouse, camera);
  const intersects = raycaster.intersectObjects(scene.children);
  
  // 这里写你的交互逻辑，比如高亮选中的物体
  if (intersects.length > 0) {
    intersects[0].object.material.color.set(0xff0000);
  }
}

// 事件要绑定到容器（或canvas）上，而不是window！
container.addEventListener('mousemove', handleMouseMove);

3. 同步更新相机的aspect比例 #

当窗口 resize 或者容器尺寸变化时，相机的aspect（宽高比）必须更新，否则投影矩阵会错位：

function handleResize() {
  // 更新容器尺寸
  const width = container.clientWidth;
  const height = container.clientHeight;
  
  // 更新相机宽高比
  camera.aspect = width / height;
  camera.updateProjectionMatrix();
  
  // 更新渲染器尺寸
  renderer.setSize(width, height);
}

// 监听窗口resize事件
window.addEventListener('resize', handleResize);

4. 排查常见误区 #

• 不要直接用window.innerWidth/innerHeight替换成容器宽高后就完事，必须处理坐标转换
• 事件绑定的目标要正确：如果绑定在window上，鼠标在左侧30%面板时也会触发事件，导致错误的射线检测
• 别忘了camera.updateProjectionMatrix()：修改aspect后必须调用这个方法，否则相机的投影不会更新

这样调整后，你的交互应该就能正常工作了——射线检测会准确对应鼠标在Div内的位置，角落的异常问题也会消失。

内容的提问来源于stack exchange，提问作者João Vilaça