CODEWITHSUNDEEP
three.jsaframe
Paulo Filho
Paulo Filho

Reputation: 363

How do I place an element in front of the camera, facing it regardless of where it is?

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).

Upvotes: 0

Views: 1235

Answers (1)

OtterFamily
OtterFamily

Reputation: 803

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.

Upvotes: 3

Related Questions