前面说的只是如何在网页里放置资源,这部分,讲讲交互。总体来说,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(