模型拾取（Model Picking）是在HTML5三维场景中通过raycasting实现点击选中模型的技术：从鼠标位置向场景发射射线，检测与THREE.Mesh的相交，依赖three.js的Raycaster类，需归一化坐标、确保对象可见且几何体法向量完备，并注意相机、模型状态及性能优化。
什么是模型拾取（Model Picking）？
在 HTML5 三维场景中，“点击选中模型”本质是 raycasting（射线投射）：从鼠标位置向场景发射一条射线，检测它与哪些 THREE.Mesh 相交。这不是 HTML5 自带能力，而是依赖 WebGL 渲染库（如 three.js）实现的交互逻辑。
three.js 中用 Raycaster 实现点击拾取
Raycaster 是 three.js 提供的核心工具类，必须配合鼠标坐标、相机和渲染器的 domElement 尺寸使用。常见错误是直接用 event.clientX/Y 而没做归一化转换。
- 鼠标屏幕坐标需转为标准化设备坐标（NDC），范围是
(-1, 1) - 必须确保被拾取的对象设置了
raycast可见性（mesh.visible = true且mesh.material.transparent不影响，但mesh.material.opacity = 0会失效） - 拾取结果按距离排序，
intersects[0]才是最近的命中对象
const raycaster = new THREE.Raycaster(); const mouse = new THREE.Vector2();function onPointerDown(event) { // 归一化鼠标坐标 mouse.x = (event.clientX / window.innerWidth) 2 - 1; mouse.y = -(event.clientY / window.innerHeight) 2 + 1;
// 更新射线 raycaster.setFromCamera(mouse, camera);
// 拾取所有匹配的 mesh（假设 models 是一个包含可选中模型的数组） const intersects = raycaster.intersectObjects(models);
if (intersects.length > 0) { const selected = intersects[0].object; console.log('选中模型:', selected); // 例如高亮：selected.material.emissive.set(0xff0000); } }
window.addEventListener('pointerdown', onPointerDown);
为什么点击没反应？几个高频漏点
拾取失败往往不是代码逻辑错，而是环境或状态没对齐：
立即学习“前端免费学习笔记（深入）”；
-
camera没有加入场景，或未正确更新（比如用了OrthographicCamera却没调updateProjectionMatrix()） - 模型的
geometry没有法向量（geometry.computeVertexNormals()缺失），某些材质下可能导致射线计算异常 - 事件监听绑定在
canvas外层容器，但event.target不是渲染画布，导致坐标系错位 - 模型缩放极大或极小（如
scale.set(1e6, 1e6, 1e6)），浮点精度丢失，Raycaster判定失效
性能注意：频繁拾取要节流或限定目标
每次点击都调 raycaster.intersectObjects() 没问题，但如果用于拖拽式框选、悬停预览等高频场景，直接传入全量模型数组会明显卡顿。
- 只传入可能被交互的子集（例如加个
pickable: true标记属性，过滤后再传） - 避免在
requestAnimationFrame里持续运行拾取；点击类交互用pointerdown或click即可 - 若模型含大量三角面（如数百万面的 CAD 模型），考虑用
Octree或three-mesh-bvh加速相交检测
最常被忽略的是：拾取前没检查 models 数组是否为空或含 null 对象——这会导致 intersectObjects 报 Cannot read property 'matrixWorld' of null 错误。
