THREE.JS: Get object size with respect to camera and object position on screen

by

You can compute the visible height for a given distance from the camera using the formulas explained in Three.js – Width of view.

var vFOV = camera.fov * Math.PI / 180;        // convert vertical fov to radians
var height = 2 * Math.tan( vFOV / 2 ) * dist; // visible height

In your case the camera FOV is 45 degrees, so 

vFOV = PI/4.

(Note: in three.js the camera field-of-view FOV is the vertical one, not the horizontal one.)

The distance from the camera to the front face (important!) of the cube is 750 – 500 – 50 = 200. Therefore, the visible height in your case is 

height = 2 * tan( PI/8 ) * 200 = 165.69.

Since the front face of the cube is 100 x 100, the fraction of the visible height represented by the cube is 

fraction = 100 / 165.69 = 0.60.

So if you know the canvas height in pixels, then the height of the cube in pixels is 0.60 times that value.

The link I provided shows how to compute the visible width, so you can do that calculation in a similar fashion if you need it.

More Related Contents:

  1. How to change the zOrder of object with Threejs?
  2. Transparent objects in Threejs
  3. Mouse / Canvas X, Y to Three.js World X, Y, Z
  4. How does the calculation of the light model work in a shader program?
  5. Transparent objects in Three.js
  6. Three.js Collada – What’s the proper way to dispose() and release memory (garbage collection)?
  7. Display wireframe and solid color
  8. artifacts when rendering both sides of a transparent object with three.js
  9. three.js – Adjusting opacity of individual particles
  10. three.js – how do I rotate a cylinder around a specific point?
  11. Three.js – Can I ‘apply’ position, rotation, and scale to the geometry?
  12. Outline object (normal scale + stencil mask) three.js
  13. How to use multiple materials in a Three.js cube?
  14. Three.js Rotate Texture
  15. How to implement a ShaderToy shader in three.js?
  16. How to get camera position with mouse move event and transform into screen coordinates in three.js? [closed]
  17. Learning WebGL and three.js [closed]
  18. Rotate object on specific axis anywhere in Three.js – including outside of mesh
  19. How to stop a requestAnimationFrame recursion/loop?
  20. Three JS – Find all points where a mesh intersects a plane
  21. Three.js Projector and Ray objects
  22. Three.js – Geometry on top of another
  23. Three.js/WebGL: Large spheres appear broken at intersection
  24. Three.js cube with different texture on each face
  25. Three.js and loading a cross-domain image
  26. How to save canvas animation as gif or webm?
  27. Three.JS wireframe material – all polygons vs. just edges
  28. How to create a custom mesh on THREE.JS?
  29. Determine if a mesh is visible on the viewport according to current camera
  30. Three.js multiple materials on object loaded via OBJMTLLoader

Leave a Comment