javascript - ThreeJS 2D bounding box of 3D object - Stack Overflow

admin管理员组

文章数量:1345447

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 geometryputeBoundingBox() is only returning the 3D bounding box.

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

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 geometry.puteBoundingBox() is only returning the 3D bounding box.

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

• javascript
• three.js

Share Improve this question Follow asked Aug 24, 2017 at 11:14 vaidvaid 1,5501414 silver badges3434 bronze badges 2

• 2 This sounds like a good challenge. Will the object or camera be animated? If so, do you need to pute the screen space it occupies once per frame? – M - Commented Aug 24, 2017 at 19:20
• 2 Yes it will, and I am very surprised that it's not implemented yet. Both can be animated, but I have an idea. Brb. – vaid Commented Aug 24, 2017 at 20:48

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

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

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

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

  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: http://jsfiddle/holgerl/6fy9d54t/

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

EDIT2: Fixed a bug discovered by @manthrax

A bit late to the party, but here is a version that handles groups, children, and buffered geometry:

function puteScreenSpaceBoundingBox(obj, camera) {
    var min;
    var max;

    // Is this an array of objects?
    if(Array.isArray(obj)) {
        for(var i = 0; i < obj.length; ++i) {
            let box2 = puteScreenSpaceBoundingBox(obj[i], camera);
            if(min === undefined) {
                min = box2.min.clone();
                max = box2.max.clone();
            } else {
                min.min(box2.min);
                max.max(box2.max);
            }
        }
    }

    // Does this object have geometry?
    if(obj.geometry !== undefined) {
        var vertices = obj.geometry.vertices;
        if(vertices === undefined
            && obj.geometry.attributes !== undefined
            && 'position' in obj.geometry.attributes) {
            // Buffered geometry
            var vertex = new THREE.Vector3();       
            var pos = obj.geometry.attributes.position;
            for(var i = 0; i < pos.count * pos.itemSize; i += pos.itemSize)
            {
                vertex.set(pos.array[i], pos.array[i + 1], pos.array[1 + 2]);
                var vertexWorldCoord = vertex.applyMatrix4(obj.matrixWorld);
                var vertexScreenSpace = vertexWorldCoord.project(camera);
                if(min === undefined) {
                    min = vertexScreenSpace.clone();
                    max = vertexScreenSpace.clone();
                }
                min.min(vertexScreenSpace);
                max.max(vertexScreenSpace);
            }
        } else {
            // Regular geometry
            var vertex = new THREE.Vector3();       
            for(var i = 0; i < vertices.length; ++i) {
                var vertexWorldCoord = vertex.copy(vertices[i]).applyMatrix4(obj.matrixWorld);
                var vertexScreenSpace = vertexWorldCoord.project(camera);
                if(min === undefined) {
                    min = vertexScreenSpace.clone();
                    max = vertexScreenSpace.clone();
                }
                min.min(vertexScreenSpace);
                max.max(vertexScreenSpace);
            }
        }
    }
    
    // Does this object have children?
    if(obj.children !== undefined) {
        for(var i = 0; i < obj.children.length; ++i) {
            let box2 = puteScreenSpaceBoundingBox(obj.children[i], camera);
            if(min === undefined) {
                min = box2.min.clone();
                max = box2.max.clone();
            } else {
                min.min(box2.min);
                max.max(box2.max);
            }
        }
    }
    
    return new THREE.Box2(min, max);
}

I am late too. But I rewrite scscsc code to typescript. And I add one more future to it. I puting bbox only from visible objects/meshes.

Coordinates are in [-1, 1], to get sizes just multiply this values by size of canvas.

Edit: I add normalize after projection, because in some cases i get negative or bigger values then [-1, 1].

puteScreenSpaceBoundingBox(obj: Object3D, camera: Camera): Box2 {
    let min: Vector2 | undefined = undefined;
    let max: Vector2 | undefined = undefined;

    // Is this an array of objects?
    if (Array.isArray(obj)) {
      for (let i = 0; i < obj.length; ++i) {
        if (obj[i].visible) {
          const box2 = Utils3D.puteScreenSpaceBoundingBox(obj[i], camera);
          if (min === undefined) min = box2.min.clone();
          else min.min(box2.min);

          if (max === undefined) max = box2.max.clone();
          else max.max(box2.max);
        }
      }
    }

    // Does this object have geometry?
    if (obj.visible) {
      if (obj instanceof Mesh && obj.geometry !== undefined) {
        const vertices = obj.geometry.vertices;
        if (vertices === undefined && obj.geometry.attributes !== undefined && "position" in obj.geometry.attributes) {
          // Buffered geometry
          const vertex = new Vector3();
          const pos = obj.geometry.attributes.position;
          for (let i = 0; i < pos.count * pos.itemSize; i += pos.itemSize) {
            vertex.set(pos.array[i], pos.array[i + 1], pos.array[i + 2]);
            const vertexWorldCoord = vertex.applyMatrix4(obj.matrixWorld);
            const vertexScreenSpace = vertexWorldCoord.project(camera).normalize();
            if (min === undefined) {
              min = new Vector2(vertexScreenSpace.x, vertexScreenSpace.y);
            } else {
              Utils3D.min(min, vertexScreenSpace);
            }

            if (max === undefined) max = new Vector2(vertexScreenSpace.x, vertexScreenSpace.y);
            else Utils3D.max(max, vertexScreenSpace);
          }
        } else {
          // Regular geometry
          const vertex = new Vector3();
          for (let i = 0; i < vertices.length; ++i) {
            const vertexWorldCoord = vertex.copy(vertices[i]).applyMatrix4(obj.matrixWorld);
            const vertexScreenSpace = vertexWorldCoord.project(camera).normalize();
            if (min === undefined) {
              min = new Vector2(vertexScreenSpace.x, vertexScreenSpace.y);
            } else {
              Utils3D.min(min, vertexScreenSpace);
            }

            if (max === undefined) max = new Vector2(vertexScreenSpace.x, vertexScreenSpace.y);
            else Utils3D.max(max, vertexScreenSpace);
          }
        }
      }
    }

    // Does this object have children?
    if (obj.children !== undefined) {
      for (let i = 0; i < obj.children.length; ++i) {
        if (obj.children[i].visible) {
          const box2 = Utils3D.puteScreenSpaceBoundingBox(obj.children[i], camera);
          if (min === undefined) min = box2.min.clone();
          else min.min(box2.min);

          if (max === undefined) max = box2.max.clone();
          else max.max(box2.max);
        }
      }
    }

    return new Box2(min, max);
  }

Utils3D functions which I use, because there was error in types.

 static min(v2: Vector2, v3: Vector3): void {
    if (v2.x > v3.x) v2.x = v3.x;
    if (v2.y > v3.y) v2.y = v3.y;
  }

  static max(v2: Vector2, v3: Vector3): void {
    if (v2.x < v3.x) v2.x = v3.x;
    if (v2.y < v3.y) v2.y = v3.y;
  }

本文标签： javascriptThreeJS 2D bounding box of 3D objectStack Overflow