vaid vaid - 1 year ago 142
Javascript Question

ThreeJS 2D bounding box of 3D object

I need figure out the area on screen which my 3D object uses.

I've tried to Google for an answer but with no success.

The function

is only returning the 3D bounding box.

How could I convert this to a 2D bounding box?

Answer Source

You simply have to convert all vertices to screen space and make a 2D bounding box from them:

function computeScreenSpaceBoundingBox(mesh, camera) {
  var vertices = mesh.geometry.vertices;
  var vertex = new THREE.Vector3();
  var min = new THREE.Vector3(1);
  var max = new THREE.Vector3(-1);

  for (var i = 0; i < vertices.length; i++) {
    var vertexWorldCoord = vertex.copy(vertices[i]).applyMatrix4(mesh.matrixWorld);
    var vertexScreenSpace = vertexWorldCoord.project(camera);

  return new THREE.Box2(min, max);

The resulting Box2 is in normalized screen coordinates [-1, 1]. You can get the pixels by multiplying with half of the height and width of your renderer:

function normalizedToPixels(coord, renderWidthPixels, renderHeightPixels) {
  var halfScreen = new THREE.Vector2(renderWidthPixels/2, renderHeightPixels/2)
  return coord.clone().multiply(halfScreen);

See a demonstration of it here:

EDIT: Reduced memory usage in inner loop by suggestion from @WestLangley

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download