Reset orientation does not work in phone
Question
I want reset head orientation. I did but that works in PC but not in phone. There is a button called reset. If I click that it should reset the head orientation. It does on PC but not on phone. Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>Hello, WebVR! - A-Frame</title>
<meta name="description" content="Hello, WebVR! - A-Frame">
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<script src="https://rawgit.com/rdub80/aframe-gui/master/dist/aframe-gui.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<a-scene>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow></a-plane>
<a-gui-button resetorientation
id="reset"
class="clickable"
position="-0.038 -1.611 -3.011"
rotation="-25 0 0"
width="2.5" height="0.75"
key-code="80"
value="Reset"
font-family="Helvetica"
background-color="#A04000"
>
</a-gui-button>
<a-sky color="#ECECEC"></a-sky>
<a-camera position="0 2 0">
<a-cursor raycaster="objects: .clickable" ></a-cursor>
</a-camera>
</a-scene>
</body>
</html>
Here is my script:
AFRAME.registerComponent('resetorientation', {
init: function () {
this.el.addEventListener('click', function () {
document.querySelector('#reset').emit(reset());
});
}
});
function reset(){
var x = document.querySelector('[camera]').getAttribute('rotation').x;
var y = document.querySelector('[camera]').getAttribute('rotation').y;
console.log(x);
console.log(y);
document.querySelector('[camera]').setAttribute('rotation', {x: 0 * x});
document.querySelector('[camera]').setAttribute('rotation', {y: 0 * y});
var a = document.querySelector('[camera]').getAttribute('rotation').x;
var b = document.querySelector('[camera]').getAttribute('rotation').y;
console.log(a);
console.log(b);
}
1 answers
solution1
0 2018-03-29 13:56:26
You would need to get into the look-controls and manually add an offset to the xyz rotations it gets from the gyroscope.
A workaround making sense with only the yaw (y) value, would be wrapping the camera in an entity, and when you click reset , you rotate the wrappers yaw.
Live fiddle here .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.