使用注视光标示例时无法更改摄像头视图

Question

我使用了 Github 中的示例代码并将其插入样板页面：

 <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello, World! • A-Frame</title>
    <meta name="description" content="Hello, World! • A-Frame">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/aframe/0.7.0/aframe-master.js"></script>
    <script>
    AFRAME.registerComponent('cursor-listener', {
      init: function () {
        var lastIndex = -1;
        var COLORS = ['red', 'green', 'blue'];
        this.el.addEventListener('click', function (evt) {
          lastIndex = (lastIndex + 1) % COLORS.length;
          this.setAttribute('material', 'color', COLORS[lastIndex]);
          console.log('I was clicked at: ', evt.detail.intersection.point);
        });
      }
    });
    </script>
  </head>
  <body>
    <a-scene>
      <a-entity camera>
        <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-entity id="box" cursor-listener geometry="primitive: box" material="color: blue" position="0, 0, -4"></a-entity>
    </a-scene>
  </body>
</html>

在此代码片段中，我将 cdn 用于 aframe 0.7.0，但也尝试了 0.7.1 和 master。

光标出现在 "click" 立方体上一次，并改变了它的颜色。在桌面和 VR 模式下都无法移动视图。例如，在 VR 模式下，当我移动头部时，矩形停留在视野的正中央。

这里是直播codepen。

如何修改代码以允许我移动相机？

Answer 1

您需要将 look-controls 组件添加到您的相机：

<a-entity camera look-controls>

使用注视光标示例时无法更改摄像头视图

Unable to change camera view when using Gaze Cursor Example

aframe