0

I have this simple scene with a "tooltip" entity composed of some data, I'd like to know how to position it in front of the camera. The tooltip will have to face certain points a few meters away so the user can see it. It must obey camera direction (it can be gathered by calculating it from previousPoint to nextPoint where the camera will move), but only y axis (can't be tilted or anything like that).I tried digging through math but couldn't understand good enough to employ a solution for this little project; I appreciate all the help!

setTimeout(function(){
  var camera = document.getElementById("cameraS");
  var tt = document.getElementById("ttS");

  var cameraPos = camera.getAttribute('position');
  var ttPos = tt.getAttribute('position');

  tt.setAttribute('position', cameraPos);
  tt.setAttribute('rotation', {'y': -90});
}, 5000);

JSFiddle

EDIT

I made an image showing what I'm after: https://i.sstatic.net/uWEGQ.jpg I have point A and point B; the camera will play an animation moving from previous point to the next, and upon reaching there the tooltip will be displayed a few meters away from the point (box) so we can see it. It must take camera orientation into consideration but it must be perpendicular to the ground (can't be tilted).

Improve this question

1 Answer 1

Reset to default
3

There is a command THREE.Object.lookAt(THREE.Vector3); that will rotate an object (assuming (0.0,1.0,0.0) is up) to face a vector. You can use this to have it face your camera.

If you only want Y rotation, you can copy the current rotation, then do look at, then copy the rotation.x and rotation.z from the previous frame rotation copy - so that way it'll only correct the y with .lookAt because you reset x and z.

Improve this answer
Sign up to request clarification or add additional context in comments.

12 Comments

This worked nearly perfect for me, the only part missing is having the position set up in front of the camera. By this image you can see the tootltip is correctly facing the camera regardless of where the camera is facing (1/3), the tooltip object is also preserving Y axis even if I tilt the camera (2/3); only part missing is positioning, I just tried setting the position but it went awkward: imgur.com/a/p1gN0
Fiddle: jsfiddle.net/w6sLxwcd/2 relevant code starts at JavaScript line 8.
to put something between two objects, you get a difference vector which is difference = p1-p2; normalize that vector, multiply it by the scalar distance you want it (either from the camera or from the target object), and then add p2 to it. If you want it fixed distance from the camera, then p2 is the camera. if you want it a fixed distance from the target object, then p2 is the target object. But the question is really unclear, so maybe you want a different behavior
I also wanted to place the tooltip in front of the camera, a few meters way actually ("away" as in a little away but in front of it so the user can see it). I'm sure there's some math involved to be able to get the camera direction and somehow use it in order to place correctly in front of the camera and looking at it (the camera). I'm terribly bad at explaining sorry.
see previous comment on how to position something between two objects. You know where camera will be and target will be. The tooltip position is then p1-p2 normalized multiplied by your desired tooltip distance plus p2. read above comment
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.