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版本在Raycasting中有新功能。所以我使用这个功能来检测精灵的点击，并且它正在工作。

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

三个js可点击Img在场景中

1 个答案: