首先，感谢大佬开源编辑器代码，让我省去了开发编辑器的时间，编辑器直接拿来使用。

大佬开源的在线编辑器地址：https://z2586300277.github.io/threejs-editor/#/editor

我在参考大佬的编译器能力下，扩展实现了管道编辑功能。

功能演示：

功能描述:

1.新增

点击加号，新增管线配置，点击绘制按钮，鼠标左键点击绘制管线，右键暂停绘制，点击绘制按钮即可再次开启绘制功能；

2.编辑

针对已存在的管线有二次编辑功能，点击编辑按钮，即可显示对应管线的管点，点击管点可以拖动修改管点位置，修改管线；

3.删除

删除功能，点击删除图标可以删除对应的管点，点击删除按钮，可删除对应的管线。

实现思路：

点击绘制按钮开始监听点击事件，当鼠标左键按下记录点位，转换为three.js的xyz坐标，返回点位并记录下来，监听鼠标移动事件，返回对应的xyz坐标，绘制临时的管线，等待左键按下，绘制正式的管线，删除鼠标移动时临时绘制的管线。

核心方法startDrawPipe方法，该方法有3个callback方法。

clickCallback返回左键点击的坐标

moveCallback返回鼠标移动时的坐标(实现鼠标移动，管线动态跟随鼠标)

endCallback 结束监听事件

/**
* clickCallback-左键点击事件
* moveCallback-鼠标移动事件
* endCallback-绘制结束事件
*/
startDrawPipe(clickCallback,moveCallback,endCallback)


startDrawPipe(
    (point) => { //返回左键点击的点位 },
    (point) => { //返回鼠标移动时的点位 },
    (boolean) => { //关闭绘制时返回true },
)

管线的绘制方法可以看我上一篇three.js的文章

具体代码细节可以去github上看代码，代码地址https://github.com/banyan666/Demo-vue