Camera moving on mouse move without dragging in lwc component

Bugs
1

Hi everyone,
I am implementing a default playground scene in salesforce LWC component and my camera (tested with arcrotate and free camera) moves when i move my mouse over canvas even when i’m not dragging.

Below console is also firing up on mouse move over meshes even without pointer click.

scene.onPointerObservable.add((pointerInfo) => {
        switch (pointerInfo.type) {
          case BABYLON.PointerEventTypes.POINTERPICK:
            console.log("mesh picked")
          }
        });

Anyone knows why this is happening and any workaround of this?

2

Another test shows moving mouse over canvas is firing all pointer events

      scene.onPointerObservable.add((pointerInfo) => {
        switch (pointerInfo.type) {
        case BABYLON.PointerEventTypes.POINTERPICK:
          console.log("pointer pick")
          break;

        case BABYLON.PointerEventTypes.POINTERUP:
          console.log("pointer up")
          break;
          
        case BABYLON.PointerEventTypes.POINTERDOWN:
            console.log("pointer down")
            break;
       case BABYLON.PointerEventTypes.POINTERMOVE:
            console.log("pointer move")
            break;
      case BABYLON.PointerEventTypes.POINTERWHEEL:
            console.log("pointer wheel")
            break;
      case BABYLON.PointerEventTypes.POINTERTAP:
            console.log("pointer tap")
            break;
      case BABYLON.PointerEventTypes.POINTERDOUBLETAP:
            console.log("pointer double tap")
            break;
        }
      });
3

whooooot so weird… @PolygonalSun any idea why this could happen ?

4

Not sure off the top of my head. With our input system, it’s all based off of reacting to standard events and routing the input to the proper callbacks/observers. The first thing that I’d recommend would be to try adding basic event listeners for pointerdown and pointerup (eg. canvas.addEventListener) and seeing if they’re firing. If they are firing, then we know that there might be an issue with the input method. If not then we’ll need to figure out if something else is making the scene.onPointerObservable notify its observers.

Just out of curiosity, what kind of pointer input are you using (mouse, touch, pen, etc)?

5

I am using a mouse on Windows 11 with chrome version 113.0.5672.93.

Basic events like “pointerdown”, “pointerup” and “pointermove” on render canvas are working fine as expected. Only after attaching control like this “camera.attachControl(canvas,true);” creates above unexpected behaviour.

6

Interesting. Does it also happen with Edge on win11?
When using the free cam, what happens just exactly? Does the camera follow the mouse move or does it move on it’s own if you implement ‘keys.*’? I’m asking because I recently found a similar issue that happens in my scene only on win11 and I’m not yet sure to understand the cause.
I will bookmark and follow this as it might give me some clues (or not).
Meanwhile, have a great weekend :sunglasses:

7

Yes, I tested with Edge, chrome, firefox and safari too using v6.0.0 and v5.47.

When using FreeCamera, camera pans in the direction i am moving my cursor, similar to drag behavior. camera does not move on its own.

One thing i noticed is pointerInfo.event.type is returns “pointermove” in babylonjs playground and “mousemove” in my lwc component. I’m not sure if it has to do something with that.

1 Like
8

okay i updated babylonjs version from v6.0.0 to v4.2.0 and i am not facing that issue anymore but i am missing out all the new features and enhancements from v5 and v6.

9

@poshuk can you share a repro somewhere ?

10

Unfortunately I am not permitted to share babylonjs code. Some bits are connected to my organisation but I can help in any other way possible to debug this issue.

11

if you could narrow the issue down and repro in the playground with only the related part of your code (remove all assets and so on, you can even have only one sphere :slight_smile: )

Basically the smallest piece of code running online so we can try ?

12

For mousemove, that should only occur when using Safari.

In any case, if there was any way to create a simple project, site, or, PG demonstrating the info, it’d make this much easier understand what’s going on.