HTML DIV Overlay on Object3D's

I haven’t been succesful in how to position a DIV on top of a BoxBufferGeometry.
The camera must be oriented in front of geometry -> frontal view is rectangular (prerequisite).

I could compile an example as one can see in this jsfiddle:

The calcluated center does not match with the geometry, when the DIV is added. Eventually change the size on line 39 (const height = 125;).

On top, how can I retrieve the actual height and width in real world coordinates?

One’s help would be greatly appreciated!

This should return on screen coordinates of an objects center:

localPoint = new THREE.Vector3()
var p = object.localToWorld(localPoint);
p.project( camera );
return( p );

localpoint being the center, is 0,0,0 in this example but you’d change this for the corners of the object.

Thank you for your prompt reply, but unfortunately this makes no difference. There is still something causing the center point to be off-center.
for a revision with your suggestion included.

Any idea (or alternative) is highly appreciated,

What is this line supposed to do:

Because it makes no difference if you remove it.

Also, I don’t see my code in there

Sorry about that, did not save in jsfiddle:

Apparently, I just forgot about the basics…
This will do the trick!

body {
margin: 0px;