Extend SkeletonHelper to accommodate "fat" lines? (Perhaps with LineSegments2)

Hi folks,

As the title says, I’m trying to get lines of variable width for the skeleton helper (for a skeletal animation). It currently extends LineSegments which doesn’t allow variable line width - and I’m struggling to apply the same logic to LineSegments2, especially with the lack of existing examples. I’ve also tried MeshLine, which did generate triangles but was buggy:

I’ve also tried using Line2 per the example but nothing I did seemed to accommodate the particular way the skeleton helper works - namely:

  • Create BufferGeometry
  • Create (non basic) LineMaterial
  • Use both to render a Line2

@Mugen87 may have provided a useful hint here - could it be related to the fact the geometry needs to be non-indexed? Naively trying this method did not seem to resolve the issue.

What would be the sensible approach to extending the skeletonhelper to have controllable line width?


PS - naively changing LineSegments to LineSegments2 does result in similar triangles to MeshLine - but obviously not a satisfying result:

Is there a way to wrangle LineSegments2 into looking like thick lines?

solved - in case this helps anyone:

  • have SkeletonHelper extend LineSegments2 instead of LineSegments
  • have it use LineMaterial instead of LineBasicMaterial
  • you’ll have to write new LineMaterial -appropriate attributes . So replace updateMatrixworld with something like:
updateMatrixWorld (force) {
        const bones = this.bones;

        const geometry = this.geometry;
        const lineStart = geometry.getAttribute('instanceStart');
        const lineEnd = geometry.getAttribute('instanceEnd');


        for (const [index, bone] of bones.entries()) {
            if (bone.parent && bone.parent.isBone) {
                _boneMatrix.multiplyMatrices(_matrixWorldInv, bone.matrixWorld);
                lineStart.setXYZ(index, _vector.x, _vector.y, _vector.z);

                _boneMatrix.multiplyMatrices(_matrixWorldInv, bone.parent.matrixWorld);
                lineEnd.setXYZ(index, _vector.x, _vector.y, _vector.z);

        geometry.getAttribute('instanceStart').needsUpdate = true;
        geometry.getAttribute('instanceEnd').needsUpdate = true;

Any chance you could post the full code for this? I’m trying to do the same thing, but can’t quite get it right. Thanks in advance!

sorry, the above excerpt is as much as I can post. If you post your code I can take a look…