Click detection working in Playground, but not with a little web server

Questions
1

Hi,

I am trying to do a basic test (in TypeScript), just detecting when a mesh is clicked/picked and I am having different behavior if I run it on the playground (it works) and if I run it using a little application (little web server made in Rust).

When I execute this code provided via my little web server everything is working, but the event detection! Cannot understand what it is wrong with that! I’ve already tried different browsers on different OSes (Linux, Windows and macOS).

Thank you

2

Hey and welcome!
are you sure you are using the same version as on the PG?

Are you getting the mouse click correctly?

3

Thanks @Deltakosh for the greetings and the reply! :wink:

Yes, it’s the same code, I just copied and pasted (as you can see I’ve also wrapped in the namespace in order to avoid to prefix BABYLONJS everywhere and be sure that I am using the same exact code) and then add the Playground class to execute it.

PG version is working as you can see, while the other one is not detecting the click. Strange thing is that it is only thing that is not working. I have added particle systems, textures, and everything is working, but the click event! :pensive:

4

Can you maybe do a repro on a jsfiddle or somewhere where we can test it and see the issue?

5

Uhm… Never used jsfiddle (I am a kind of JS/TS newbie :blush:), but as I can see jsfiddle doesn’t provide BabylonJS in framework/extension list.

BTW, I was noticing that even this code is not working:

        window.addEventListener("mousedown", function(evt) {
            // left click to fire
            if (evt.button === 0) {
                console.log("!!!");
                music.play();
            }
          });

And strange enough if I use Sound class (just as stupid stuff like this: let music = new Sound("music", Music, scene, null, { loop: true, autoplay: true });) I have another strange problem that I don’t have if I use the playground environment, that is:

The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page. https://goo.gl/7K7WLu

Argh… That’s quite annoying. Complex features (as particles systems, animations) are working like a charm, while this basic stuff seems to be blocked somewhere!

6

Just as note… I resolved last point about sound issue and window click. I was using url-loader Webpack plugin instead of file-loader for MP3 file.

Still having issue with mesh click detection though :worried:

7

I spent half day investigating and I think there is something wrong with canvas style that in some way is preventing to detect the trigger (despite I have followed this).

I have also try to debug the code and it seems that the problem is that function onPrePointerObservable.hasObservers() return false when I am clicking on any mesh.

No clue on how to solve it :slightly_frowning_face:

8

Ok, I found a workaround thanks to this guy and it is working!!! :star_struck:

Don’t know if this approach is better (less heavy on CPU) or worst, but anyway it is working!

2 Likes