3D Ui Buttons not receiving mouse events

Bugs
,
1

I am utilizing reactjs for a website and within it I have some components that utilize babylonjs. I am seeing an issue where the mouse events are not being recognized on 3d buttons, but works fine with 2d buttons.

I am quite new to babylonjs and any/all feedback is most welcome!

Issue URL: Tyler Kokoszka | Profile
Github URL: GitHub - impurity-dev/professional-website

2

can you make sure the canvas is not covered by another control? can you point on your repo where is the code related to the issue?

1 Like
3

This is the component seen in the original website link: professional-website/Stars.tsx at master · impurity-dev/professional-website · GitHub

From the best of my knowledge it is not being blocked by other components. Even when I make the canvas the full screen with nothing else on the page, it still does not work.

4

Do you mind reproducing your scene in the playground? I would like to get React out of the way

1 Like
5

So the code in the playground works: https://playground.babylonjs.com/#2W65U0#1, which leads me to think there is something wrong with the workflow whilst using react?

6

So I was just testing some stuff and adding

import '@babylonjs/inspector';

made the 3d clicks work in my project. I’m not sure why, but I’m wondering if this thread should be closed as it may not be a bug in the framework, more user error?

7

I think so :slight_smile:

8

@Deltakosh , so including the inspector just for 3d animations was undesirable since it bloated the bundle significantly. I decided to do some more investigating of this issue and discovered the exact import that will allow the 3d animation is import '@babylonjs/core/XR/features/WebXRControllerTeleportation' which does not seem correct. You can get this also through import '@babylonjs/core/Helpers/sceneHelpers' but this also seems a bit odd. Any ideas?

9

You need to get the sceneComponent that handles the input so helpers should be fine :wink: