Question

在a-scene中，我尝试在运行时更改相机位置。 DOM属性发生变化，但相机无法移动。

我可能错过了什么？

我的js代码： document.querySelector('#myCameraPosition').setAttribute('position', '0 0 0');

我的场景：

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

Answer 1

在相机周围创建一个包装器实体：

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

然后更改包装器的位置：

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

Answer 2

必须将“look-controls”设置为false以进行javascript旋转控制，否则将无效：

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

Answer 3

在下面的示例中，我可以更改相机实体的父级位置，并且按预期工作：

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

是否有任何openearthview或加速组件写入相机的父母的位置？他们可能会覆盖其立场。

Answer 4

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

或

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

Answer 5

关于位置，您可以直接更改相机位置（与需要包装实体的旋转不同）。

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

应该工作

aframe - 在运行时设置摄像机位置

5 个答案: