Three.js中如何将选框矩形投影到地形网格表面？

我得说，你选片元着色器这条路走对了！相比射线逐点检测这种 brute force 方式，GPU层面的片元判断不仅效率高，还能完美让选框贴合地形的起伏表面，完全符合你的需求。

从你贴的代码来看，核心思路已经很清晰了：通过把地形表面的位置信息（vPos）传递给片元着色器，在每个地形网格的片元上直接计算它是否落在选框的范围内，这样绘制出的选框自然就和地形表面齐平了，不会再悬浮在全局XZ平面上。

你当前的核心着色器代码 #

varying vec2 vPos;
void main() {
 vec2 Ro = size * .5;
 vec2 Uo = abs( vPos - center.xz ) - Ro;
 vec3 c = mix(vec3(1.), vec3(1.,0.,0.), float(enabled && (abs(max(Uo.x,Uo.y)) < lineHalfWidth) ));
 gl_FragColor = vec4(c, float(enabled && (abs(max(Uo.x,Uo.y)) < lineHalfWidth) ));
}

针对后续优化的建议 #

1. 选框旋转匹配相机视角：你可以把相机的视图矩阵或者选框的旋转参数传递到着色器中，将vPos或者选框的中心、大小转换到相机空间下进行计算，这样选框就能始终和当前相机视角保持一致的朝向。
2. Ctrl点击添加多选区：可以在CPU端维护一个选区数组，每个选区包含中心、大小、状态等参数，然后把这个数组作为uniform变量传递给着色器，在片元着色器中遍历数组，判断当前片元是否属于任意一个选区，实现多选区叠加的效果。

内容的提问来源于stack exchange，提问作者Tom