Question

我正在为WebVR应用程序使用a-frame组件。相机具有带光标的外观控件，可让用户选择一个对象。当事件被解雇时，我希望改变相机的位置。这就是我所做的。在场景中定义了摄像机。

<a-entity id="cam" camera="userHeight: 1.6" look-controls>
      <a-entity cursor="fuse: true; fuseTimeout: 500" position="0 0 -1" geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03" material="color: black; shader: flat">
      </a-entity>
</a-entity>

我有一个带有监听器的盒子如下

<a-box box-listener color="tomato" position="1 0 3" depth="1" height="1" width="1"></a-box>

当用户将光标移动到该框并保持半秒时，该事件将被触发。事件脚本如下：

AFRAME.registerComponent('box-listener', {
      init: function() {
        this.el.addEventListener('click', function(evt) {
          var cam = document.getElementById("cam");
          var campos = cam.getAttribute("position");
          campos.x = 1; // some random change.
          var camrot = cam.getAttribute("rotation");
          camrot.x = 0;
          camrot.y = 0;
          camrot.z = 0; // setting it back to looking straight ahead
          var look = cam.getAttribute("look-controls");
          look.enabled = false;
          cam.setAttribute('look-controls',look);
          cam.setAttribute("position", campos);
          cam.setAttribute("rotation", camrot);
          look.enabled = true;
          cam.setAttribute('look-controls',look);
        });
      }
    });

通过放置日志，我发现相机元素中的值会更新，但屏幕上没有任何变化。

我哪里错了？相机元件是否需要刷新？

谢谢，

拉吉

a-frame：无法更改摄像机位置和旋转角度

0 个答案: