Зеркальный Raycaster на WebGl Globe (сфера) - PullRequest
Новая
       57

Зеркальный Raycaster на WebGl Globe (сфера)

2 голосов
/ 14 января 2020

В своем дипломном проекте я использую 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

Большое спасибо за ваш ответ, я изменил переменную с i на j, но ничего не имеет изменилось. Я также пытался удалить 

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

, который бесполезен, но опять ничего не изменилось. Что может быть сейчас?

ps новая версия пока код доступен онлайн

1 Ответ

2 голосов
/ 14 января 2020

В вашем коде есть ошибка. Внешняя for l oop переменная i изменяется во внутреннем for l oop. Другими словами, переменная l oop здесь: 

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

изменяется на 

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

, что разбивает первый l oop. Просто замените i на j во втором l oop, чтобы решить эту проблему.

Кстати: я не уверен, почему вы перебираете intersects. Я думаю, этого должно быть достаточно, чтобы выбрать первую запись, которая является ближайшим пересечением с камерой.

...