Making navigation using LineCurve3 array with TubeGeometry

Questions
, ,
1

Dec-20-2023 17-03-56

const lineCurves = []
for (let i = 0; i < pathArray.length - 1; i++) {
  const segmentCurve = new THREE.LineCurve3(curvePoints[i], curvePoints[i + 1])
  lineCurves.push(segmentCurve)
}
const curvePath: any = new THREE.CurvePath()
lineCurves.forEach((curve) => curvePath.add(curve))

const tubeGeometry = new THREE.TubeGeometry(curvePath, pathArray.length * 6, thickness, 3, false)
lineRef.current.geometry = tubeGeometry

Hi guys!
While making an XR Navigation, I’m currently struggling with curveArray in TubeGeometry.
As like the gif, when the tube bends at a checkpoint, it appears as a folded tube.
I tried all the properties in TubeGeometry but couldn’t find a good solution.
by the way, I tried mergedGeometry to make it not bended like the below.

Dec-20-2023 17-31-13

const tubeGeometries = []
for (let i = 0; i < pathArray.length - 1; i++) {
  const segmentCurve = new THREE.LineCurve3(curvePoints[i], curvePoints[i + 1])
  const segmentGeometry = new THREE.TubeGeometry(segmentCurve, 2, 0.07, 6, false)
  tubeGeometries.push(segmentGeometry)
}
const mergedGeometry = BufferGeometryUtils.mergeGeometries(tubeGeometries)

but in this example, tube are merged together not as like a single bended pipe.
so in fragment shader, tube vUv are so separate that I cannot make a smooth path animation using shader. also we can see the boundaries of each TubeGeometry.

Do you guys have any solution? please save my life thank you

2

Here are three ideas, if you like any of them, you could try to implement it. Good luck.

  • Idea 1 (most complex): define your own geometry for the path, you can start from a PlaneGeometry and change the coordinates of internal vertices
  • Idea 2 (moderate): use a curve through the checkpoints and make the tube follow this curve. A suitable curve is THREE.CatmullRomCurve3. You can vary its tension to make it sharper or smoother. The video is a demo of how such type of curve look like.

  • Idea 3 (easy): Make the checkpoints as big as to cover the corners of the path (see the right image)

image
image947×204 4.82 KB

3

I really appreciate for the answer!

const curve = new THREE.CatmullRomCurve3(curvePoints, false, 'catmullrom', 0.3)
const tubeGeometry = new THREE.TubeGeometry(curve, pathArray.length * 50, thickness, 3, false)

it works fine when a distance between two points is close with tension.
but when a gap is big enough between two points, curve bends like ‘c’ shape not like ‘l’

your path looks smooth and looks straight to next point and no break at checkpoint, did I miss something?

4

Your observation is correct.

The shape of the curve depends on how long or short are individual segments. To make the curvature more consistent, you try adding intermediate vertices for the curve – just before and after each vertex. The value of the length h controls the tension, but in a symmetrical way (i.e. if a segment is too long, it will not affect the curvature).

image
image950×201 4.89 KB

5

that makes sense! I could try this way!
Thank you for saving my life :pray: :pray: :pray: