Click event on object

Questions
1

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

1 Like
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

1 Like
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);
 	}
//}
1 Like
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:

2 Likes
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

10

FPS controls, perhaps?

11

you might need this:

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