Webgl-Three.js Sprite精灵如何实现OutlinePass选中框效果?

Three.js Sprite精灵如何实现OutlinePass选中框效果?

1. 最近在项目中遇到这样一个问题，如何在3D场景中实现Sprite精灵的选中效果，简单的方法有改变材质颜色，但是感觉效果比较low，于是查了下，发现这两种不错的选中实现效果https://blog.youkuaiyun.com/homula123/article/details/101701456（利用OutlinePass后期处理实现选中框效果，three官网也有案例），https://wow.techbrood.com/fiddle/54961（自定义着色器实现高光效果）。于是先研究了下第一种方式。

2. 先看了下three.js的OutlinePass案例，在里面加了个精灵，发现了个神奇的问题，如图1.1，鼠标移到小球上出现了选中效果，移到精灵上却没有出现？怎么办？（至于OutlinePass后处理如何应用，参考第上面一个链接，已经有大佬说明了，看案例也行）。

                                                                                               图1.1

3. 首先想了下，小球是Mesh，精灵是Sprite，是否和精灵材质设置有关呢，于是调了下精灵材质属性，深度检测，透明度等，发现还是无效，如图1.2。于是去查了下，在github官网上还真找到了相关问题https://github.com/mrdoob/three.js/issues/20428，结果人家作者说outlinePass通道确实不支持Point，Line，Sprite，如图1.3。但是代码里又写了可以支持Sprite精灵，如图1.4，可能是作者忘记改注释了........

//精灵----------------------
const texture = new THREE.TextureLoader().load( "textures/water.jpg" );
let spriteMaterial = new TH