HTML Labels position lag starting from r113

Questions
#1

Hello,
im displaying some html/css labels in my application and noticed a serious lag in position update.

I can pinpoint this problem to r113+ (112 doesnt have this issue). The migration guide states many Math and matrix related changes, but Im not calling any of that myself.

This is how I update the 2D-position of my label (runs on every frame):

screenVector.copy(this.position).project(camera);
const posx = (screenVector.x + 1) * parentDomNode.offsetWidth / 2;
const posy = (1 - screenVector.y) * parentDomNode.offsetHeight / 2;
container.style.transform = 'translate(' + Math.floor(posx) + 'px, ' + Math.floor(posy) + 'px)';

I can provide a live example later.

On a side note: creating a CSS2DObject from my HTML object and letting the CSS2DRenderer handle the position is working fine.

Update: the activated damping in OrbitControls has a direct effect on this. So what I called “lag” is the labels smoothly sliding to their new position. This behavior seems odd to me, how can I avoid this?

See the Pen labeltest by nudelmann (@nudelmann) on CodePen.

#2

That would be great!

Good to know! I suspect that debugging a live example will make it easier to investigate this issue.

#3

Here is a codepen with Html and CSS2D Labels. You can toggle threejs revisions by renaming the imports in the header:

See the Pen labeltest by nudelmann (@nudelmann) on CodePen.