Unable to get dotted line/ linkPositionUpdate to work

[DOrsulak-SOLIEL]

I am trying to connect nodes with a dotted line and am having troube using with angular/ typescript:

I tried to follow solution at: https://github.com/vasturiano/3d-force-graph/issues/375

      .linkPositionUpdate((lineObj: any) => {
        lineObj.computeLineDistances()
      })

I am getting errors like:

lineObj.computeLineDistances is not a function
    at Object.linkPositionUpdate (network.component.ts:391:17)
    at three-forcegraph.mjs:782:49
    at Array.forEach (<anonymous>)
    at layoutTick (three-forcegraph.mjs:771:31)
    at Function.tickFrame (three-forcegraph.mjs:730:9)
    at comp.<computed> [as tickFrame] (kapsule.mjs:189:65)
    at FromKapsule.<computed> [as tickFrame] (three-forcegraph.mjs:1504:75)
    at Function._animationCycle (3d-force-graph.mjs:271:24)
    at comp.<computed> (kapsule.mjs:189:65)
    at timer (zone.js:2405:41)

I tried to follow solution at: https://github.com/vasturiano/3d-force-graph/issues/224

I am using: "3d-force-graph": "^1.70.15", "@angular/cdk": "^14.2.7", "three": "^0.146.0", "typescript": "~4.8.4"

[GKersten]

@DOrsulak-SOLIEL I am not an expert here, but are you sure you did check out the complete Fiddle that was mentioned here? https://github.com/vasturiano/3d-force-graph/issues/375#issuecomment-686521509

For example if you forget this part:

.linkThreeObjectExtend(true)
.linkThreeObject(link => {
  // extend link with text sprite
  const sprite = new SpriteText(`${link.source} > ${link.target}`);
  sprite.color = 'lightgrey';
  sprite.textHeight = 1.5;
  sprite.size = 10;
  return sprite;
})

you will get errors like below

But just by copying the Fiddle I can make it work:

[DOrsulak-SOLIEL]

Thanks for your thoughts @GKersten but I did have the other parts from codepen. My problem actually was I had a few seemingly unrelated parts in addition.

The specific problem in my screenshot was just showing what I thought was the issue, but when i put type = any as lineObject it compiled and broke on runtime with .computeLineDistances() not being a function.

I figured out by adding the following line to the working codepen I was able to reproduce this issue: .linkWidth(link => 10 )

I solved my problem by removing it.

Looks like setting linkWidth changes __lineObj.children[0] from type = line to type = mesh

Funny thing is I thought I was doing something wrong this whole time, but the root of the issue may actually be a bug?

[GKersten]

@DOrsulak-SOLIEL this is actually not a bug, but as designed. When you change the lineWidth() to anything else than 0, it will render a mesh instead of using the ThreeJS lineRenderer. as you can see is mentioned here, is caused by a limitation in WebGL

https://github.com/vasturiano/3d-force-graph/issues/378#issuecomment-690680582