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 for aframe 0.7.0，但也尝试了0.7.1和master。

光标显示为＆＃34;单击＆＃34;立方体一次，改变它的颜色。无法在桌面和VR模式下移动视图。例如，在VR模式下，当移动我的头部时，矩形保持在直接视图中心。

这是一个实时codepen。

如何修复代码以便我能够移动相机？

Answer 1

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

<a-entity camera look-controls>

使用Gaze Cursor示例时无法更改摄像机视图

1 个答案: