ThreeJS 2D 3D对象边界框

Question

我需要弄清楚我的3D对象使用的屏幕区域.

我试图谷歌寻求答案,但没有成功.

该功能geometry.computeBoundingBox()仅返回3D边界框.

我怎么能把它转换成2D边界框？

Answer 1

您只需将所有顶点转换为屏幕空间并从中创建一个 2D 边界框：

function computeScreenSpaceBoundingBox(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);
}

生成的 Box2 位于标准化屏幕坐标 [-1, 1] 中。您可以通过乘以渲染器的高度和宽度的一半来获得像素：

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

在此处查看它的演示：http : //jsfiddle.net/holgerl/6fy9d54t/

编辑：根据@WestLangley 的建议减少了内循环中的内存使用量

EDIT2：修复了@manthrax 发现的错误