Threejs Sprite raycasting non conforme

Question

Je rencontre de très mauvais résultats de diffusion sur les sprites. Je dirais que cela fonctionne mieux lorsque les sprites sont centrés mais que l'activation n'est pas cohérente sur les événements suivants.

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

Le tableau TARGETLIST les sprites en cours ...

 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() 

Peut-être un problème avec mise à l'échelle? ou comment Im instanciant l'objet THREE.Raycaster?

Vous pouvez voir un exemple de mon site ici http://earthscool.com.au

Threejs R72

Answer 1

Régler le rayon comme global

var ray = new THREE.Raycaster(); 

Réglez ensuite le rayon que l'on trouve dans la documentation

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

Ajoutez également des gestionnaires d'événements appropriés selon doc ... celui-ci pour les périphériques tactiles

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