Three.js实现深度拾取功能

threejs自带的接口实现坐标拾取一般使用射线法，该方法属于几何计算，通过使用Ray创建射线与geometry通过某个加速结构(bvh或者kdTree)，最终与确定的一个三角形进行相交测试
这种方法有如下优点：

• 计算结果精确，由于属于几何计算，射线拾取的精度非常高
• 返回的信息详细，不仅可以计算当前拾取点的坐标，也可以返回当前三角形所属于的mesh，当前点的uv等…
• 。。。。。
  同样精度高带来的另一个问题便是性能消耗大，如果遇到稍微复杂的场景，整个计算过程将十分耗时，鼠标移动过程中的坐标拾取更是无法做到，同时，由于射线拾取依赖于几何数据，因此geometry的buffer数据需要常驻内存，这更会带来严重的性能问题。
  针对坐标拾取这种常规功能，很多时候并不需要像射线拾取那样返回过多的信息，只需要计算坐标即可，因此，我们可以通过计算深度反酸世界坐标，主要方法如下，将NDC坐标转换到世界坐标

主要步骤如下：

1. 由于是深度坐标拾取第一步先计算深度，关键代码如下

        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()