aframe zoom animation in vr-mode

Question

i have an issue with the camera zoom in AFRAME vr-mode on mobile or in other vr gear. i have built a zoom animation it doesnt work on mobile or in other vr gear. can someone help pls.

here is the code:

<a-entity id="cam-vr" camera="zoom:1; active:false " rotation="0 0 0"  look-controls>
    <a-animation begin="cursor-fusing" delay=" 3000" attribute="camera.zoom" from="1" to="4" dur="1000"></a-animation>
    <a-animation begin="click" delay="500" attribute="camera.zoom" from="4" to="1" dur="1000"></a-animation>

    <a-entity id="cursor" visible="false" cursor="fuse: true; fuseTimeout:4000" geometry="primitive: ring; radiusInner: 0.012; radiusOuter: 0.02; thetaLength: 360; thetaStart: 0" rotation="0 0 90" position="0 0 -1" material="color: black; side: double; shader: flat">
    <a-animation begin="cursor-fusing" attribute="geometry.thetaLength" from="360" to="0" easing="linear" dur="3000"></a-animation>
    <a-animation begin="mouseleave" attribute="geometry.thetaLength" from="360" to="360" dur="0"></a-animation>
    </entity>
</a-entity>

Don McCurdy Don McCurdy · Accepted Answer · 2017-09-24T00:06:16

This isn't possible — in VR with A-Frame or three.js, you are rendering with THREE.VREffect, not simply a THREE.PerspectiveCamera, and there is not a simple equivalent of zooming in while preserving correct left/right eye alignment.

FPS patterns don't always work so well in VR, either. You could move the camera closer to the content, but this can also create nausea for users in VR. It may be better to consider VR-appropriate alternatives, like teleporting.

aframe zoom animation in vr-mode

1 Answers