三个js可点击图片中的图片

Question

我有一个360度的场景，我放置了一些imgs（sprits）。我想让这个imgs可点击，这样我就可以收到一个函数，如果我点击它。

我的代码：

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

我一直在寻找类似的东西，和一些研究之后，我发现，在过去three.js所版本有在光线投射的新功能。所以我使用这个函数来检测精灵的点击，并且它正在工作。

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