Hotspot is not good visible en not pulsing

Hello everyone,

I am totally new here so i hope you can help me out. I am learning to use playcanvas with a little bit of javascript knowledge.

My problem is that i am trying to make a Hotspot. The hotspot is visible when i am in the editor but when i launched it it’s not good to see anymore it’s like i rotate the hotspot in a strange way. Maybe that someone can see what i’m doing wrong. Perhaps that i set something strange to create this effect (i took over the settings from the example). I played al litlle bit with the settings but it doesn’t metter.


My goal is to make a hotspot example that when i click on it it’s going to pulse and show text.

Test file: PlayCanvas | HTML5 Game Engine


Sow is solved the problem a kind of. I can see the hotspot now because i turned the camera exactly like the example from playcanvas it self. Also the entity where hotspot stood in had strange scale properties. The object is now standig for the camera en the hotspot is working also the pulsing function.

My only quistion remains how is it possible that it is working now. There is something with the camera properties about how the angle is looking to the object but i cannot figure it out how. I played with the values but nothing changed. Perhaps that some one can explain this?


Without seeing how the project was before when it didn’t work, couldn’t really tell you. From the image you have posted, the entities for the hotspot may have been rotated incorrectly.

The hotspot code works by point the local -Z (local forward) to the camera.

Thank you Yaustar,

Maybe i can ask you something else. Do you now how i can programm a Hotspot.
My goal is to make different hotspots that when i pressed hotspot 1 there is playing a sound if you pressed hotspot 2 another sound etc.

My quistion: How can i call if hotspot is pressed play sound. Because when i use the:
if (event.button == pc.MOUSEBUTTON_LEFT)
than it doesnt matter because i can click every where?

Test project link


Look at pulse.js. That listens for the event when the user clicks on the hotspot. You can do something similar where instead of pulsing, plays a sound effect that you assign in the editor.

Thank you i understand what you mean but that is not going to work right?

If i have more hotspots than one there have to be more hotspot scripts. Because the following will happen that if i press any hotspot they all make the same sound. So i thought to add diffrent scripts for diffrent hotspot.


You can create an attribute for the script which allow you to set the a different audio asset per instance of the script.

This is still very hard to understand. I added now a sound attribtue to the hotspot.js. I made a same file like the pulse.js but in the end i’m still not saying that when hotspot 1 is pressed sound A is playing and if hotspot 2 is pressed sound B is playing


You shouldn’t need to change hotspot.js.

The way that this works is that hotspot.js and pulse.js are on the same entity.

hotspot.js handles the interaction with the user so that when they click on the entity, it sends an event pulse:start to the entity object.

pulse.js listens for the event on the entity and registers a callback so when it is fired, it can animate.

What I’m proposing is that you also create a script (in this case, it looks like change.js) and add it on the same entity.

(now looking at the audio tutorials)

This entity should also have a sound component and a slot of the audio that you want to play for that hotspot. (See this tutorial

change.js should also listen for the event pulse:start on the entity (see how pulse.js does it for reference) and in the callback, play the sound slot that is attached to the entity.

Hello Yaustar,

Thank you so much, I solved it.

First I was convinced that i had to add another js file. But like you said i have to add atribute and listen for the event. Calling an entity is more useful than i thought.