Search code examples
aframe

aframe - changing camera position dynamically

I am new to aframe and trying to change the camera position dynamically based on user interaction in the scene to go closer to object and come back to previous position.

But somehow this is not working in VR mode. In desktop browser, the camera is changing the position as desired.

HTML:

<a-entity id='cameraWrappers1' position="0 0 0" rotation="0 90 0">
            <a-camera position="0.001 1.85 -0.52" id="cameraPositions1">
                    <a-cursor id="cam2cursor" color="#f000f0" material="" raycaster="" cursor="" geometry="" position="-0.007 -0.04 -2.05" scale="3 3 3"></a-cursor>
            </a-camera>
        </a-entity>

Script:

var m1HotSpot = document.querySelector("#cameraPositions1");
                    var position = m1HotSpot.getAttribute("position");
                    console.log("position:::::" + position.z)
                    //document.querySelector("#m-1").setAttribute('scale', '1 1; 1');
                    if(position.z == -0.52){

                        m1HotSpot.setAttribute("position",'0.001 1.85 -2.35');

                    }
                    else if(position.z == -2.35){

                        m1HotSpot.setAttribute("position",'0.001 1.85 -0.52');
                  }


    }

I have tried the solution

  1. disabled the orbit control, change the position and then enable the orbit control

  2. Putting up a camera wrapper and try to change the position of the wrapper still not working in VR

I am using latest aframe version. Kindly let me know if you have any idea on how to achieve this.

I have put a demo in below pen. When you click on sphere you will be transform close to sphere and again clicking on it will come back at original place. This is working in browser of desktop but not in pixel chrome browser in VR mode. Kindly help. DEMO replica

Thanks, Akki

Solution

  • Set and change the position of the wrapper not the camera:

    var camPos = document.querySelector("#cameraWrappers1");

    Also in the HTML position the wrapper not the camera:

     <a-entity id='cameraWrappers1' position="0.001 1.85 -0.52">

    This is a glitch example with the solution described above (position and move camera wrapper) and tested on a Pixel phone with Chrome: http://glitch.com/edit/#!/nebulous-kidney

    Keep in mind that in mobile the cursor operates in gaze / fuse mode, not when tapping the screen