在three.js WebGL中创建放大镜效果

Question

我正在使用three.js / WebGL渲染器中的正交视图，并且我想要一个可以用用户鼠标跟踪的放大镜。我正在寻找有效的最佳方法。

在使用html5 canvas原始命令时，这很容易：我只是定义了一个圆形剪辑区域，缩放了坐标，然后重新绘制了整个场景。对于3d对象，如何进行操作不太明显。

到目前为止，我发现的方法是执行以下操作：

• 定义第二个可观察缩放区域的相机。将正投影剪辑的坐标设置得较小，这样就不需要做很多工作了
• 创建一个THREE.WebGLRenderTarget
• 告诉渲染器和我所有的线条纹理，分辨率即将改变
• 将场景渲染到RenderTarget中
• 在鼠标位置的点处添加一个CircleGeometry作为MeshObject（在世界坐标中，但在场景的其余部分之上，靠近摄影机）。把它叫做镜头。
• 将镜头WebGLRenderTarget用作纹理。
• 返回到我的默认相机，重置我的所有分辨率参数，并使用添加的“镜头”对象重绘场景。

这有效（请参见下图），但我担心其中的一部分：

• 我必须每帧渲染两次
• 线条不清晰，因为分辨率有问题。我必须跟踪所有需要了解屏幕分辨率的材料，并在每次屏幕渲染时都对它们进行两次更新。

相关问题：

• 我想在此顶部叠加一些绘图轴，并可能在网格线上叠加。这些将随着视图平移而改变。我不确定是应该制作这些3d对象，还是在上面放置的2d画布上下文中进行制作。
• 我想覆盖一些绘图线，并使其在缩放视图中合理显示。这里很难确定“敏感”：我不希望它们在缩放视图中太胖，但我也不想像图像细节一样放大它们（将其作为纹理渲染到“平面”上）后面的物体）。

这是一篇很长的文章，但是我对Three.js仍然是新手，正在寻找好的想法。