17370845950

模型拾取（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 错误。