получить двумерную ограничительную рамку от 3D-объекта

Question

У меня есть сцена, заполненная сотнями продолговатых объектов в форме астероида. Я хочу разместить текстовую метку под каждым, чтобы метка была видна с любого угла камеры. Я рекламирую текст так, чтобы он всегда смотрел на камеру.

Сначала все выглядит великолепно, помещая текст под 3d-объект, используя .translateY. Однако, когда вы начинаете перемещаться по сцене, метки больше не находятся «ниже» объекта в зависимости от положения вашей камеры. Это особенно актуально, когда вы ориентируетесь с помощью trackballControls.

Как разместить текст «ниже» объекта независимо от ориентации. Возможно, если я создам 2d ограничивающий прямоугольник вокруг каждого объекта по отношению к камере на каждом кадре - я мог бы затем поместить текстовую метку прямо под этим 2d-полем.

Я также обеспокоен тем, что вычисление 2d ограничивающих прямоугольников на сотне трех объектов каждый кадр может стать дорогим. Мысли?

скриншоты:

На первом, текстовые метки отображаются правильно переведены -y ниже объекта

, но при повороте камеры, этикетки получить вбок

листать камеру все что этикетки перевернуты вверх

Моя цель - иметь метки под объектами независимо от ориентации камеры.

Answer 1

Вы пытались добавить текстовые метки к объекту?

object.add (Label) вместо scene.add (ярлык)

Answer 2

У меня есть демо-сайт здесь, которые могли бы помочь дать вам источник, чтобы посмотреть на:

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

Этот сайт мест текстовые элементы DOM на постоянном расстоянии от трехмерного объекта, созданного с помощью CSS, в цикле рендеринга, когда указатель мыши перемещается по 3D-объекту.

Из источника:

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.

Поскольку вы всегда показываете свои ярлыки, вы можете изменить это, чтобы нарисовать элемент один раз на шаге инициализации и просто изменить атрибуты стиля в цикле рендеринга.