javascript - 3D对象的ThreeJS 2D边界框

Question

我需要找出我的 3D 对象在屏幕上使用的区域。

我尝试通过 Google 寻找答案，但没有成功。

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 发现的错误