Click event on object

raycaster

#1

Guys, really need help. How to add click event on planets in this project.
https://drive.google.com/open?id=1BoEmESbNo6YXi2EPOEbijRaYwVpHrW6O


#2

@Hidrigar Have you tried adding raycasting? You can add a raycaster, listen for the mousedown event, and when that event triggers, check to see if the user’s mouse position intersects one of your objects:

https://threejs.org/docs/#api/core/Raycaster


#3

@Hidrigar, try this code

  renderer.domElement.addEventListener("click", onclick, true);
  var selectedObject;
  var raycaster = new THREE.Raycaster();
 // function onclick(event) {
  alert("onclick")
  var mouse = new THREE.Vector2();
  raycaster.setFromCamera(mouse, camera);
  var intersects = raycaster.intersectObjects(planets, true); //array
 if (intersects.length > 0) {
 selectedObject = intersects[0];
 alert(selectedObject);
 	}
//}

#4

Your code will find intersection with objects at the center of a screen only, as mouse variable always has values {x: 0, y: 0}. But it will be later. In ther first place, there will be an error message ReferenceError: onclick is not defined.


#5

@prisoner849 , in my project working fine


#6

This is very enigmatic :smile:


#7

I don’t know what magic your project contains @sandipnd31, but I’m intrigued to learn more about it. :stuck_out_tongue:


#8

@Harold do u wanna see my magic, we will connect on team viewer