CODEWITHSUNDEEP
javascriptraycastingclickable-image
Thom.as
Thom.as

Reputation: 29

Three js clickable Img in Scene

i have a 360 degree scene where i place some imgs (sprits) on. I'd like to make this imgs clickable, so that I receive a function if i click on it.

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

Upvotes: 1

Views: 2426

Answers (1)

José Lozano Hernández
José Lozano Hernández

Reputation: 2095

I've been looking for something like that, and after some research, I found that the last THREE.js version has new features in the Raycasting. So i'm using this function for detecting the clicks on sprites, and it's working.

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

Upvotes: 3

Related Questions