WebGl Globe（球体）上的镜像 Raycaster

Question

对于我的论文项目，我使用 DataArts WebGL Globe 开发一个网页，该网页将在触摸显示器上的展览中使用。作为监视器触摸，我需要使地球可点击以 select 单个国家并打开弹出窗口并突出显示 selected 国家。我正在使用 RayCaster 来查找 touch/click 的坐标，但是使用我的方法我获得了镜像 selection（字面意思是，如果我点击一个点，则点击的位置与地球）。问题似乎只在 x 轴上，但我认为我犯了更多错误。整个代码和整个项目上传到http://www.pietroforino.com/globe/，raycaster代码位于第660行的onMouseDown函数中。这里的代码

var raycaster  = new THREE.Raycaster();
var mouse = new THREE.Vector3();

[...]

mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

raycaster.setFromCamera( mouse, camera );

var intersects = raycaster.intersectObjects( scene.children );

for ( var i = 0; i < intersects.length; i++ ) {
data = intersects[i];
var d = data.point.clone().normalize();
var u = Math.round(4096 * (1 - (0.5 + Math.atan2(d.z, d.x) / (2 * Math.PI))));
var v = Math.round(2048 * (0.5 - Math.asin(d.y) / (Math.PI)));
var p = mapContext.getImageData(u,v,1,10).data;
countryCode = p[0];

for( var prop in countryColorMap ) {
    if( countryColorMap.hasOwnProperty( prop ) ) {
         if( countryColorMap[ prop ] === countryCode )
             console.log(prop, countryCode);
  }
} // end for loop

lookupContext.clearRect(0,0,256,1);

for (var j = 0; j < 228; j++)
{
  if (j == 0)
    lookupContext.fillStyle = "rgba(0,0,0,1.0)"
  else if (j == countryCode)
    lookupContext.fillStyle = "rgba(240,48,104,0.6)"
  else
    lookupContext.fillStyle = "rgba(0,0,0,1.0)"

  lookupContext.fillRect( j, 0, 1, 1 );
 }

 lookupTexture.needsUpdate = true;
}

我需要这个实现，请帮我解决这个问题。

编辑 1.0

非常感谢您的回答，我已经将 var 从 i 更改为 j，但没有任何变化。我也试过删除

for ( var i = 0; i < intersects.length; i++ ) {

那是没用的，但同样没有任何改变。现在可能是什么？

p.s。新版本的 while 代码可在线获取

Answer 1

您的代码中存在错误。外部 for 循环变量 i 在内部 for 循环中被修改。换句话说这里的循环变量：

for ( var i = 0; i < intersects.length; i++ )

被

改变

for (var i = 0; i < 228; i++)

这打破了第一个循环。只需在第二个循环中将 i 替换为 j 即可解决此问题。

顺便说一句：我不确定你为什么要遍历 intersects。我想只 select 第一个条目就足够了，它是离相机最近的交叉点。

WebGl Globe（球体）上的镜像 Raycaster

Mirrored Raycaster on WebGl Globe (sphere)

three.js

raycasting

webgl-globe