Three.js鼠标点击平面实现任意画线功能

操作步骤：鼠标指针移入三维网格平面之中，按下左键即可画线，画线过程中，若鼠标移出平面则停止绘制，再次移入则进行上次继续画线，鼠标右键结束绘制，Esc键退回上一步骤。

通过Raycaster获取鼠标坐标
在网格平面上任意位置绘制线段，就需要获取点击位置的向量Vector3，获取之后就可以确定第一个点的位置，一条直线由两个点来确定，由此，需要获取鼠标点击位置。
在写代码之前，需要了解一下THREE.Raycaster这个方法。
前面文章13 - three.js 笔记 - 通过 THREE.Raycaster 实现模型选中与信息显示也曾对这个对象做过介绍但是并未介绍其中所有的方法。
因为，我们需要获取不是与射线相交的物体，而是与射线相交的点也就是一个THREE.Vector3()对象。
通过查看官方文档，可以使用Three.Raycaster类的一个属性Ray的一个方法intersectPlane()器返回值是一个Vector3对象。
Ray.intersectPlane()：将这条射线与平面相交，如果没有交点，则返回交点或null。
当然这里，不仅仅可以通过平面来获取交点还有别的方法，但是这里使用plane，别的方法请查看官方文档。
--------------------- 
版权声明：本文为CSDN博主「ithanmang」的原创文章，遵循CC 4.0 by-sa版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/ithanmang/article/details/81625996