a-frame: 相机+外观控制 && 键盘控制

Question

对于 Hackaton，我们必须使用带有键盘和相机管理的移动。我没有在文档中找到同时使用两者的可能性。

为了解决这个问题（仅供演示）我自己捕捉关键事件是这样的：

<!--html-->
   <a-entity camera id="camera"  look-controls position="0 1.764 0">
        <a-entity id="cursor" cursor="fuse: false; fuseTimeout: 500" position="0 0 -1"

                   geometry="primitive: ring; radiusInner: 0.01; radiusOuter: 0.02;" material="color: #CCC; shader: flat;">

        </a-entity>
   </a-entity>


//javascript
    priv.bindEvent = function(evt) {
            var el = document.getElementById('camera').getAttribute('position');
            var element = document.getElementById('camera');
            switch(evt.key) {
                case "z":
                    el.z -= 0.2;
                    element.setAttribute('position', el.x+" "+el.y+" "+el.z);
                    break;
                case "q":
                    el.x -= 0.2;
                    element.setAttribute('position', el.x+" "+el.y+" "+el.z);
                    break;
                case "d":
                    el.x += 0.2;
                    element.setAttribute('position', el.x+" "+el.y+" "+el.z);
                    break;
                case "s":
                    el.z += 0.2;
                    element.setAttribute('position', el.x+" "+el.y+" "+el.z);
                    break;
                default:
                    break;

            }
        };

我们正在发现这个很棒的库，我想问一下是否有其他方法可以使用此功能。

提前致谢

Answer 1

执行此操作的默认方法是像您已经在做的那样使用 look-controls，同时使用 wasd-controls 键盘。

示例：

<a-entity camera look-controls wasd-controls></a-entity>

您还可以检查 source code for wasd-controls 是否需要分叉它并针对不同的布局进行更改。

a-frame: 相机+外观控制 && 键盘控制

a-frame: camera+look-controls && keyboard-control

aframe