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;