Javascript THREE.JS-如何绘制圆形扇形的光环（外部轮廓）

我试图在three.js中为一些形状绘制halo（外部黑色轮廓）。虽然我可以轻松地使用矩形和圆形，但使用圆形扇形（而不是全圆形）有很多问题

到目前为止，这是我得到的最好的：

正如您所看到的，它并不完美（光晕“在”圆上的网格上） （中）

代码如下：

var radius = 50
var segments = 32;
var thetaStart = 0;                   
var thetaLength = 0.5 * Math.PI; 

var geometry = new THREE.CircleGeometry(radius, segments, thetaStart, thetaLength);
var material = new THREE.MeshBasicMaterial({color: 0xffffff});
var circle = new THREE.Mesh(geometry, material);

/* create halo */
var unit =  1 / radius; 
var biggerGeometry = new THREE.CircleGeometry(radius + 2, segments, thetaStart - 2*unit, thetaLength + 4*unit); 
var haloGeometry = new THREE.EdgesGeometry(biggerGeometry);    
var haloMaterial = new THREE.LineBasicMaterial({ color: 0x000000 }); //black halo    
var halo = new THREE.LineSegments(haloGeometry, haloMaterial);
circle.add(halo);

有人有更好或更简单的解决方案吗

---

提前谢谢

您可以使用像这样的边缘检测着色器（尽管它需要额外的过程）：

---

请详细说明一下好吗？基本上是将场景渲染为渲染目标纹理。然后将其作为第二个过程的输入，在第二个过程中，使用片段着色器检测存在边的区域并在那里绘制像素。您可以使用许多不同的算法，从非常简单（只需对输入图像使用导数函数，并在高于某个阈值的位置绘制像素）到更复杂。上面的示例使用Canny Edge Detection（），通过缩小图像尺寸，可以在边缘周围获得更大的线条（因为缩小图像中的每个像素都覆盖了原始图像中的几个像素）