AR Session 螢幕旋轉適配
這篇文章介紹了當需要橫屏運行微信小程序時如何配置 AR Session。
開始之前
- 通過 AR 驅動的 3D 渲染了解相機圖像相對於螢幕方向的旋轉角是什麼。
- 了解 AR Session 的概念與流程。
Mega 小程序插件的螢幕朝向枚舉
附註
手機螢幕的朝向定義請參考 IOS, Android 等系統的官方定義。
Mega 小程序插件的螢幕朝向枚舉 DeviceOrientation:
| Constant | Value | Description |
|---|---|---|
Portrait |
0 | Portrait |
LandscapeLeft |
90 | LandscapeLeft |
PortraitUpsideDown |
180 | PortraitUpsideDown |
LandscapeRight |
270 | LandscapeRight |
在微信小程序全局配置中修改螢幕朝向
在 app.json 中添加 window 配置，具體定義見 響應顯示區域變化 。
"window": {
"pageOrientation": "landscape"
}
根據實際情況填入 "portrait"（豎屏） 或者 "landscape"（橫屏）。
注意
任何時候不要在 AR 小程序應用中使用 "auto"，在某些情況下會導致 AR 畫面嚴重異常。
設定螢幕朝向
調用 setDeviceOrientation(deviceOrientation) 傳入螢幕旋轉的方向，可隨時調用，立即生效。
比如需要在螢幕相對自然豎直位置逆時針旋轉 90 度的橫屏模式下使用：
let deviceOrientation = mega.DeviceOrientation.LandscapeLeft;
session.setDeviceOrientation(deviceOrientation);
mega 插件提供的螢幕朝向設定是為了彌補微信小程序螢幕朝向監聽缺失。微信在 pageOrientation 設定中僅提供了 portrait 和 landscape 兩個選項，而對於 AR 應用來說僅這兩個選項是不夠的。例如自然朝向逆時針旋轉90度的橫屏和自然朝向逆時針旋轉270度的橫屏完全不同。
因此當 app.json 中 pageOrientation 設定為 portrait 時，可以不調用 setDeviceOrientation(deviceOrientation)，因為一般手機的自然豎直方向是 session 的預設朝向。
當 app.json 中 pageOrientation 設定為 landscape 時，必須調用 setDeviceOrientation(deviceOrientation) 將螢幕朝向固定為 LandscapeLeft 或 LandscapeRight