Trijs Sprite raycasting не соответствует

Question

Я испытываю очень плохие результаты raycasting на спрайтах. Я бы сказал, что он лучше всего работает, когда спрайты сосредоточены, но затем активация не последовательна для последующих событий.

var touchCounter=0; 

function onDocumentMouseDown(event) 
{ 
touchCounter ++; 
$('#footer .social h2').text("event " + touchCounter); 
    // update the mouse variable 
    mouse.x = ((event.clientX - renderer.domElement.offsetLeft)/renderer.domElement.width) * 2 - 1; 
    mouse.y = - ((event.clientY - renderer.domElement.offsetTop)/renderer.domElement.height) * 2 + 1; 
    mouse.z = 0.75; 
    Raycasting();  
} 


function onDocumentTouchStart(event) 
{ 
touchCounter ++; 
$('#footer .social h2').text("event " + touchCounter); 

    if (event.touches.length == 1) { 

     event.preventDefault();  

     mouse.x = ((event.targetTouches[0].pageX - renderer.domElement.offsetLeft)/renderer.domElement.width) * 2 - 1; 
     mouse.y = - ((event.targetTouches[0].pageY - renderer.domElement.offsetTop)/renderer.domElement.height) * 2 + 1; 
     mouse.z = 0.75; 

     Raycasting(); 
    } 
} 

function Raycasting() { 
    var ray = new THREE.Raycaster(camera.position, mouse.sub(camera.position).normalize()); 
    var intersects = ray.intersectObjects(targetList); 

    if (intersects.length > 0) 
    { 
     if (intersects[ 0 ].object != INTERSECTED) 
     { 
      if (INTERSECTED) 
       INTERSECTED.material.color.setHex(INTERSECTED.currentHex); 

       $('#footer .social h2').text("event " + touchCounter + " and hit"); 

       controls.autoRotate = false; 
       modal.show(); 
      INTERSECTED = intersects[ 0 ].object; 
      INTERSECTED.currentHex = INTERSECTED.material.color.getHex(); 
      INTERSECTED.material.color.setHex(0xffff00); 
     } 
    } 
    else // there are no intersections 
    { 
     controls.autoRotate = true; 
     modal.hide(); 
     if (INTERSECTED) 
      INTERSECTED.material.color.setHex(INTERSECTED.currentHex); 
     INTERSECTED = null; 
    } 
} 

TargetList массив текущих спрайтов ...

 var spriteList = new Array(
     "solar", 
     "wind", 
     "water"); 

    var spriteMaterial; 

    for (var i = 0; i < spriteList.length; i++) { 
      spriteMaterial = THREE.ImageUtils.loadTexture("assets/models/home/sprites/" + spriteList[i] + ".png", undefined, createHUDSprites); 
    } 

    var ind = 0; 

    function createHUDSprites (spriteMaterial) { 

     var material = new THREE.SpriteMaterial({ map: spriteMaterial }); 

     var sprite = new THREE.Sprite(material); 
     var multi = 0.12; 
     sprite.scale.set(material.map.image.width*multi, material.map.image.height*multi, 1); 

     switch(ind) { 
      case 0: 
       sprite.position.set(-60,20,-18); //solar 
       targetList.push(sprite); 
       break; 
      case 1: 
       sprite.position.set(-20,-42,-35); //wind 
       targetList.push(sprite); 
       break; 
      case 2: 
       sprite.position.set(-20,42,50); //water 
       targetList.push(sprite); 
       break; 
      case 3: 
       sprite.position.set(50,14,45); //shelter 
       targetList.push(sprite); 
       break; 
      case 4: 
       sprite.position.set(50,22,-25); //utilities 
       targetList.push(sprite); 
       break; 
      case 5: 
       sprite.position.set(45,-24,50); //telescope 
       multi = 0.05; 
       sprite.scale.set(material.map.image.width*multi, material.map.image.height*multi, 1); 
       targetList.push(sprite); 
       break; 
      case 6: 
       sprite.position.set(40,42,-20); //utilities 
       multi = 0.05; 
       sprite.scale.set(material.map.image.width*multi, material.map.image.height*multi, 1); 
       targetList.push(sprite); 
       break; 
      case 7: 
       sprite.position.set(-40,-5,-50); //utilities 
       multi = 0.05; 
       sprite.scale.set(material.map.image.width*multi, material.map.image.height*multi, 1); 
       targetList.push(sprite); 
       break; 
      default: 
       sprite.position.set(-20,-42,-35); 
       console.log("Problem loading sprites"); 
     } 

     ind++; 

     scene.add(sprite); 

    } //end createHudSprites() 

Может быть проблема с масштабированием? или как Im, создающий объект THREE.Raycaster?

Вы можете видеть пример моего сайта здесь http://earthscool.com.au

Threejs R72

Answer 1

Установите луч в качестве глобального

var ray = new THREE.Raycaster(); 

Затем установить луч, как найти в документации

function Raycasting() { 
    ray.setFromCamera(mouse, camera); 
    ... 

Также добавьте соответствующие обработчики событий в соответствии с документом ... этот для сенсорных устройств

 mouse.x = (event.targetTouches[0].pageX/window.innerWidth) * 2 - 1; 
     mouse.y = - (event.targetTouches[0].pageY/window.innerHeight) * 2 + 1; 
     mouse.z = 0.5;