如何创建a-frame菜单- webvr

Question

我正在使用一个框架，我想在屏幕上添加一个菜单来切换场景或其他动作(例如，显示带有信息的模式)。有什么办法可以做到这一点吗？我搜索并找到了aframe-ui-modal-component，它不是我想要的100%，但它显示了某种菜单，但使用它，我无法使这些按钮可点击并触发一个操作。

Answer 1

可以使用平面图元或曲线尺寸来显示菜单。使用Javascript，您可以使这些按钮可单击：

document.querySelector('#menu1');.addEventListener('click', function() {
model.setAttribute('visible','true'); 
}

Answer 2

没有一种直接的方法可以通过鼠标点击来实现典型的javascript事件侦听器，因为这是基于2D空间(x和y屏幕坐标)的，而WebVR处理的是3D空间，因此需要光线投射来确定您在3D空间中指向的位置。

这并不是说没有间接的方法。我将首先给出最短(和功能不太丰富)的解决方案，然后在最后给出更复杂的解决方案。

这里有一个鼠标光标库：https://www.npmjs.com/package/aframe-mouse-cursor-component

这允许您注册三个鼠标事件: click、mouseenter和mouseleave。这将绘制一个从摄影机到鼠标指针的光线投射器，并推断出您所指向的对象。

如果要使用VR视图光标，可以使用：https://aframe.io/docs/0.2.0/components/cursor.html

在这里，您可以注册悬停和单击事件，从您正在查看。

无论您要使用哪种输入设备分别与菜单、鼠标或视图光标进行交互。现在来看看菜单本身。

正如miauz所指出的，你可以创建平面并使用javascript将事件监听器附加到它们上，因为你已经包含了一个工具来为你拾取它们。如果您是事件侦听器的新手，可以在此处找到教程：

http://www.w3schools.com/jsref/met_document_addeventlistener.asp

平面上的文本：

https://www.npmjs.com/package/aframe-bmfont-text-component

现在，您已经有了第三方库，可以将典型的2D事件转换到3D环境中，还可以在菜单中包含的平面对象(按钮)上使用事件。

复杂的方法:你可以自己使用光线投射器。

https://aframe.io/docs/0.2.0/components/raycaster.html

这更深入，需要更多的代码行，但如果您足够熟练，您可以使用它们完成更多任务。例如，在这里，您可以获得从相机延伸的一条线上的所有对象，而上面更简单的解决方案只提供最接近的解决方案。

我希望这能帮到你。祝好运!

Answer 3

有一个使用Aframe，https://aframe.io/docs/1.0.0/guides/building-a-360-image-gallery.html构建360度画廊的教程。它展示了如何指定在单击时执行什么操作，在本例中是更改图库中的图像。这是该事件的代码片段：

<script id="link" type="text/html">
  <a-entity class="link"
    geometry="primitive: plane; height: 1; width: 1"
    material="shader: flat; src: ${thumb}"
    sound="on: click; src: #click-sound"
    event-set__mouseenter="scale: 1.2 1.2 1"
    event-set__mouseleave="scale: 1 1 1"
    event-set__click="_target: #image-360; _delay: 300; material.src: ${src}"></a-entity>
</script>

如果您不想以这种方式处理单击操作，还可以按照此处的指导实现您自己的自定义组件：https://aframe.io/docs/1.0.0/introduction/interactions-and-controllers.html