Three.js umgekehrtes Raycasting

Question

Ich richte eine Weltkarte auf einer gekrümmten Ebene ein, die der Benutzer drehen und Länder markieren kann. Wenn ein Land angeklickt wird, bestimme ich, was genau angeklickt wurde und dann mit einigen Informationen über das ausgewählte Land einen Tooltip zeigen, wie auf der Abbildung unten:

Die Karte selbst in drei erzeugt wird, aber die Tooltip ist ein reguläres altes div. Die Sache ist, ich möchte, dass der Tooltip an diesem bestimmten Punkt der Textur festgeklebt bleibt, selbst wenn das Flugzeug gedreht wird. Die ursprüngliche Positionierung des Tooltips basiert auf den Informationen des Rycasters. Daher möchte ich, dass die App die aktuelle Position dieses genauen Punkts relativ zum Container (oder Fenster) zurückgibt, z. B. basierend auf der uv-Koordinate. Wie kann ich das erreichen?

Answer 1

Basing auf dem Link von @ prisoner849 vorgesehen ist, habe ich die folgende Lösung implementiert:

a) auf mouseup Ereignisse ich einen neuen Tooltip 3D Ursprungspunkt (nur gesetzt, wenn es kein signifikantes Delta in Mausposition ist, zu unterscheiden zwischen Klicken und ziehen der Kamera)

b) jedem Rahmen die folgenden Funktion wird ausgelöst, der die 3D-Koordinaten zum 2D umwandelt, und berechnet die Position der Tooltip:

function setTooltipOrigin(camera, renderer, tooltip, lastClickPoint) { 
    var canvas = renderer.domElement, 
    point = new THREE.Vector3(); 

    point.x = lastClickPoint.x, 
    point.y = lastClickPoint.y, 
    point.z = lastClickPoint.z, 

    point.project(camera); 

    point.x = Math.round((0.5 + point.x/2) * (canvas.width/window.devicePixelRatio)); 
    point.y = Math.round((0.5 - point.y/2) * (canvas.height/window.devicePixelRatio)); 

    point.x -= 14; //small adjustment to the position, so the line points to the click point 
    point.y -= (tooltip.scrollHeight * 0.7); //same for y 

    tooltip.style.transform = 'translate(' + point.x + 'px, ' + point.y + 'px)'; 
}