Rotate Entity To Face Camera

Help & Support
1

Hi, I’m having great difficulty using the tween library to get an object to tween to face the camera… This is what I have but depending on where my camera is, the final rotation is always different.

t = new pc.Vec3(this.myCamera.getLocalEulerAngles().x,this.myCamera.getLocalEulerAngles().y,this.myCamera.getLocalEulerAngles().z)
this.myTween= myEntity.tween(myEntity.getLocalEulerAngles()).rotate(t, 0.4, pc.SineOut).start();

Any ideas? Thanks

2

Hey,

you need to calculate direction and euler properly to face camera.

    var entityPosition = this.entity.getPosition();
    var cameraPosition = this.camera.getPosition();
    var direction = cameraPosition.clone().sub(entityPosition);

    // Calculate the Euler angles to face the camera
    var rotationEuler = new pc.Vec3();
    rotationEuler.set(0, Math.atan2(direction.x, direction.z) * pc.math.RAD_TO_DEG, 0);
    entity.tween(entity. getLocalEulerAngles()).rotate(eulerAngles, 0.4, pc.SineOut).start()
3

Thanks. Unfortunately using this I still get the object tween to different rotation angles depending on the camera facing.
My full code:

 this.entity_to_rot = hitEntity.parent;
            var entityPosition = this.entity_to_rot.getPosition();
            var cameraPosition = this.myCamera.getPosition();
            var direction = cameraPosition.clone().sub(entityPosition);

            // Calculate the Euler angles to face the camera
            var rotationEuler = new pc.Vec3();
            rotationEuler.set(0, Math.atan2(direction.x, direction.z) * pc.math.RAD_TO_DEG, 0);
            this.entity_to_rot.tween(this.entity_to_rot.getLocalEulerAngles()).rotate(rotationEuler, 0.4, pc.SineOut).start();

Something to do with local/global? I’ve tried seemingly hundreds of permutations but the rotation is always different.

4

It seems that the rotations are different because the entities I am rotating belong to parents and grand parent with different rotations and for some reason those rotations are also coming into the equation… How can I prevent that?

EDIT: Actually, I am already unparenting the objects from anything before the rotation so they are always direct children of root…but still I get the different rotations.

5

try:

  var globalPos1 = this.entity.getWorldTransfrom()
  var entityPosition = globalPos1.getTranslation(this.entity.getLocalPosition());
  var cameraPosition = this.myCamera.getPosition();

  // Calculate the Euler angles to face the camera
  var rotationEuler = new pc.Vec3();
  rotationEuler.set(0, Math.atan2(direction.x, direction.z) * pc.math.RAD_TO_DEG, 0);
  this.entity_to_rot.tween(this.entity_to_rot.getLocalEulerAngles()).rotate(rotationEuler, 0.4, pc.SineOut).start();
6

This almost works.(I think there were parts missing in your example so hopefully I filled in the blanks correctly) The object always faces the camera but I think depending on the cameras position the object can be upside down or rotated clockwise or anti clockwise…?!?

var globalPos1 = this.entity_to_rot.getWorldTransform()
var entityPosition = globalPos1.getTranslation(this.entity_to_rot.getLocalPosition());
var globalCamPos = this.examine_camera.getWorldTransform()
var cameraPosition = globalCamPos.getTranslation(this.examine_camera.getLocalPosition()); 
var direction = cameraPosition.clone().sub(entityPosition);

// Calculate the Euler angles to face the camera
var rotationEuler = new pc.Vec3();
rotationEuler.set(0, Math.atan2(direction.x, direction.z) * pc.math.RAD_TO_DEG, 0);

this.entity_to_rot.tween(this.entity_to_rot.getLocalEulerAngles()).rotate(rotationEuler, 0.4, pc.SineOut).start();
7

try to use lerp function instead of tween