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

Questions
1

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？

2

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

3

can you do a screenshot maybe?

4
5

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

7

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.

8

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

9

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?

10

And has anyone else encountered the same problem？

11

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>
12

It is interesting…I would have expect the browser to handle it for you (Screen: orientation property - 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 (3 Ways to Lock Screen Orientation With CSS & JS)

13

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。

14

Thanks. I think I understand your means!

1 Like
15

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

16

Maybe I will render the canvas in an iframe.

17

Any updates about this? after I rotate the screen using css, the problem is that the touch action on canvas was changed. for example, left to right action will be like up to down, up to down action will be like left to right action. @99999 @Deltakosh

18

at the end, I use an iframe and rotate the iframe node!