Convert Maus auf gedrehtem Kugel auf Breite und Länge klicken

Question

Ich habe eine Kugel, und ich brauche Mausklick zu konvertieren und Länge zur Breite

Alles funktioniert gut, solange die Kugel keine Rotation aufweist, aber wenn es eine Drehung haben - ich falschen Ergebnissen

Hier erhalten ist mein Code:

var mouse = new THREE.Vector2(); 
mouse.x = (event.pageX/window.innerWidth) * 2 - 1; 
mouse.y = -(event.pageY/window.innerHeight) * 2 + 1; 

var raycaster = new THREE.Raycaster(); 
raycaster.setFromCamera(mouse, camera); 
var intersects = raycaster.intersectObject(EarthSphere); 
if (intersects.length!=1) return; 

var pointOnSphere = new THREE.Vector3();  
pointOnSphere.x = intersects[0].point.x; 
pointOnSphere.y = intersects[0].point.y; 
pointOnSphere.z = intersects[0].point.z; 

var EarthRadius = 20; 
var lat = 90 - (Math.acos(pointOnSphere.y/EarthRadius)) * 180/Math.PI; 
var lon = ((90 + (Math.atan2(pointOnSphere.x , pointOnSphere.z)) * 180/Math.PI) % 360) - 180; 

ich Güssing bin, dass ich irgendwie die pointOnSphere basierend auf Earthsphere, irgendwelche Ideen manipulieren müssen?

EDITED

earth.updateMatrixWorld (true); pointOnSphere = erde.localToWorld (pointOnSphere.clone());

Ich dachte, so etwas wie die folgenden funktionieren würde:

EarthSphere.updateMatrixWorld(true); 
pointOnSphere = EarthSphere.localToWorld(pointOnSphere.clone()); 

Aber es funktioniert nicht ..

Answer 1

Ich denke, müssen Sie .woldToLocal() anstatt .localToWorld() verwenden. So erhalten Sie einen Punkt in lokalen Koordinaten Ihrer Sphäre.

Das sagt über-Dokumentation über .worldToLocal():

Updates der Vektor von Welt-Raum zu lokalen Raum.

Dies bedeutet, dass der in diese Funktion übergebene Vektor aktualisiert wird. Keine Erstellung eines neuen THREE.Vector3().

Diese beiden Funktionen aktualisieren nur einen vorhandenen Vektor, den Sie an sie übergeben.

var raycaster = new THREE.Raycaster(); 
var mouse = new THREE.Vector2(); 
var intersects; 
var pointOfIntersection = new THREE.Vector3(); 
var localPoint = new THREE.Vector3(); 
var spherical = new THREE.Spherical(); 
var lat, lon; 

window.addEventListener("mousedown", sphereClick, false); 

function sphereClick(event) { 
    mouse.x = (event.clientX/window.innerWidth) * 2 - 1; 
    mouse.y = -(event.clientY/window.innerHeight) * 2 + 1; 
    raycaster.setFromCamera(mouse, camera); 
    intersects = raycaster.intersectObjects([sphere]); 
    if (intersects.length == 0) return; 
    pointOfIntersection = intersects[0].point; 
    sphere.worldToLocal(localPoint.copy(pointOfIntersection)); // that's how it works with translation from the world coordinate system to the local one 
    createPoint(localPoint); 
} 

function createPoint(position) { 
    var point = new THREE.Mesh(new THREE.SphereGeometry(0.0625, 16, 12), new THREE.MeshBasicMaterial({ 
    color: 0x777777 + Math.random() * 0x777777 
    })); 
    point.position.copy(position); 
    sphere.add(point); 
    var color = point.material.color.getHexString(); 

    // three.js already has useful object to get polar coordinates from the given vector - 'position', which is in local coordinates already 
    spherical.setFromVector3(position); 
    lat = THREE.Math.radToDeg(Math.PI/2 - spherical.phi); 
    lon = THREE.Math.radToDeg(spherical.theta); 

    pointList.innerHTML += "<span style='color:#" + color + "'>lat: " + lat + "; lon: " + lon + "</span><br>"; 
} 

jsfiddle Beispiel r87.