Huge performance problems on position change

Questions
,
1

I’m working on a project that has normal divs positioned to 3D objects (spheres). Whenever the camera changes I use an event that changes the position of the div according to the position of the 3D sphere.

When moving the camera I experience huge performance problems, especially on Chrome. (It’s not as bad on other browsers).

The project can be found here: https://inhalkmaar.xtrahost.nl/

Is there is a fix for this or a better way to make ‘2d labels’?

2

Hi!
Try to replace this:

        objData.divElem.style.left = proj.x + 'px';
        objData.divElem.style.top = proj.y + 'px';

with this:

        objData.divElem.style.transform = `translate(${proj.x}px, ${proj.y}px)`;

And there is an example for 2d labels: https://threejs.org/examples/?q=2d#css2d_label

3

Thanks for your response. The code didn’t do it for me, but the example did! Thanks.