How to get the point index in the path of TubeBufferGeometry when moving mouse on the TubeBufferGeometry?

Questions
,
1

Hi, I have created the TubeBufferGeometry. The code is following:

var curve = new THREE.CatmullRomCurve3( pointArray, false, "centripetal"); 
var geometry = new THREE.TubeBufferGeometry( curve, curveSegments, tubeRadius, radiusSegments, closed );

In the Raycaster.intersectObject(), I can get the following results.

distance – distance between the origin of the ray and the intersection
point – point of intersection, in world coordinates
face – intersected face
faceIndex – index of the intersected face
object – the intersected object
uv - U,V coordinates at point of intersection

Now I can get the intersected point position in TubeBufferGeometry when moving the mouse.

How can I find the nearest point in the pointArray to the intersected point？

Should I change the coordination of the intersected point into world vector?

Many thanks.

2

Something like this:

// point: intersection point
var nearestPoint = null;
var nearestIndex = -1;
var nearestDistance = Infinity;
for ( var i = 0, n = pointArray.length; i ++ ) {
    var currPoint = pointArray[ i ];
    var dist = currPoint.distanceTo( point );
    if ( dist < nearestDistance ) {
        nearestDistance = dist;
        nearestPoint = currPoint;
        nearestIndex = i;
    }
}
1 Like
3

/cc

1 Like
4

Hi!
Intersection point is already in world coordinates. You need to convert it to the local coordinates.

5

Thanks yombo. Is there any relation between the faceIndex and the path points?

6

You’re welcome. Probably, but it will depend on the number of segments. You could infere it from the tube geometry code.
If the tube is generated with constant segment length (as opposed to constant number of segments per point) then the relation will be too complex.

1 Like
7

Thanks prisoner. I found the faceIndex at the end of path is 11000. But the count of color in the TubeBuffferGeometry is only 6925. The length of the color is 20775 = 6925*3. How can I know how many faces in the Geometry? Is it the number tubularSegments 1384 * radialSegments 4 ?

8

THREE.TubeBufferGeometry() is an indexed buffer geometry, so you can find the amount of faces like this:
geometry.index.count / 3

1 Like
9

Hi all,
I just want to highlight the tubularSegment when move mouse on the geometry.

TubeBufferGeometry(path : Curve, tubularSegments : Integer, radius : Float, radialSegments : Integer, closed : Boolean)

path — Curve - A path that inherits from the Curve base class
tubularSegments — Integer - The number of segments that make up the tube, default is 64
radius — Float - The radius of the tube, default is 1
radialSegments — Integer - The number of segments that make up the cross-section, default is 8
closed — Boolean Is the tube open or closed, default is false

Here, the tubularSegments is set as the real point number. But it seems there is no attribute of tubularSegments in the TubeBufferGeometry. The Raycaster only return the faceIndex.

10

Thanks very much.

11

Are you looking for something like this?
https://jsfiddle.net/prisoner849/4bghcdew
TubularSegmentHighlight

3 Likes
12

Yes, exactly. Thanks very much :grinning:

13

@yancychy you’re welcome :slight_smile: :beers: