Trois js cliquables Img dans la scène

Question

J'ai une scène de 360 ​​degrés où je place quelques imgs (sprits) sur. Je voudrais rendre cet imgs cliquable, de sorte que je reçoive une fonction si je clique dessus.

Mon code:

var map = new THREE.TextureLoader().load("arrow-poi.png"); 
var material = new THREE.SpriteMaterial({ map: map, color: 0xffffff, fog: true }); 
var sprite = new THREE.Sprite(material); 
var geometry = new THREE.PlaneGeometry(6,6); 

sprite.material.side = THREE.DoubleSide, 
sprite.position.x= 40, 
sprite.position.y= -6, 
sprite.position.z= 10, 
sprite.scale.set(6,6,1), 
sprite.name="arrow", 
sprite.directto=r, 

document.addEventListener('mousedown', onDocumentMouseDown, false); 

raycaster = new THREE.Raycaster(); 
mouse = new THREE.Vector3(0, 1, 0); 

projector = new THREE.Projector(); 
clickableObjects = []; 
clickableObjects.push(sprite, sprite1); 

function onDocumentMouseDown(event){ 
event.preventDefault(); 

var vector = new THREE.Vector3((event.clientX/window.innerWidth) * 2 - 1, - (event.clientY/window.innerHeight) * 2 + 1, 0.5); 
projector.unprojectVector(vector, camera); 

var raycaster = new THREE.Raycaster(camera.position, vector.sub( camera.position).normalize()); 
var intersects = raycaster.intersectObjects(clickableObjects); 

    if (intersects.length > 0) { 
    intersects[0].object.onClick(); 
    } 
} 
sprite1.onClick = function(){console.log('Clicked');} 

Answer 1

Je cherchais quelque chose comme ça, et après quelques recherches, je trouve que la dernière version Three.js a de nouvelles fonctionnalités dans le raycasting. Donc j'utilise cette fonction pour détecter les clics sur les sprites, et ça marche.

var raycaster = new THREE.Raycaster(); 
var mouse = new THREE.Vector2(); 
function clickOnSprite(event){ 
    console.log("CLICK! " + event.clientX + ", " + event.clientY);  

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

    var intersects = raycaster.intersectObjects(iconsSprites); 

    intersects.forEach(function(element){ 
     console.log("Intersection: " + element.object.id); 
    }); 
}