aframe - Set camera position at runtime

6
votes

In a a-scene, I try to change my camera position at runtime. The DOM property changes but the camera does not move.

What could have I missed ?

my js code: document.querySelector('#myCameraPosition').setAttribute('position', '0 0 0');

My a-scene: 

    <a-entity id="myCameraPosition" position="0 0 50">
        <a-entity id="myCamera" camera look-controls keyboard-controls>
        </a-entity>
    </a-entity>
5
webvraframe

5 Answers

8
votes

Create a wrapper entity around the camera:

<a-entity id='cameraWrapper' position="0 0 0">
  <a-camera></a-camera>
</a-entity>

Then change position of the wrapper:

document.querySelector("#cameraWrapper").object3D.position.set(1, 1, 1);
2
votes

Had to set "look-controls" to false for javascript rotation control, otherwise wouldn't work :

function resetView(el){
  el.setAttribute('look-controls','false');
  el.setAttribute('rotation',{x:0,y:0,z:0});
  el.setAttribute('look-controls','true');
}
1
votes

On the example below I can change the position of the camera entity's parent and it works as expected:

https://aframe.io/examples/showcase/helloworld/

Is any of the openearthview or acceleration components writing the position of the camera entitiy's parent? They might be overwritting its position.

1
votes
document.getElementById('myCameraPosition').setAttribute('position', {x:0, y:0, z:0});

or

document.querySelector('#myCameraPosition').setAttribute('position', {x:0, y:0, z:0});
0
votes

When it comes to position you can directly change the camera position(unlike rotation where you need a wrapper entity). so 

document.getElementById('myCameraPosition').setAttribute('position', {x:0, y:0, z:0});

should work