对于我的论文项目,我正在使用DataArts WebGL Globe开发一个网页,该网页将在触摸显示器上的展览中使用。作为监视器,我需要使地球仪可单击,以便选择单个国家/地区并打开弹出窗口并突出显示所选国家/地区。我正在使用RayCaster查找触摸/单击的坐标,但是通过我的方法,我获得了镜像选择(从字面上看,如果单击某个点,则该单击将定位在地球仪的相反大小)。问题似乎仅在x轴上,但我认为我犯了更多错误。整个代码和整个项目都上传到http://www.pietroforino.com/globe/,raycaster代码位于onMouseDown函数的第660行。此处的代码
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++ ) {
这没用,但再次没有改变。现在可能是什么?
ps.s。新版本的while代码可在线获得
for ( var i = 0; i < intersects.length; i++ )
由]更改>
for (var i = 0; i < 228; i++)
中断第一个循环。只需在第二个循环中将
i
替换为j
就可以解决此问题。
BTW:我不确定为什么要遍历intersects
。我想只选择最接近相机的交叉点就足够了。