Is there anyway to change the orientation of the WebGLRenderer?

Questions
1

Hello! I am making a game with three js. I would like to add a button that rotates the orientation of the screen for mobile phones. I feel that many mobile user’s (including myself) turn off auto rotate and it’s a pain to have to turn it off just to be able to flip the screen for one application. YouTube does a great job at this, when you fullscreen a video in YouTube it automatically flips the orientation of the screen.

I want to programatically look at aspect ratio of the screen and set the renderer’s orientation based off it.

I can rotate the scene object as well as the camera object but that feels hacky and weird and would mean I’d have to change a lot of other things.

Is there any way for me to just change the orientation of the renderer?

Thank you

2

Have you looked at the screen orientation API?
https://w3c.github.io/screen-orientation/#examples
This is more for detecting what the user currently has their orientation set to, but it’s important you take user settings into account and adapt as necessary. I’m not sure rotating the content is the best way forward, it depends what the default is for your game.

To rotate the canvas itself, try this:
document.getElementById(“canvasname”).style = ‘transform: rotate(90deg)’;

1 Like
3

A lot detect the orientation and show a message if it’s not in the required, but technically you could also put the canvas in a container along with any ui and set its size to the window depending on the orientation and rotate it with css transform.

It could have impact on the quality though since it triggers antaliasing.

4

I’m trying to accomplish the same task - force the canvas to be rendered as “landscape” when a mobile device is in portrait orientation (ie. device-width = 414px and device-height = 736px)

I have successfully accomplished this with…

  1. camera.aspect = 736 / 414; camera.updateProjectionMatrix()
  2. renderer.setSize(736, 414)
  3. in css setting canvas height = 414px and width = 736px and then using transform: rotate(90deg)

This all works great except for one major thing…I have 3D buttons in my scene and when I go to click them they don’t line up with the rotated canvas, instead their clickable position remains in the same place as before the canvas was rotated.

I’ve tried to set matrixWorldNeedsUpdate = true on the scene’s object3D along with updateWorldMatrix() with no luck. I tried rotating the scene and the camera with no luck.

I’m not sure what else to do. Any help would be greatly appreciated! P.S. I’m using A-frame on top of three.js

5

SOLVED on stackoverflow: three.js - Rotate webGL canvas to appear landscape-oriented on a portrait-oriented mobile phone - Stack Overflow