Use mouse toggle instead of keys


In this fiddle I used the ‘I’ and the ‘O’ keys to toggle the pointlight on or off. Is it also possible to make a mouse toggle? So if you click it the light goes off and when you click it again, the light goed on? I allready tried quite a lot of things, but I can’t seem to get it working.

Something like that:

renderer.domElement.addEventListener("click", function(){
  point.visible = !point.visible;

Oooh shoot… I forgot to tell… when I click on the sphere the light toggles on or off. But when you click next to the sphere the light stays on (so doesn’t response to the toggle) oops :wink:

Use THREE.Raycaster() :slight_smile:
Check, if it intersects your sphere, then setting of visibility is the same as in my previous reply :wink:

I don’t know how to use the raycaster… tried to work with it before, but don’t really understand the logic. Also looked at the examples on the three.js website

:Would be cool to see how you work with THREE.Raycaster(). Can’t say it’s rocket science :slight_smile:

var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var intersects = [];
renderer.domElement.addEventListener("click", onClick, false);

function onClick(event) {
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
  raycaster.setFromCamera(mouse, camera);
  intersects = raycaster.intersectObject(cube);
  if (intersects.length > 0){
  	point.visible = !point.visible;


Hahaha :monkey_face:. I’m still kinda new to it but I have to learn it for school in a few weeks time… most examples are really clear, other take a little more practice like raycaster. But your answer is helping me to understand it more clearly :slight_smile: Thank you :slight_smile:

You’re welcome :slight_smile: