I'm working on adding a halo (external black outline) to certain shapes in three.js. While I was able to achieve this easily with rectangles and circles, I am facing challenges with circular sectors (not full circles).
Here is my current attempt:
It is not perfect as the halo appears 'on' the mesh at the circle's center.
This is the code I am using:
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);
Is there a simpler or more efficient solution to achieve this effect?
Thank you in advance.