threejs自带的接口实现坐标拾取一般使用射线法,该方法属于几何计算,通过使用Ray创建射线与geometry通过某个加速结构(bvh或者kdTree),最终与确定的一个三角形进行相交测试
这种方法有如下优点:
- 计算结果精确,由于属于几何计算,射线拾取的精度非常高
- 返回的信息详细,不仅可以计算当前拾取点的坐标,也可以返回当前三角形所属于的mesh,当前点的uv等…
- 。。。。。
同样精度高带来的另一个问题便是性能消耗大,如果遇到稍微复杂的场景,整个计算过程将十分耗时,鼠标移动过程中的坐标拾取更是无法做到,同时,由于射线拾取依赖于几何数据,因此geometry的buffer数据需要常驻内存,这更会带来严重的性能问题。
针对坐标拾取这种常规功能,很多时候并不需要像射线拾取那样返回过多的信息,只需要计算坐标即可,因此,我们可以通过计算深度反酸世界坐标,主要方法如下,将NDC坐标转换到世界坐标
主要步骤如下:
- 由于是深度坐标拾取第一步先计算深度,关键代码如下
let currentRenderTarget = pickRenderer.getRenderTarget();
pickRenderer.getClearColor(oldClearColor);
let oldClearAlpha = pickRenderer.getClearAlpha();
let oldAutoAClear = pickRenderer.autoClear;
let oldSceneEnv = scene.environment;
let oldBackground = scene.background;
pickRenderer.autoClear = false;
pickRenderer.setClearColor(0x000000, 1);
scene.environment = undefined;
scene.background = undefined;
//在深度材质下渲染一遍
scene.overrideMaterial = this.depthMaterial;
scene.frameState.passes.pick = true;
scene.executeUpdate()<