拣选demo见 https://shengchao.xyz/blog/custom/3d/webgl_demo1/model_mode.php ,demo中双击 正方体的面就能触发跳转操作,具体代码见 源代码 gl_draw.js 中onGLDClick。
原理如下:
按照透视投影的成像原理,假设近裁面即画布的地方,那么视野中任意一点 A 所成的像将落在此点与摄像头连线与近裁面的交点 B 上,而此射线与远裁面的交点为 C ,那么假如 C 处有一点,那么成的像也将落在 B 。渲染管线中顶点最终坐标的计算过程与这里所讲的类似,A、B、C计算的最终的顶点坐标x、y相同,但是深度Z不同。B点是最近的点,最终计算的深度为-1,C最远为1, A在-1到1之间;
按照上面的原理,那么鼠标在屏幕上(画布)的落点与摄像头的连线所穿过的图形是能够选中的图形,那么通过鼠标所在位置的x、y以及-1和1组成近裁面E和远裁面上的点F,通过透视投影变换的逆过程(逆矩阵),即可求出原始的远近裁面的坐标I和J;
然后求IJ连线和每个图形原始顶点坐标组成的三角形面的交点,如果存在交点,那么即为点所在的图形即为候选图形;
最终哪个候选图形离E点最近,则为选中的图形;
求解直线与三角形的面的交点的代码见demo中的ray_pick.js;