Three.js 中需用 Raycaster 实现鼠标点击检测：将屏幕坐标转为归一化设备坐标，调用 raycaster.setFromCamera(mouse, camera) 发射射线，再 intersectObjects 检测相交 Mesh；注意模型可见性、层级结构、坐标转换及性能优化。
Three.js 中如何用 raycaster 实现鼠标点击 3D 模型触发事件
HTML5 本身不支持 3D 建模或交互，所谓“HTML5 建模”实际是靠 Three.js、Babylon.js 等 WebGL 库在 <canvas> 上渲染模型。最常用、最可控的点击检测方式是 Raycaster —— 它从鼠标位置向场景发射一条射线，检查是否与模型几何体相交。
关键不是“监听 click”，而是把屏幕坐标转成归一化设备坐标（NDC），再投射为世界空间射线：
-
event.clientX/event.clientY需结合renderer.domElement.getBoundingClientRect()计算相对画布位置 - 必须将鼠标 x/y 映射到 [-1, 1] 范围：x = (2 * x / width) - 1，y = 1 - (2 * y / height)
-
raycaster.setFromCamera( normalizedCoords, camera )是核心调用，不能漏掉camera参数 - 检测目标必须是已添加到场景中的
Mesh，且其material.visible === true（不可见材质不会被击中）
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
<p>canvas.addEventListener('click', (event) => {
const rect = renderer.domElement.getBoundingClientRect();
mouse.x = ((event.clientX - rect.left) / rect.width) <em> 2 - 1;
mouse.y = -((event.clientY - rect.top) / rect.height) </em> 2 + 1;</p><p>raycaster.setFromCamera(mouse, camera);
const intersects = raycaster.intersectObjects(scene.children);</p><p>if (intersects.length > 0) {
console.log('点中了:', intersects[0].object);
// 可在此触发高亮、弹窗、跳转等逻辑
}
});为什么 click 事件直接绑定在 Mesh 上无效
DOM 事件机制无法穿透 <canvas> 捕获 3D 空间中的对象点击 —— Mesh 不是 DOM 元素，没有原生事件接口。常见错误包括：
- 对
mesh.addEventListener('click', ...)抱有期待（会报错或静默失败） - 只监听
document或window的 click，却没做坐标转换和射线计算 - 未更新
raycaster的相机参数（比如用了正交相机但传了透视相机） - 模型缩放/旋转后未调用
mesh.updateMatrixWorld()，导致包围盒（bounding box）过期，击中检测失效
性能优化：避免每帧都调用 intersectObjects
频繁调用 raycaster.intersectObjects()（尤其在 mousemove 中）会显著拖慢帧率。实际项目中应：
Canvas 内容工厂（网格生成→多页 PDF→SVG 精准复刻）
下载
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
立即学习“前端免费学习笔记（深入）”；
- 优先用
click或pointerdown，而非mousemove - 限制检测范围：
raycaster.intersectObjects([mesh1, mesh2])，不要传整个scene.children - 对静态模型启用
mesh.raycast = THREE.MeshRaycast（默认已启用），对动态模型确保geometry.computeBoundingBox()在变形后重新调用 - 必要时缓存
intersects[0].object.uuid，避免重复处理同一模型
GLTF 模型加载后点击无响应？检查这三点
用 GLTFLoader 加载的模型常因结构嵌套导致点击失败：
- 加载完成后的
gltf.scene是一个Group，其子对象可能是多层Group，真正可点击的Mesh往往藏在深层 —— 需递归遍历：gltf.scene.traverse(o => { if (o.isMesh) clickableMeshes.push(o); }) - 某些 GLTF 材质含
transparent: true且opacity < 1，默认不参与射线检测，需显式设置mesh.material.transparent = true并确认depthWrite: false不影响检测逻辑 - 模型单位过大（如 1 单位 = 1km）会导致
Raycaster的精度误差，建议导入前在建模软件中统一缩放到合理尺度（如 1 米 ≈ 1 unit）
交互逻辑本身不复杂，但坐标空间转换、对象可见性、模型结构层级这三处最容易卡住人。别指望“自动识别点击”，每一步映射都要手动对齐。
