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

我想绘制光环（外部黑色轮廓）在three.js中的某些形状。虽然我用矩形和圆圈很容易做到，但我在圆形扇区（非全圆）方面遇到了很多麻烦。THREE.JS - 如何绘制光环（外部轮廓）到圆形扇区

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

enter image description here

正如你所看到的，它并不完美（晕是“上”圆上的中心网）

这是代码：

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

是否有人对此有一个更好或更简单的解决方案？

在此先感谢。

来源

2016-12-27 RoeePeleg

你可以用这样一个边缘检测着色器做的（虽然这将需要一个额外的传球）： http://ar3f.in/goochShading.html

来源

2016-12-27 22:51:30 griffin2000

你能否详细说明吗？ – RoeePeleg

基本上，您将场景渲染为渲染目标纹理。然后使用它作为第二遍的输入，使用片段着色器检测存在边缘的区域并在其中绘制像素。有许多不同的算法可以使用，从简单的（只使用输入图像上的微分函数，并在超过特定阈值的位置绘制像素）变得更加复杂。上面的例子使用Canny边缘检测（https://en.m.wikipedia.org/wiki/Canny_edge_detector） – griffin2000

通过缩小图像，可以在边缘周围实现更大的线条（因为缩小后的图像中的每个像素都覆盖了几个像素原始图像） – griffin2000

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

回答

相关问题