Question on why my straight line does not exactly connect to the two points I am drawing it between

Questions
,
1

Hello every one

I have a group that contains a bunch of circles. This group is part of a pivotObject which is a(regular THREE.Group). The reason for having a pivotPoint with group inside it is for easier rotations (i am not using any conrollers so i have better flexibility on all rotation angles). Now I want to be able to click on one circle and then the second circle and draw a straight line between them. The problem is the line is always off a bit. I am getting the world coordinates of each circle (point) from the click event and raycaster.

my question is: do i need to account for the x,y,z coordinates of the pivot in relationship to the group inside it. Again the group inside contains all the circle messhes. Here i s a screenshot for better visualization of this issue:

Screenshot 2025-08-18 185651
Screenshot 2025-08-18 185651597×532 51.3 KB

As you can see the white and pink circles have been clicked on to create the line, but the line is off a bit. I remember before having my pivotpoint this worked just fine as I added the lineit to the group containing the circles. But now I have to add the line to pivotpoint so it can rotate and stay within the range that you see. If I add the line to group that is inside the pivotpoint, it will not render all it would be far away from the two circles.

2

Instead of raycast coordinates use mesh.getWorldPosition() on the raycasted mesh to get world center of each sphere and use that to create the lines.

also

  • check raycast is hitting the sphere and not the smoke effect in the screenshot
  • make sure the line’s parent object does not have any offset
2 Likes
3

Thanks @vis_prime. I tried using getworldPosition but still had the same issue. You mentioned makesure line parents does not have any offset. I wanted to explore that a bit further.Where would I see the offset if I wanted to debug this?

Thanks

4

This would be yes I’m sure, if the circles are in one parent and the lines are added to another, you’d likely want to get the world position of the circles, create the line and add it to the pivot parent and then subtract the pivot parent position from each point in the line eg…

line.position.sub(pivot.position)

This should serve as a way to synchronise the two object groups’ positions

5

( i usually find it conceptually simpler/cleaner to use .localToWorld or .worldToLocal rather than directly computing offsets. That way if the hierarchy changes, the code still works… )
So to move from one objects space to another.. something like:

object2.worldToLocal(object1.localToWorld( someLocalPointInChildSpaceOfObject1 ))
2 Likes
6

Thank you all for your great insights. After trying all the above suggestions and still facing the problem, I realized the following:

as long as i dont rotate the entire group of circles, The dynamic coordinates I get for the two circles I want to draw a line between, is always correct. And the line always works fine and is drawn between the two circles correctly. How ever as soon as I rotate the entire group, the next time my lines are off. And totally miss the staring and ending positions of the two circles intended to be connected via this line. I thought it might be a quaternion issue, so I tried the following:

let newQuaternion = new THREE.Quaternion(); 

pivotPoint.getWorldQuaternion(newQuaternion);

 line.quaternion.copy(newQuaternion);

But that did not do the trick either. So, the questions is why my dynamic coordinate data for a little mesh circle that I click on is not accurate after rotation of the pivot object which includes the group object. And the group object includes all the little mesh circles.

Look forward to more insight on the new findings above.

thanks
7

As there is no code that we can debug and try with, it is just a game of blind guessing. Try this to identify (or to eliminate) one possible reason:

  • rotate slowly, connect two points and observe the amount of misalignment
  • rotate fast, connect two points and observe the amount of misalignment

If the fast rotation generates bigger misalignment, a possible reason is that some matrices are not calculated in time. Recalculation is done automatically once a frame, but sometimes it is needed to force recalculation mid-frame.

Another thing to test:

  • rotate the points
  • connect many pairs in different locations

Observe whether the misalignment is the same for all lines. Same misalignment indicates some global issue, unrelated to individual points; different misalignment indicates local point-related issue.

If everything fails, my suggestion is to put a simplified model in CodePen.io (just a box with group of points, line connecting, pivot point). No need for actual data, random points are enough.

  • if the line connections work fine - you will have a working model and could compare for differences
  • if the line connections fail again - we will have a way to debug the model, which increases the chances to find the issue
1 Like