https://github.com/dougreeder/aframe-look-controls-z
Drop-in replacement for A-Frame core look-controls. In magic-window mode, the virtual horizon stays parallel to the real horizon.
https://github.com/dougreeder/aframe-look-controls-z
aframe-component aframe-vr aframevr controls vr webvr
Last synced: 3 months ago
JSON representation
Drop-in replacement for A-Frame core look-controls. In magic-window mode, the virtual horizon stays parallel to the real horizon.
- Host: GitHub
- URL: https://github.com/dougreeder/aframe-look-controls-z
- Owner: DougReeder
- License: other
- Created: 2018-10-04T16:21:47.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-05-26T03:39:02.000Z (about 6 years ago)
- Last Synced: 2025-01-29T17:39:52.400Z (4 months ago)
- Topics: aframe-component, aframe-vr, aframevr, controls, vr, webvr
- Language: JavaScript
- Homepage:
- Size: 7.81 KB
- Stars: 3
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
aframe-look-controls-z
===
An [A-Frame](https://aframe.io) [WebVR](https://webvr.info/) component.
Drop-in replacement for core look-controls, except in magic-window mode, the virtual horizon stays parallel to the real horizon.
(Rotation around the z-axis is tracked, like the x- and y-axes.)
Useful when flying, as in [Elfland Glider](https://elfland-glider.surge.sh/)
[live example scene](https://dougreeder.github.io/aframe-look-controls-z/example.html)
You may also want to [lock the screen orientation](https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation),
which usually requires first going to [fullscreen mode](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API).
Basic Usage
---
```html
```
Screen Orientation Lock and Fullscreen Mode
---
Call goFullscreenLandscape() on a user gesture, such as a mouse click:
```javascript
function goFullscreenLandscape() {
if (!isMagicWindow()) {return;}
let canvasEl = document.querySelector('canvas.a-canvas');
let requestFullscreen =
canvasEl.requestFullscreen ||
canvasEl.webkitRequestFullscreen ||
canvasEl.mozRequestFullScreen || // The capitalized `S` is not a typo.
canvasEl.msRequestFullscreen;
let promise;
if (requestFullscreen) {
promise = requestFullscreen.apply(canvasEl);
}
if (!(promise && promise.then)) {
promise = Promise.resolve();
}
promise.then(lockLandscapeOrientation, lockLandscapeOrientation);
}
function lockLandscapeOrientation() {
if (screen.orientation && screen.orientation.lock) {
screen.orientation.lock("landscape").then(response => {
console.log("screen orientation locked:", response);
}).catch(err => {
console.warn("screen orientation didn't lock:", err);
});
}
}
function isMagicWindow() {
return AFRAME.utils.device.isMobile () &&
! AFRAME.utils.device.isGearVR() &&
// ! AFRAME.utils.device.isOculusGo() &&
! AFRAME.scenes[0].is("vr-mode")
}
```
Properties
---
See [look-controls documentation](https://aframe.io/docs/0.8.0/components/look-controls.html)