HTML DIV Overlay on Object3D's

Questions
, ,
1

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:
https://jsfiddle.net/jsfiddle_lyke_be/w3n5e1tr/1/

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!
Manu

2

This should return on screen coordinates of an objects center:

getOnScreenCoords(object){
localPoint = new THREE.Vector3()
var p = object.localToWorld(localPoint);
camera.updateMatrixWorld();
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.

3

Thank you for your prompt reply, but unfortunately this makes no difference. There is still something causing the center point to be off-center.
see
https://jsfiddle.net/jsfiddle_lyke_be/w3n5e1tr/2/
for a revision with your suggestion included.

Any idea (or alternative) is highly appreciated,

4

What is this line supposed to do:
_obj.updateWorldMatrix;

Because it makes no difference if you remove it.

Also, I don’t see my code in there

5

Sorry about that, did not save in jsfiddle:
https://jsfiddle.net/jsfiddle_lyke_be/w3n5e1tr/5/

6

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

body {
margin: 0px;
}