HTML5建模怎么实现点击选中模型_模型拾取交互实现【操作】_技术教程

模型拾取（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 判定失效