How can i tell which direction are XYZ coordinates on the scene with respect to the actual screen after rotation

Questions
, ,
1

I have a simple mesh that i would like to pint to via mouse and use of the raycaster. And once pointing to that mesh i would like to display another mesh about 20units or pixels under it always facing the camera. So for that i subtract 20 units from the dynamic XYZ point.y i get from intersects[0].point object. When my mesh is originally drawn the first time this works because at this point y is going up/down or north/south in screen coordinates. So everything looks great. Until i start rotating it. And the above point.y logic breaks and the second mesh display all over the place. My suspicions is that after rotation Y coordinate could be left/right or east/west for that matter and may be Z or X become up/down or north/south on screen coordinates.
So how can i tell after any given rotation which of XYZ coordinates is North/South direction so i can make sure i always position the second mesh by 20 units below the main mesh. Is there an way to figure this out based on camera rotation or trackballcontrol info.
Thanks
Siamak

2 
const downwards = new THREE.Vector3(0.0, -1.0, 0.0);
myObject.localToWorld(downwards);

anotherObject.position.add(downwards);

:eyes:?

3

Something like this?

axisY.setFromMatrixColumn( camera.matrix, 1 );
object2.position.copy( object1.position );
object2.position.addScaledVector( axisY, -1.5 );

https://codepen.io/boytchev/full/vYPdLpM

4

Thanks @mjurczyk and @PavelBoytchev for the code and the codepen sample. I tried both ,methods and in both cases when rotating the object and also try facing the camera at all times, it goes to various undesirable positions. I am using the following in my renderer to ensure my object 2 is always facing the camera:
css3dElement.quaternion.copy( camera.quaternion );

Also this object is a CCS3DObject in case that makes any difference in this discussion.

Finally when i use the actual dynamic points from the intersects[0].point vector it always positions the object proportionally above the obj objects 1 which at least looks reasonable during all rotations.
css3dElement.position.set(point.x, point.y, point.z); <== this is the line that does it

But it limits my options if i want to put it below the object during all rotations. And yet the codepen example logic work prety well. So not sure why this logic does not work in my code.

I am still wondering if we have a way in threejs to determine which coordinate is up/down during rotations on the actual physical screen as i am sure it cant be the Y axis at all times.

5

A few comments:

  • the code that I posted was about how to place one object visually under another object irrespective to camera rotations, as I thought this is the problem – the code calculates the “down” direction, but could easily calculate “up”, “left” or “right”
  • as for what axis is up, you need to define what do you consider “up”, as according to me in the next illustration no axis is “up”:

image

In any case, good luck with your project.

6

Thanks @PavelBoytch
Yes you brought up an interesting point in your diagram about which direction is up.
In th following three screen shots every time i hover on chr18->C_target_83 pink target, I will see the tooltip which is a CSS2Dobject text and it aways faces the camera, as well as the CSS3DObject which is an html fragment of 6 spans to give it the colored number effect. As i said when i use the regular dynamic points i get for that pink point from the raycaster i always see the colored numbers on top of the point in a proportional manner. So i guess both up or down, that is what i mean (with perspective to the physical screen). In this case the colored numbers always come on top of the pink ball i am hovering on. So i figured there must be a way to put the same numbers under the hovered pink point as well. But that is where i ran into issues with respect to posioning it always under the pink ball. During different rotations it would go sometimes above and sometimes below because i was always subtracting from the point.y a 20 or 30 units which clearly is not correct logic due to coordinates shifting.
Screenshot 2024-01-30 152249
ev.
Screenshot 2024-01-30 152304

Screenshot 2024-01-30 152325

7

Ok i solved the problem by adding more divs to my html fragment holding the 6 spans representing the 6 numbers. I know it may not be prety but it worked for me. I am wrapping this html fragment in a CSS3DObject:

 var content = <div>
                      <div></div>
                      <div></div>
                      <div> </div>
                      <div> </div>
                      <div></div>
                      <span  style="color: ${probeThreedArr[0].color}">${probeThreedArr[0].text}</span>
                      <span  style="color: ${probeThreedArr[1].color}">${probeThreedArr[1].text}</span>
                      <span  style="color: ${probeThreedArr[2].color}">${probeThreedArr[2].text}</span>
                      <span  style="color: ${probeThreedArr[3].color}">${probeThreedArr[3].text}</span>
                      <span  style="color: ${probeThreedArr[4].color}">${probeThreedArr[4].text}</span>
                      <span  style="color: ${probeThreedArr[5].color}">${probeThreedArr[5].text}</span>
                     
                       </div>

And now the numbers always show under the Colored circle upon hover.

image