轉換鼠標點擊的經度和緯度上旋轉球

Question

我有一個球，我需要轉換成鼠標點擊的經度和緯度

一切只要工作細如無旋轉的球，但如果有任何旋轉 - 我得到錯誤的結果

這裏是我的代碼：

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; 

我居興，我需要根據EarthSphere以某種方式操縱pointOnSphere，任何想法？

EDITED

earth.updateMatrixWorld（真）; pointOnSphere = earth.localToWorld（pointOnSphere.clone（））;

我覺得像下面將工作：

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

但它不工作..

Answer 1

​​

我想，你必須使用.woldToLocal()，而不是.localToWorld()。因此，您會在球體的局部座標中獲得一個點。

的documetation說，大約.worldToLocal()：

更新從世界空間到局部空間向量。

這意味着載體，通過這個功能，將被更新。沒有創建新的THREE.Vector3()。

這兩個函數都會更新傳遞給它們的現有向量。

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例子r87。