Three.js 将鼠标单击转换为旋转球体上的纬度和经度

我有一个球体，我需要将鼠标点击转换为纬度和经度

只要球体没有旋转，一切都正常，但是如果它有旋转，我会得到错误的结果

这是我的密码：

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; 

我在说，我需要以某种方式操纵基于地球圈的点球，有什么想法吗

编辑

地球更新矩阵世界（真）； pointOnSphere=earth.localToWorld（pointOnSphere.clone（））

我认为下面的方法可以奏效：

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

但它不起作用。

我认为，您必须使用

.worldToLocal（）

而不是

.localToWorld（）

。因此，您将在球体的局部坐标中获得一个点

文档说明了

.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>";
}

var raycaster=new THREE.raycaster（）；
var mouse=new THREE.Vector2（）；
var相交；
var pointOfIntersection=new THREE.Vector3（）；
var localPoint=new THREE.Vector3（）；
var spherical=新的三个球形（）；
var-lat，lon；
addEventListener（“mousedown”，sphereClick，false）；
函数sphereClick（事件）{
mouse.x=（event.clientX/window.innerWidth）*2-1；
mouse.y=-（event.clientY/window.innerHeight）*2+1；
raycaster.setFromCamera（鼠标、相机）；
相交=光线投射器。相交对象（[sphere]）；
if（intersects.length==0）返回；
pointOfIntersection=相交[0]。点；
sphere.worldToLocal（localPoint.copy（pointOfIntersection））；//这就是它如何处理从世界坐标系到本地坐标系的转换
createPoint（localPoint）；
}
函数createPoint（位置）{
var点=新的三网格（新的三网格球面法（0.0625,16,12），新的三网格基本材料({
颜色：0x777777+数学.random（）*0x777777
}));
点位置复制（位置）；
球体。添加（点）；
var color=point.material.color.getHexString（）；
//three.js已经有了一个有用的对象，可以从给定的向量“position”中获取极坐标，该向量已经位于局部坐标中
球形。从矢量3（位置）设置；
lat=3.Math.radToDeg（Math.PI/2-球形.phi）；
lon=3.Math.radToDeg（球形θ）；
pointList.innerHTML+=“lat:”+lat+“lon:”+lon+“
”；
}

---

示例r87。

地球球是一个网格，那么EarthSphere.matrix？