1

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!

Community
  • 1
  • 1
scottc
  • 101
  • 2
  • 10
  • Moved this over to this question which is a bit more specific: http://stackoverflow.com/q/14533135/2009076 – scottc Jan 27 '13 at 23:18
  • 1
    [here's the answer](http://stackoverflow.com/questions/14533135/how-to-calculate-the-z-distance-of-a-camera-to-view-an-image-at-100-of-its-orig) - added it under your more specific question, but as it answers this too, I thought it might be good to find it here too. – Pekka Toiminen Apr 22 '13 at 11:53

0 Answers0