Please see this video. I want to know how can I make something that is relative to the tracking(or the world) go to the screen. Go to the top, bottom, center, upper left, etc.This is primarily for augmented reality experiences. The use case is that when the user is not looking at the tracking, I want a smooth animation that makes the UI go to the screen. The example video shows how this can be easily done using Zapworks Studio, using their constraint system. I also made a feature request regarding contraints for anyone curious(it’s titled " feature request: constraints" issue 3342, I can’t post the link because I’m a new user, limited to 2 links). Since the constraint system is not likely to be implemented, I’d like to know how can I go about implementing this myself with code. Thank you for your time.
Not a perfect example but enough to get you going : https://playcanvas.com/project/838603/overview/lerp-world-to-screen-blend
This always lerps between where the world position currently is and where the screen position is which means the rotation can flip at any point because both positions have moved.
If you are looking for something that starts moving from the where it started to the target screen position this https://playcanvas.com/project/838585/overview/lerp-world-to-screen may be better.
Both of these should get you started.
Thanks a lot yaustar, this definitely helps! I hope that by making this example you realized that a constraint system would be much easier for the user haha.
The code itself is very simple. The main part of is:
// Lerp between the position, rotation and scale
var t = this._time / this.durationSecs;
var pos = this.object.getPosition();
var rot = this.object.getRotation();
var scale = this.object.getLocalScale();
pos.lerp(this.worldPoint.getPosition(), this.screenPoint.getPosition(), t);
rot.slerp(this.worldPoint.getRotation(), this.screenPoint.getRotation(), t);
scale.lerp(this.worldPoint.getLocalScale(), this.screenPoint.getLocalScale(), t);
this.object.setPosition(pos);
this.object.setRotation(rot);
this.object.setLocalScale(scale);
Which is effectively the same code done 3 times, one for each transform type.
If the feature is more widely demanded by users, we can consider integrating it as a feature or a more complete project/reusable utility script. There are several ways this script can be tweaked to work/configured to make it potentially easier to work with.
