OrbitControls Pan not working with arrow keys

Questions
,
1

I simply added OrbitControls to my scene as indicated from the website’s documentation: OrbitControls

I can zoom, and rotate by scrolling and click-dragging, but when I try to use my arrow keys to move the camera around (camera pan), nothing happens.

I’ve tried manually setting enablePan = true, but still panning does not work. Is there something I am missing?

2

Maybe .listenToKeyEvents?

3

@Gezell here is the function that you can add and call just before a model is loaded. You can check most of my viewers here to see where I have placed it and where I call it from (try not to get overwhelmed with other surrounding code).

You can add more functionality to it as well if you would need it or remove whatever you don’t need.

      function initialize_event_listeners() {
        const arrow_keys = [ 'ArrowUp', 'ArrowDown', 'ArrowRight', 'ArrowLeft' ];

        window.addEventListener( 'pointerdown', ( event ) => {}, false);
        window.addEventListener( 'pointerup', ( event ) => {}, false);
        window.addEventListener( 'wheel', ( event ) => {}, false);
        window.addEventListener( 'keydown', ( event ) => {
          if (arrow_keys.some( k => k === event.key ) || event.ctrlKey || event.metaKey || event.shiftKey) {
            controls.listenToKeyEvents( window );
          }
        }, false);
        window.addEventListener( 'keyup', ( event ) => {
          if (arrow_keys.some( k => k === event.key )) {
            controls.stopListenToKeyEvents();
          }
        }, false);
      }
4

Thanks a lot! I can finally pan the camera

1 Like