Use mouse toggle instead of keys

Questions
, ,
#1

Hi,

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.

https://jsfiddle.net/zeemeeuw1994/7epku2om/14/

#2

Hi!
Something like that:

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

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:

#4

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

#5

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

#6

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

}

https://jsfiddle.net/prisoner849/4v0pgLq6/

#7

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:

#8

You’re welcome :slight_smile: