从 3D 对象获取 2D 边界框

Question

我有一个场景充满了〜数百个长方形小行星形状的物体。我想在每个标签下放置一个文本标签，以便从任何相机角度都可以看到标签。我将文字放在广告牌上，使其始终面向相机。

首先，使用.translateY 将文本放置在 3d 对象下方，一切看起来都很棒。但是，当您开始在场景中移动时，标签不再位于对象“下方”，具体取决于您的相机位置。当您使用 trackballControls 进行定向时尤其如此。

无论方向如何，如何将文本放置在对象的“下方”。也许如果我在每个对象周围创建一个与每帧上的相机相关的 2d 边界框 - 然后我可以将文本标签放在该 2d 框的正下方。

我还担心每帧计算一百个 3d 对象上的 2d 边界框可能会很昂贵。想法？

截图：

首先，文本标签在对象下方出现正确翻译 -y

但是当您旋转相机时，标签会偏向一边

完全翻转相机会显示标签倒置

我的目标是无论相机方向如何，都将标签放在对象下方。

Answer 1

您是否尝试将文本标签添加到对象？

object.add(Label) 代替 scene.add(Label)

Answer 2

我在这里有一个演示站点，可能会帮助您查看资源：

https://dl.dropboxusercontent.com/u/31495717/cubemaker/index.html

当鼠标指针移到 3D 对象上时，此站点将文本 DOM 元素放置在与 3D 对象（使用 CSS 样式设置）的屏幕坐标恒定距离处。

来源：

var id_label = document.createElement('div');
id_label.id = INTERSECTED.name;
id_label.style.position = 'absolute';
id_label.style.top = '-10000px';
id_label.style.left = '-10000px';
id_label.innerHTML = '<span class="particle_label">' + INTERSECTED.name + '<br><span class="particle_sublabel">' + INTERSECTED.subname + '</span></span>';
container.appendChild(id_label);
var id_label_rect = id_label.getBoundingClientRect();
id_label.style.top = (screen_object_center.y - 0.85 * (id_label_rect.height / 2)) + 'px';
if (mouse.x < 0)
    id_label.style.left = (screen_object_center.x - horizontal_fudge * (screen_object_edge.x - screen_object_center.x)) + 'px';
else {
    id_label.style.left = (screen_object_center.x + horizontal_fudge * (screen_object_edge.x - screen_object_center.x) - id_label_rect.width) + 'px';
    id_label.style.textAlign = 'right';
}

DOM 元素被绘制到屏幕外，然后根据其边界框的属性和与之关联的 3D 元素的世界坐标重新定位。当鼠标指针移出 3D 元素边界时，文本标签将从 DOM 中移除。

由于您总是显示标签，您可以修改它以在初始化步骤中绘制元素一次，并在渲染循环中简单地更改 top 和 left 样式属性。