THREE.JS - 如何将Halo（外部轮廓）绘制到圆形扇区

Question

我试图在three.js中绘制一些形状的光晕（外部黑色轮廓）。虽然我用矩形和圆圈很容易做到，但我对圆形扇区（非圆形）有很多麻烦。

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

正如你所看到的那样，它并不完美（光环是＆＃39; on the circle on the circle＆＃39; s  中心）

这是代码：

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);

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

提前致谢。

Answer 1

你可以使用像这样的边缘检测着色器（虽然它需要额外的传递）： http://ar3f.in/goochShading.html