Get Local Position for Object in React-three-fiber

1
votes

Briefing: I'm attempting to parent a "drei Text" element to a point on the outside of a sphere near the pins in a react-three-fiber scene. So that when the sphere is rotated, or the camera rotates around the sphere, the Texts position is centered on the outside of the sphere.

An example: three.js text alignment

Questions:

How do I find the local and world space positions of an object or parts/points of an object?

How do I parent that objects position to a child object, such that when the parent moves, the child moves with it?

Does a scene have a world position that is relative to the axis at [0,0,0] and a local position that is relative to an object?

My Code Sandbox: earth with locations

1
reactjsthree.jsreact-three-fiber
I found that if you want to add HTML text to the scene, you can import HTML text with drei and place it inside the mesh tags; as long as your parent mesh has an axis centered to itself. The reason it doesn't work in my scene is due to each axis of the pointer pyramids is centered at [0,0,0] instead of at each pyramid location. But I still have an issue where the HTML doesn't hide when something should obscure it, or when it is out of view. I believe this is solved with raycasting or something. – user14440113

1 Answers

0
votes

Check out Object3d, the base class for many objects in three.js, including the scene itself. It has properties and functions that can help you like .position and .getWorldPosition().

Note that the position of any object in the scene is relative to its parent. You can add children to an object with .add(child), but a better way to group objects might be with a Group.