I am trying to learn how to use the left mouse click to activate a light.
The final result I’m expecting is to activate the sunlight over the moon (instead of always on), so if you click to the left it turns on the light if you release it turns off
I am playing with this tutorial file that I forked: https://playcanv.as/b/b4wWbHSG/ (pres keyboard 1, 2 or 3 to turn something on or off)
However, I tried many commands / syntaxes to replace the keys for the left mouse button but it doesn’t work:
if (app.mouse.wasPressed(pc.MOUSEBUTTON_LEFT)) {
this.spot.light.enabled = !this.spot.light.enabled;
}
this is my code:
var LightHandler = pc.createScript('lightHandler');
// initialize code called once per entity
LightHandler.prototype.initialize = function() {
var app = this.app;
this.spot = app.root.findByName("SpotLight");
this.point = app.root.findByName("PointLight");
this.directional = app.root.findByName("DirectionalLight");
this.timer = 0;
this.color1 = new pc.Color(1, 1, 1);
this.color2 = new pc.Color(1, 1, 1);
this.color3 = new pc.Color(1, 1, 1);
this.app.mouse.disableContextMenu();
};
// update code called every frame
LightHandler.prototype.update = function(dt) {
var app = this.app;
if (app.mouse.wasPressed(pc.MOUSEBUTTON_LEFT)) {
this.spot.light.enabled = !this.spot.light.enabled;
}
if (app.keyboard.wasPressed(pc.input.KEY_2)) {
this.point.light.enabled = !this.point.light.enabled;
}
if (app.keyboard.wasPressed(pc.input.KEY_3)) {
this.directional.light.enabled = !this.directional.light.enabled;
}
// a counter that is used as input to sin the functions determining light properties for all lights.
this.timer += dt;
//these 3 code blocks assign color and intensity values that vary according to a sin function
//all sin inputs are in radians
var s = Math.abs(Math.sin(1 + this.timer));
var r = 1-s/2;
var g = s-0.2;
var b = 0.55+s/2;
this.color1.set(r, g, b);
this.spot.light.color = this.color1;
this.spot.light.intensity = 10*s;
s = Math.abs(Math.sin(2 + this.timer));
r = s/2;
g = 0.25+s/2;
b = 1.0-s;
this.color2.set(r, g, b);
this.point.light.color = this.color2;
this.point.light.intensity = 10*s;
s = Math.abs(Math.sin(3 + this.timer));
r = 0.25+s/2;
g = 0.75-s/2;
b = 0.25+s/2;
this.color3.set(r, g, b);
this.directional.light.color = this.color3;
this.directional.light.intensity = 3*(1-s);
};
Hi Will,
As I am not a javascript or programming expert I am trying to do something on the" playing with lights " scene first to understand how to call the mouse click.
Note: I updated the code above, now you can see I am trying to call the mouse click function to switch the light, but I have error, saying that my function doesn’t exist
After I understand I will try to do on my moon scene.
One feedback for your guys for beginners in javascript is that I don’t know which functions are native in the software, you said that pc.input.KEY_1 was deprecated, where in the documentation has this? How do I know what functions such as clicking with mouse, dragging something, etc are existing vs needing to create from scratch?
Another feedback, it would be nice if you guys commented the code more, if I know what is doing what I think the forum would have less questions. I think commenting the code with a glossary of functions could help people learning the language with playcanvas instead of just copying and pasting.
It seems that the grabbing on my moon scene (which is a fork of your earth scene) is related to hammering, I might guess that this is not the same thing as clicking with the mouse?
I don’t see that error - how do I reproduce it. When I click the left mouse button, the light disables/enables correctly.
The KEY_* constants are in the pc namespace. So, for example, pc.KEY_1 is here.
I do recommend reading through the API reference and the User Manual if you haven’t done so already. If you have specific suggestions for changes to that documentation, then we are happy to try making them. Also note that the source for both API reference manual and the user manual are open sourced. Feel free to get involved.
In this particular case, it looks like it was just some outdated code/doc/project that needed updating as Will has done.
The API and User Manual is pretty comprehensive and will have a glossary of all the functions that the engine provides (the former is generated from the engine source on GitHub): http://developer.playcanvas.com/en/api/
I’ve just tried the project and don’t get the error either. Have you managed to fix it?
Also, if you don’t mind, can this trigger be used in my moon scene? (based on the earth model you guys built)
My plan is to activate the light on the moon while pressing and holding it, so you can still rotate the moon as well and it would light up (and be totally dark if you release it) , but I don’t know if that is the actual function that moves the moon, I saw a file called “hammering” in the original project
Not 100% sure what you mean by that question. Looking at the sample project, did you mean this part?
if (app.keyboard.wasPressed(pc.input.KEY_3)) {
this.directional.light.enabled = !this.directional.light.enabled;
}
Every time the ‘3’ is pressed, it switches state between being enabled and not.
In the case that you wanted, when the mouse button is pressed, you just want it to be enabled rather than switching state hence the difference.
What you originally had:
if (app.mouse.isPressed(pc.MOUSEBUTTON_LEFT)) {
this.spot.light.enabled = !this.spot.light.enabled;
}
Is saying, when the mouse button is down, switch state of being disabled/enabled which is why it was flickering. Every frame, it was switching being enabled and disabled.
this.spot.light.enabled = !this.spot.light.enabled is NOT the same as this.spot.light.enabled = true
if (app.mouse.wasPressed(pc.MOUSEBUTTON_LEFT)) {
this.spot.light.enabled = !this.spot.light.enabled;
}
Is the same as:
if (app.mouse.wasPressed(pc.MOUSEBUTTON_LEFT)) {
if (this.spot.light.enabled) {
this.spot.light.enabled = false;
} else {
this.spot.light.enabled = true;
}
}
It’s just a coders shorthand way of writing it if you are using booleans and works in most other languages too. It’s basically saying ‘make x = the opposite value of x’.
