ThreeJs入门39：拾取技术详解——如何通过鼠标选中物体

在ThreeJs三维场景开发中，实现鼠标与物体的交互是构建沉浸式体验的关键环节。本文将系统讲解三种主流拾取技术：射线投射法、颜色编码法和GPU拾取法，结合代码示例与性能优化策略，帮助开发者快速掌握这一核心技能。

一、拾取技术基础原理

1.1 坐标系转换

拾取技术的核心在于建立屏幕坐标与三维场景坐标的映射关系。当用户点击屏幕时，浏览器会返回鼠标的(x,y)窗口坐标，需要将其转换为ThreeJs的归一化设备坐标(NDC)：

function windowToNormalized(windowX, windowY, canvas) {
    const rect = canvas.getBoundingClientRect();
    const x = ((windowX - rect.left) / rect.width) * 2 - 1;
    const y = -((windowY - rect.top) / rect.height) * 2 + 1;
    return { x, y };
}

1.2 拾取流程

完整拾取流程包含四个关键步骤：

1. 坐标转换：将窗口坐标转为NDC坐标
2. 射线生成：通过相机和NDC坐标创建拾取射线
3. 场景检测：判断射线与物体的相交情况
4. 结果处理：根据检测结果执行相应操作

二、射线投射法详解

2.1 基本实现

射线投射法是最常用的拾取技术，通过THREE.Raycaster实现：

const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
function onMouseClick(event) {
    // 转换坐标
    const { x, y } = windowToNormalized(event.clientX, event.clientY, canvas);
    mouse.set(x, y);
    // 更新射线
    raycaster.setFromCamera(mouse, camera);
    // 计算相交
    const intersects = raycaster.intersectObjects(scene.children);
    if (intersects.length > 0) {
        console.log('选中物体:', intersects[0].object);
        // 高亮显示逻辑
    }
}

2.2 性能优化技巧

1. 层级检测：优先检测可能被点击的物体组

   const selectableObjects = scene.children.filter(obj => obj.userData.selectable);
   const intersects = raycaster.intersectObjects(selectableObjects);

2. 距离排序：对相交结果按距离排序

   intersects.sort((a, b) => a.distance - b.distance);

3. 射线精度：调整raycaster.near和raycaster.far值

三、颜色编码法实现

3.1 技术原理

颜色编码法通过渲染场景到离屏帧缓冲区，用物体ID编码颜色值实现拾取：

1. 创建离屏渲染目标
2. 为每个物体分配唯一ID并映射到颜色
3. 读取鼠标位置像素颜色获取物体ID

3.2 完整实现代码

// 创建离屏渲染目标
const pickerRenderTarget = new THREE.WebGLRenderTarget(
    window.innerWidth, 
    window.innerHeight
);
// 自定义着色器材质
const pickerMaterial = new THREE.ShaderMaterial({
    vertexShader: `
        varying vec2 vUv;
        void main() {
            vUv = uv;
            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
        }
    `,
    fragmentShader: `
        uniform vec3 objectId;
        varying vec2 vUv;
        void main() {
            gl_FragColor = vec4(objectId, 1.0);
        }
    `
});
// 拾取函数
function pickObject(x, y) {
    // 渲染到离屏目标
    renderer.setRenderTarget(pickerRenderTarget);
    // 遍历物体设置ID并渲染
    scene.traverse(obj => {
        if (obj.isMesh) {
            const id = getObjectId(obj); // 获取物体ID
            const material = obj.material;
            obj.material = pickerMaterial.clone();
            obj.material.uniforms = {
                objectId: { value: id / 255.0 }
            };
        }
    });
    renderer.render(scene, camera);
    // 读取像素
    const pixelBuffer = new Uint8Array(4);
    renderer.readRenderTargetPixels(
        pickerRenderTarget, 
        x, 
        pickerRenderTarget.height - y, 
        1, 
        1, 
        pixelBuffer
    );
    // 恢复材质
    scene.traverse(obj => {
        if (obj.isMesh && obj.originalMaterial) {
            obj.material = obj.originalMaterial;
        }
    });
    // 解析ID
    const id = pixelBuffer[0] + (pixelBuffer[1] << 8) + (pixelBuffer[2] << 16);
    return findObjectById(id); // 根据ID查找物体
}

3.3 优缺点分析

• 优点：适合复杂场景，一次渲染完成所有检测
• 缺点：需要额外内存，实现复杂度较高
• 适用场景：大型游戏、建筑可视化等需要高性能拾取的场景

四、GPU拾取法进阶

4.1 实现原理

GPU拾取法通过着色器将物体ID直接编码到深度缓冲区，利用gl_FragCoord和gl_FragColor实现高效检测：

// 顶点着色器
varying vec2 vUv;
void main() {
    vUv = uv;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
// 片段着色器
uniform int objectId;
void main() {
    gl_FragData[0] = vec4(
        float(objectId & 0xFF) / 255.0,
        float((objectId >> 8) & 0xFF) / 255.0,
        float((objectId >> 16) & 0xFF) / 255.0,
        1.0
    );
}

4.2 性能对比

技术方案	帧率影响	内存占用	实现复杂度
射线投射法	低	低	★
颜色编码法	中	高	★★★
GPU拾取法	最低	中	★★

五、实用建议与最佳实践

1. 场景复杂度选择：

   • 简单场景（<100物体）：射线投射法
   • 中等场景（100-1000物体）：优化后的射线投射+层级检测
   • 复杂场景（>1000物体）：颜色编码法或GPU拾取

2. 交互优化技巧：

   • 添加拾取光标反馈
   • 实现物体高亮效果
     ```javascript
     // 高亮材质示例
     const highlightMaterial = new THREE.MeshBasicMaterial({
     color: 0xffff00,
     transparent: true,
     opacity: 0.7
     });

function highlightObject(obj) {
if (currentHighlight) {
currentHighlight.material = currentHighlight.originalMaterial;
}
currentHighlight = obj;
obj.originalMaterial = obj.material;
obj.material = highlightMaterial;
}

3. **移动端适配**：
   - 处理触摸事件
   - 调整射线精度参数
```javascript
function handleTouch(event) {
    const touch = event.touches[0];
    const { x, y } = windowToNormalized(touch.clientX, touch.clientY, canvas);
    // 后续射线检测逻辑...
}

六、常见问题解决方案

1. 拾取不准确：

   • 检查相机投影矩阵是否更新
   • 确认物体是否在相机视锥体内
   • 调整raycaster.near值（建议>0.1）

2. 性能瓶颈：

   • 减少intersectObjects的参数数组长度
   • 对静态物体使用THREE.Octree进行空间分区
   • 实现帧率控制，避免每帧都检测

3. 透明物体处理：

   • 设置raycaster.params.Mesh.transparent = true
   • 对透明物体单独分组检测

通过系统掌握这些拾取技术，开发者可以轻松实现ThreeJs场景中的交互功能。建议从射线投射法开始实践，逐步掌握更高级的技术方案。在实际项目中，建议结合场景特点选择最适合的方案，并通过性能分析工具持续优化。