aframe - changing camera position dynamically

Question

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

disabled the orbit control, change the position and then enable the orbit control
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

I don’t see your code changing the position of the wrapper but the hotspot as you describe in point 2. I don’t know what orbits controls do and usually are applied to the camera. — Diego Marcos, Jun 28 '18 at 09:00
for first comment I have not put the code here but tried changing with 'cameraWrappers1' as well as 'cameraPositions1' without orbit controls which is not working. Did not understood your second point, could you please clear — Akki619, Jun 28 '18 at 09:08
I don’t know what the orbit-controls component is supposed to do. You can remove if it does not contribute to the problem. A full, simple runnable example will help clarify — Diego Marcos, Jun 28 '18 at 09:10
Even I did not use orbit controls.... I have seen as it's one of the solution while browsing through the net for one such problem which i am facing....let me put up a pen for this issue. I have removed the orbit-controls as I am not using it — Akki619, Jun 28 '18 at 09:11
Probably duped of https://stackoverflow.com/questions/36677671/aframe-set-camera-position-at-runtime?rq=1 — Diego Marcos, Jun 28 '18 at 14:19
Did see this earlier, but changing wrappers position not working in VR. Please play with pen to see. — Akki619, Jun 28 '18 at 14:38
Your pen is still applying a position to the a-camera entity (https://codepen.io/anon/pen/zaMZEV) in the HTML. It has to be applied to the wrapper as described in the answer below — Diego Marcos, Jun 28 '18 at 15:13

Diego Marcos · Accepted Answer · 2018-06-28T16:07:18.020

3

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

edited Jun 28 '18 at 16:07

answered Jun 27 '18 at 21:45

Diego Marcos

4,502
3
15
20

did not get that....could you elaborate more..... I did not see script in attached link or code where dynamically camera position is changing – Akki619 Jun 28 '18 at 04:56
There should not be any difference betweed dynamic or not. A runnable full example on glitch will help people understand what you are trying to achieve. Try also without orbit controls first. – Diego Marcos Jun 28 '18 at 08:55
tried without orbit controls as well but it did not work....its working on desktop chrome but not in vr mode of pixel – Akki619 Jun 28 '18 at 09:04
If the problem still manifests without orbit-controls better to remove from the example. Use glitch to create a simple test case that people can execute – Diego Marcos Jun 28 '18 at 09:15
edited question to add pen for the issue I am facing... new to glitch need to explore – Akki619 Jun 28 '18 at 09:33
edited answer. you have to manipulate the wrapper not the camera – Diego Marcos Jun 28 '18 at 09:45
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/173959/discussion-between-akki619-and-diego-marcos). – Akki619 Jun 28 '18 at 10:32
Check also https://stackoverflow.com/questions/36677671/aframe-set-camera-position-at-runtime?rq=1 – Diego Marcos Jun 28 '18 at 14:05
In your codepen you’re still setting a position in the camera not the wrapper – Diego Marcos Jun 28 '18 at 14:23
I am using cameraWrappers1 reference to change the position in the pen not – Akki619 Jun 28 '18 at 14:34
Updated answer with working glitch example tested on Pixel and Android – Diego Marcos Jun 28 '18 at 16:11

aframe - changing camera position dynamically

1 Answers1