У меня сложная трехмерная сцена, для которой мне нужно отображать элементы HTML сверху, на основе трехмерной координаты. (Я просто накладываю тег div сверху и позиционирую его с помощью CSS.) Однако мне также нужно частично скрыть его (например, сделать его прозрачным), когда трехмерная координата затенена моделью (или выражена в другой путь, когда он не виден в камере). У этих моделей может быть много сотен тысяч лиц, и мне нужен способ узнать, не заслонилось ли это настолько быстро, чтобы работать много раз в секунду.
В настоящее время я использую встроенный raytracer от Three.js со следующим кодом:
// pos = vector with (normalized) x, y coordinates on canvas
// dir = vector from camera to target point
const raycaster = new THREE.Raycaster();
const d = dir.length(); // distance to point
let intersects = false;
raycaster.setFromCamera(pos, camera);
const intersections = raycaster.intersectObject(modelObject, true);
if (intersections.length > 0 && intersections[0].distance < d)
intersects = true;
// if ray intersects at a point closer than d, then the target point is obscured
// otherwise it is visible
Однако это очень медленно (частота кадров падает с 50 кадров до 8 кадров в секунду) на этих сложных моделях. Я искал лучшие способы сделать это, но до сих пор я не нашел ничего хорошего в этом случае.
Есть ли лучшие, более эффективные способы выяснить, является ли точка видимой или скрытой моделями в сцене?
