Vue+Three.js实现三维管道可视化及流动模拟

最近在研究Geotoolkit过程中，发现很多三维的应用场景，用其实现起来比较复杂，就开展了利用Three.js实现海底管道流动的模拟。

推荐一个学习地址：Three.js教程，这这里的学习示例基本上H5+js，再多加以一点nodejs，对于vue+Three.js的开发方式比较少，包括官网的示例也是前者，因此就促使自己尝试用vue+Three.js的学习研究，这样后续和目前的前端集成起来就方便一些。

先说明一下，我的开发环境：vue-2.5.2，Three.js-0.142.0，开发工具webstorm2021.2.3，其他都默认。

示例：实现了海底管道的三维显示及三维液体流向的模拟，效果如下：

vue+Three.js，通过不断改变管道的Texture实现管道流动模拟，代码详见pipe4.vue。

核心代码如下：