After the canvas is rotated 90 degrees, moving the finger to the left in the direction of the canvas will trigger an upward movement event

For my product demand, I have to rotate the whole page 90deg.
Then I show the main code in the follow page:
https://issuebox.github.io/babylonjs/canvas/rotated.html

when the browser height more than the browser width(or just view on the phone browser,the panleft、panright、panup and pandown events don’t work correctly。If you do not understand the events I described, this is the corresponding in hammer.js

And this is the normal page for compare:
https://issuebox.github.io/babylonjs/canvas/normal.html

I want to make the direction of the event consistent with the direction of the canvas,not the window。

And how to adjust to slove?

when use chrome device toolbar or phone browser,you can feel the problem.

can you do a screenshot maybe?

ok make sense…this should be handled with CSS transform probably right?

The core html:

    <div id="container" class="container">
      <canvas id="canvas" class="canvas" touch-action="none"></canvas>
    </div>

The core css:

.container {
  position: absolute;
  top: 0;
  left: 414px;
  width: 736px;
  height: 414px;
  transform: rotate(90deg);
  transformOrigin: 0 0;
}
.canvas {
  position: absolute;
  width: 100%;
  height: 100%;
}

The core js:

var canvas = document.getElementById('canvas')
var engine = new BABYLON.Engine(canvas, true)
var scene = new BABYLON.Scene(engine)
BABYLON.SceneLoader.ImportMesh(
  '',
  'https://www.babylonjs-playground.com/scenes/',
  'Rabbit.babylon',
  scene,
  function() {
    scene.createDefaultLight(true)
    scene.createDefaultCamera(true, true, true)

    engine.runRenderLoop(function() {
      scene.render()
    })

    window.addEventListener('resize', function() {
      engine.resize()
    })
    
  }
)

For the canvas is rotated, the gesture can not work correctly.

And I try to show on the playground:
https://playground.babylonjs.com/#L1LHYU#1

For some reason, I need rotate the html body node 90deg。When browsing, the user will turn the right side of the phone upward。

In the above video, when My finger move left or right,I don’t want the rabbit be rotated, it should be head up or down。

I tried to rewrite the inputs of the camera, when finger moves to left, I trigger the movedown event。But it is not perfect。

Is there any other way to solve this problem?

And has anyone else encountered the same problem?

And I reupload the demo page https://issuebox.github.io/babylonjs/canvas/rotated.v2.html

the all code is:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>canvas rotated</title>
  <style>
    html, body {
      margin: 0;
      padding: 0;
    }
    .helper {
      position: absolute;
      top: 50px;
      left: 50px;
    }
    .container {
      position: absolute;
      top: 0;
      background-color: #999;
      width: 600px;
      height: 300px;
      transform: rotate(90deg);
      transform-origin: 0 0;
      left: 400px;
    }
    .canvas {
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: red;
    }
    .othernode {
      position: absolute;
      opacity: 0.5;
      height: 30px;
      line-height: 30px;
      font-size: 14px;
      color: #ffffff;
      padding-left: 20px;
    }
  </style>
  <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
  <script src="https://preview.babylonjs.com/babylon.js"></script>
  <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
  <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
</head>
<body>
  <div class="helper">
    <div id="container" class="container">
      <canvas id="canvas" class="canvas" touch-action="none"></canvas>
      <div class="othernode">Imagine you turn the right side of the phone upward</div>
    </div>
  </div>
  <script>
    (function() {
      var canvas = document.getElementById('canvas')
      var engine = new BABYLON.Engine(canvas, true)
      var scene = new BABYLON.Scene(engine)
      BABYLON.SceneLoader.ImportMesh(
        '',
        'https://www.babylonjs-playground.com/scenes/',
        'Rabbit.babylon',
        scene,
        function() {
          scene.createDefaultLight(true)
          scene.createDefaultCamera(true, true, true)

          engine.runRenderLoop(function() {
            scene.render()
          })

          window.addEventListener('resize', function() {
            engine.resize()
          })
          
        }
      )

    })()
  </script>
</body>
</html>

It is interesting…I would have expect the browser to handle it for you (Screen.orientation - Web APIs | MDN)

Do you block it in your meta or something? There is a way to lock it but by default it should follow phone orientation (https://code-boxx.com/lock-screen-orientation/)

For most phones, my boss just want use the phone’s right side as the page top,not affected by the orientation of the phone。

And can I solve it by rotating the coordinate center(or by transforming the world matrix) in the babylon scene?

I am not good at matrix and coordinate transform, just feels related to these。

Thanks. I think I understand your means!

1 Like

You may then just force the orientation and let everything else unchanged

Maybe I will render the canvas in an iframe.