How do I convert the model's local coordinates to global and then to screen coordinates

Questions
1

How do I convert the model’s 3d local coordinates to global
and then to screen coordinates for the 2d div.

image
image1093×338 25.4 KB

image
image916×300 9.81 KB

target is a mesh.

This is the now result, have a large discrepancy.

image
image857×574 108 KB

2

Hello,

Try this:

// You should declare this vector statically for performance reasons. Do not create it in the event handler! It can be reused.
var dPosition = new THREE.Vector3();
...
// In the event handler:
dPosition.copy( target.position );
dPosition.applyMatrix4( camera.matrixWorldInverse );
dPosition.applyMatrix4( camera.projectionMatrix );
// Use dPosition x and y here

Note that you need the camera :wink:

2 Likes
3

You can use the CSS2DRenderer:
https://threejs.org/examples/?q=css2d#css2d_label

2 Likes
4

I solves this problem with use https://threejs.org/examples/?q=css2d#css2d_label
Thank you very much.

5

I solves this problem with use https://threejs.org/examples/?q=css2d#css2d_label
This one works better.

But also thank you for your help.