aframe adjust camera rotation on mobile

3
votes

Using Aframe how I can change the camera rotation manually so it works on mobile and still use look-controls?

I've tried via the html attribute like so:

document
  .querySelector('[camera]')
  .setAttribute('rotation', { x: 0, y: deg, z: 0 })

This works fine on desktop however on mobile the look-controls component seems to reset the camera rotation to previous value.

I've setup a demo the issue here, which changes rotation & disables look-controls. Then I set a timeout which re-ables look-controls after 1 sec. https://embed.plnkr.co/WA1rKucPk0cGffrbfrTh/

Pressing any of the html buttons rotates you to a an object and disables the look-controls. 1 sec later the control are re-abled. If you try this on mobile, you'll notice the camera rotates, then 1 sec its reverts when the look-controls are enabled.

Is there some offset I need to reset on mobile too, the lookcontrols.yawObject perhaps?

2
aframe

2 Answers

2
votes

Put the camera inside an entity:

<a-entity rotation="0 0 0">
    <a-camera></a-camera>
</a-entity>

Then rotate the entity instead of the camera.

1
votes

you need to change the look-controls.js a little bit to make it works,because when on mobile it will not get rotation attribute from the camera entity

function updateOrientation in look-controls.js：

if (sceneEl.isMobile) {
   // On mobile, do camera rotation with touch events and sensors.
   rotation.x = radToDeg(hmdEuler.x) + radToDeg(pitchObject.rotation.x);
   rotation.y = radToDeg(hmdEuler.y) + radToDeg(yawObject.rotation.y);
   rotation.z = radToDeg(hmdEuler.z);
}