新无止竞

首页 » PHP » A-Frame 前端WebVR以及后端Flask服务器搭建(二)

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; // <a-box>
                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; // <a-box>
                el.addEventListener('triggerdown', function() {
                    el.setAttribute('color', '#24CAFF');
                });
                el.addEventListener('triggerup', function() {
                    el.setAttribute('color', '#EF2D5E');
                })
            }
        });
    </script>

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

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



文章如无特别注明均为原创! 作者: 独自狂战, 转载或复制请以 超链接形式 并注明出处 新无止竞博客 - 专注网络技术资源分享的IT博客
原文地址《 A-Frame 前端WebVR以及后端Flask服务器搭建(二)》发布于2018-11-16

分享到:
打赏

评论

游客

切换注册

登录

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册