How to keep the elementComponent the same size while moving the camera?

Help & Support
1

I want to achieve a kind of anchor (actually an elementCompoent with texture), which can keep facing to the camera and keep the same size, even when the camera moved to any closer or further place.

I have kept it facing the camera, and my problem is how to make it keep in a same visual size?

My demo:
https://playcanvas.com/project/706314/overview/anchorkeepingsize

Some pictures describing the effect:

  1. The initial view

    image
    image1552×901 153 KB

  2. When the camera moved to any closer(further) place, all things look larger(smaller). But I want to keep the anchor the same size as 1

    image
    image1554×900 257 KB

I hope you understand my description and that someone has an idea. Kind regards

2

If it needs to say the same size, could you not use screen space UI instead?

3

Thanks for reminding, more problem descriptions have been added

4

Still not fully understanding why it can’t it be in screen space?

5

Sorry for not answering directly, using screen space is a better idea, but the main purpose for me is to know how to calculate in this case. In other words, learning. :slight_smile:

6

If I understand what you’re trying to do, you can keep an object’s size constant by running this code. It is meant for in-world canvasses though, so it does not keep an anchor point to the screen, use a screen space canvas for that.

ConstantSizeOnScreen.attributes.add('camera', { type: 'entity', title: 'Camera' });
ConstantSizeOnScreen.attributes.add('sizeOnScreen', { type: 'number', title: 'Size on Screen' });

ConstantSizeOnScreen.prototype.update = function(dt) {
    //look at camera (billboard effect), might need some adjusting
    this.entity.setEulerAngles(this.camera.getEulerAngles());

    var scale = this.getSize(this.entity.getPosition()); //constant scale on screen
    this.entity.setLocalScale(scale, scale, scale); 
};

ConstantSizeOnScreen.prototype.getSize = function(position) {
    var a = this.camera.camera.worldToScreen(position);
    var b = new pc.Vec3(a.x, a.y + this.sizeOnScreen, a.z);

    var aa = this.camera.camera.screenToWorld(a.x, a.y, a.z);
    var bb = this.camera.camera.screenToWorld(b.x, b.y, b.z);

    return aa.sub(bb).length();
};

For my case, sizeOnScreen is 0.3.

2 Likes