A-Frame 前端WebVR以及后端Flask服务器搭建（二）

前面说的只是如何在网页里放置资源，这部分，讲讲交互。总体来说，A-Frame集成了两种交互，第一是基于没有VR设备的交互，模拟鼠标点击交互。第二就是基于VR手柄的交互。

---

模拟鼠标光标

在给相机添加光标：

 <a-camera>
      <a-cursor>a-cursor>
a-camera>

可以看出，光标cursor是相机的子物体，相机移动时光标会保持在相机的正中心，默认这个光标是一个小的黑环，可以更改属性符合自己的审美。这个黑环就是我们在三维环境下模拟的鼠标，也是基于相机凝视的交互。

这个光标相当于相机正中发射一条射线，当它与第一个物体接触时发生你所定义的事件，比如改变一个正方体的颜色：

首先定义一个事件，change-color

<script>
        AFRAME.registerComponent('change-color', {
            init: function() {
                var el = this.el; // 
                el.addEventListener('mouseenter', function() {
                    el.setAttribute('color', '#24CAFF');
                });
                el.addEventListener('mouseleave', function() {
                    el.setAttribute('color', '#EF2D5E');
                })
            }
        });
    script>

设置发生这个事件的物体：

<a-box color="#EF2D5E" position="0 0 -1" change-color></a-box>

当然你可以设置多个这样的物体，只要添加change-color事件即可。

光标还可以设置提醒，比如光标射到什么物体显示物体的名称。

<a-box src="#boxTexture" position="0 2 -5" rotation="0 45 45" scale="2 2 2"  event-set__enter="_event: mouseenter; _target: #cylinderText; visible: true"
                event-set__leave="_event: mouseleave; _target: #cylinderText; visible: false">
            <a-text id="cylinderText" value="this is a cube" align="center" color="#FFF" visible="false" position="1 1 -0.5"
              geometry="primitive: plane; width: 1.75" material="color: #333">a-text>
        a-box>

原理就是首先设置一个子物体显示提示文字，但默认不可见，当有射线时设置子物体可见即可。

---

基于手柄的交互

我们需要在场景中定义手柄，在0.8.0版本中，给手柄添加了激光交互模块，定义如下：

    <a-entity laser-controls="hand: left" controller-cursor raycaster="showLine: true; far: 100" line="color: orange; opacity: 1">
</a-entity>
    <a-entity laser-controls="hand: right" controller-cursor raycaster="showLine: true; far: 100" line="color: orange; opacity: 1">
    </a-entity>

laser包含了激光和手柄在三维世界中显示的模型，controller-cursor定义了手柄交互按键的映射，将射线当作光标来使用，也就是说它和光标组件的作用一致，raycaster和line共同绘制了激光。

如果没有controller-cursor那么你就需要自定义所有的按键映射，比如 triggerdown, triggerup等。
比如：

<script>
        AFRAME.registerComponent('handle-events', {
            init: function() {
                var el = this.el; // 
                el.addEventListener('triggerdown', function() {
                    el.setAttribute('color', '#24CAFF');
                });
                el.addEventListener('triggerup', function() {
                    el.setAttribute('color', '#EF2D5E');
                })
            }
        });
    script>

社区还有一个超级手模块，就是让手柄来模拟手，目前实现了
悬停（Hover）: 在实体的碰撞空间中握住控制器
抓住（Grab）: 按下一个按钮在实体上悬停或移动它
拉伸（Stretch）: 用双手抓住一个实体并调整大小
拖放（Drag-drop）: 将实体拖到另一实体上

这四个功能。不过相比前面的leap motion 来说，这个还是有点复杂。