THREE.js 实现屏幕只能看到指定区域

计图项目展示完了，虽然展示的时候模板测试这一块还是有bug（可见区域会受透视投影的影响导致形状发生变化或离开视野），但是避开了bug展示。
今天看了一些资料，有了一点灵感，终于大概修好了bug。

1、功能设想

实现像透过竹子口看世界一样的效果，就是像下图这样

2、挣扎与灵感来源

因为计图项目中的bonus有模板测试这一项，本着努力做完所有bonus的念头，开始着手研究。
看了一下opengl的相关知识，发现利用模板测试可以完成轮廓、镜面的效果，但是因为我们的风格是low poly，所以不想做镜面效果；
于是看了一天轮廓，最后都没有做出来：用opengl实现其实是很简单的，但是用three.js时，它封装的非常好，比如渲染物体的时候是对场景内的mesh一个个调用相关着色器，而我们写的时候只有一句：

rendered.render(scene, camera)

而轮廓显示需要先后调用不同着色器，如果用renderer.render函数就会把前面的渲染结果覆盖掉，最终只能画出原物体或者只能画出轮廓；但是不能用两个renderer（如果可以的话请告诉我），因此放弃了轮廓效果。

ps: three.js有一个OutlinePass的通道处理可以描出轮廓，这里查看官网给的例子；
还有一个镜面效果的例子(实际上还有个叫mirror的控件好像，但是没找着）

虽然没做成轮廓，但是看到了这个例子，于是发现我们的项目也可以做一个类似的效果，就像狙击枪