scene.onPointerObservable.add returns false/null on mesh click (svelte/ES6)

Questions
1

Hi
For some reason the onPointerObservable.add is returning false/null when clicking on my ground mesh. Sorry if I got this all wrong :slight_smile:

Codesandbox:
Here is a codesandbox test reproduces the problem.

scene.onPointerObservable.add((pointerInfo) => {  
    console.log(pointerInfo.pickInfo.hit) //returns false always
    console.log(pointerInfo.type)
    console.log(pointerInfo.pickInfo.pickedMesh) //returns null always
});

Playground:
Created a nearly identical babylon playground where it is working as expected

scene.onPointerObservable.add((pointerInfo) => {  
    console.log(pointerInfo.pickInfo.hit) //returns true when clicking on ground mesh
    console.log(pointerInfo.type)
    console.log(pointerInfo.pickInfo.pickedMesh) //returns ground mesh
});
2

Did you try with touch-action: none;?

3

Yes did a test, but did not fix it
image

4

Github:
A barebone test from my application in github to isolate the problem but still no luck… ( using svelte with ES6)
In src/lib/Game.js(line 22) is the troublemaker

npm install
npm run dev

5

cc @PolygonalSun

6

So my first thought here is that if null is being returned, perhaps the Ray class isn’t being imported properly. Lemme take a closer look though

7

I was able to confirm that the reason why your mesh isn’t being picked is because the Ray class hasn’t been imported so picking becomes disabled. Since it looks like you’re just importing the files that you need, some of the files that are forward declared (like the Ray class) are not there. I could see a way of fixing this as just importing the main index and putting it under the BABYLON name space (import * as BABYLON from "@babylonjs/core";) or you could just import the Ray class manually (import { Ray } from "@babylonjs/core/Culling/ray";). There may be a cleaner way to handle this (@RaananW or @sebavan might have a better idea) but having access to that class should fix it.

5 Likes
8

Nope, that’s the way to go.
You can import the file without the class:

import “@babylonjs/core/Culling/ray”;

2 Likes
9

Awsome, thanks for the help, that did the trick :slight_smile: