How can we convert Three coordinates to DOM coordinates?

[trusktr]

I want to draw a cube with it's origin at the top-left of the viewport when it's position is 0,0,0. I'd also like to make the size of the cube match with CSS size (px). So if the X size of the box is 5, I'd like that to be 5 CSS pixels on the X axis (and thus on the screen) at Z=0.

As you can imagine, I'm trying to align Three.js objects with DOM elements. This is opposite of what CSS3DRenderer does, where DOM elements are aligned with Three.js objects. The DOM space is converted to Three.js space rather than Three.js space converted to DOM space.

I thought I'd ask in case someone already knows, but I will figure it out eventually if not.

[mrdoob]

You've been around for a while and you know that we prefer to keep this section for bug reports and feature request. Right?

[trusktr]

Yes, but SO is full of non-Three-specific answerers and other cruft. Maybe Three.js could benefit from it's own forums. Discourse is particularly nice and can be self-hosted for free.

[looeee]

That's a great idea! We could set up something like https://discourse.threejs.org/ Pity that URL is already taken though. :wink:

[trusktr]

hahaha, uuuum, how'd I miss that?....... 😆

[Usnul]

This means: "please direct questions to stack overflow ". What you are after is projection from viewport to 3d world coordinates. Have a read through SO and Camera, Vector3 documentation - I think you will figure it out quite quickly. Good luck :)

[mrdoob]

As far as I understand, what he wants to do is convert CSS3D coordinates to three.js coordinates. Unfortunately is not really possible because CSS3D coordinates and transformations do not need to have perspective. CSS3D is a strange mix of 2D transforms and a perspective transform on top.