Getting the real screen width in pixels of a div/image using Three.js and the CSS3DRenderer

问题

Really been struggling with this one. I have a program that uses the CSS3D Renderer of Three.js and I am trying to get projected "real" screen-width in pixels of a div (which contains a single image).

I've tried using getBoundingClientRect() on the image but the widths and heights returned from that function are wrong. I assume due to a perspective issue.

I have also tried this method which gives me an accurate center coordinate and is from this post by mrdoob: https://stackoverflow.com/a/11605007

var width = window.innerWidth, height = window.innerHeight;
var widthHalf = width / 2, heightHalf = height / 2;

var projector = new THREE.Projector();
var vector = projector.projectVector( object.matrixWorld.getPosition().clone(), this.camera );

vector.x = ( vector.x * widthHalf ) + widthHalf;
vector.y = -( vector.y * heightHalf ) + heightHalf;

Unfortunately all methods I am finding for getting the top,left corner or any corner of the object use Geometry objects which the CSS3DObject does not use (ie. getting the vector of the corner vertices and projecting those vectors ref: https://stackoverflow.com/a/14044103/2009076).

Anyone have any idea of how to accomplish this? To be concise, I would just like to get the real on-screen size of a div (which fits tightly around its img) in a Three.js CSS3D scene. In the end I would like to detect if the camera zoom has made an image bigger than its original size in pixels.

Thanks!

来源：https://stackoverflow.com/questions/14519412/getting-the-real-screen-width-in-pixels-of-a-div-image-using-three-js-and-the-cs