I want to outline an arrow or line drawn using the ArrowHelper or Line geometries available at the Three.js framework.
The problem is that a complex object or a line cannot be outlined as it would be done with this example from Stemkoski.
I found one approach finding what I suppose is the bounding box mins and maxs for both cases, I get those parameters like this:
var edgeBoundingBox = new THREE.Box3().setFromObject(element);
In the case of the line I add a gap for height and width otherwise the bounding box has 0 height and 0 width and cannot be seen. Then I can create the BoxGeometry to finally create the outline effect with a THREE.BackSide mesh.
But this does not work as expected as it does not get the proper position and rotation when added to the line/arrow element to be outlined and some tricks have to be done to have the bounding box in the same position and direction than the element.
Any idea how to do this in a more straight or clean way? Any other technique that works better? Am I doing it correct but I should get the rotation and position from somewhere else?
Given that linewidth property cannot be changed in all contexts (see post here) I give two solutions to outline your line or arrow that may help some people looking for any solution: 1) Change their color. 2) Use Cylinder instead of Line and outline as usual (I mean like the Stemkoski example).