Tengo una escena 3D compleja en la que necesito mostrar elementos HTML encima, según una coordenada 3D. (Simplemente estoy superponiendo undiv etiqueta en la parte superior y posicionarlo con CSS.) Sin embargo, también necesito ocultarlo parcialmente (por ejemplo, hacerlo transparente) cuando la coordenada 3D está oscurecida por un modelo (o expresado de otra manera, cuando no es visible en la cámara) . Es posible que estos modelos tengan muchos cientos de miles de caras, y necesito una forma de averiguar si está oscurecido y es lo suficientemente rápido como para ejecutarse muchas veces por segundo.

Actualmente, estoy usando el rastreador incorporado de Three.js, con el siguiente código:

// 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

Sin embargo, esto esmuy lento (la velocidad de fotogramas cae de 50 fps a 8 fps) en estos modelos complejos. He estado buscando mejores formas de hacer esto, pero hasta ahora no he encontrado ninguna que funcione bien en este caso.

¿Hay formas mejores y más efectivas de descubrir si un punto es visible u oculto por las modelos en la escena?